Bookmarklets
Get Specific Button Onclick Value
Style All Paragraphs on Page
Number of Buttons on a Page
Number of Links on a Page
Show the InnerHTML of Each Paragraph on a Page
Show the InnerHTML of Each Paragraph with Style
Show the href of All Links on the Page
Show the href of All Links on the Page with Style
We can make Bookmarks that Trigger Javascript code. We call these Bookmarklets.
Our Bookmarklets can Modify, Copy, Redesign, the Web Page you are on.
Don't like the pages Font? Change it instantly with a bookmarklet.
Don't like the pages Background color? Use a Bookmarklet.
Don't like the images on a page? Use a Bookmarlet to remove them.
Do you want all of the links on a page to be displayed on one page? Bookmarklet.
Do you want to collect all of the names of people on a page? Bookmarklet.
Our Bookmarklets can Modify, Copy, Redesign, the Web Page you are on.
Don't like the pages Font? Change it instantly with a bookmarklet.
Don't like the pages Background color? Use a Bookmarklet.
Don't like the images on a page? Use a Bookmarlet to remove them.
Do you want all of the links on a page to be displayed on one page? Bookmarklet.
Do you want to collect all of the names of people on a page? Bookmarklet.
CREATE A BOOKMARK
OR, CREATE A BOOKMARK by using the
Bookmarks Menu, OR, Shortcut Keys
Open the Properties, of the Bookmark, that we Created
javascript: alert('hi');
We Typed in the Code above, in the Location area, of our Bookmark
REVIEW:
We Typed our Javascript in the Location area
Remember, Our Code is written in the LOCATION area, of the Bookmark.
Remember to Hit SAVE.
Remember to Hit SAVE.
How to Trigger our Bookmarklet Javascript Code
SUMMARY
We Created a Bookmark.
We Placed the Bookmark in our Bookmark Toolbar, for easy access.
We Opened the Properties of the Bookmark.
We Renamed the Bookmark.
We Typed Javascript Code in the Location Area of the Bookmark.
We Saved the Changes that we made to the Bookmark.
We Left Clicked on the Bookmark to Trigger the Javascript Code.
The result is an alert message to the user.
We Placed the Bookmark in our Bookmark Toolbar, for easy access.
We Opened the Properties of the Bookmark.
We Renamed the Bookmark.
We Typed Javascript Code in the Location Area of the Bookmark.
We Saved the Changes that we made to the Bookmark.
We Left Clicked on the Bookmark to Trigger the Javascript Code.
The result is an alert message to the user.
Copy and Paste Our Bookmarklet
Anonymous Functions
When we want our Bookmarklets to use Variables,
we must wrap our code
in an Anonymous function.
This simple code here works,
because there are no variables declared or used.
javascript: alert('howdy');
But this code here, will only work once.
javascript: let myText= "Howdy"; alert(myText);
WHY?
Because, when we trigger the bookmarketlet again,
we are declaring the myText variable AGAIN!
This is called REDECLARATION of a Variable.
An error results from NOT wrapping
our Javascript code in an anonymous function.
THE SOLUTION is very simple.
We wrap all of our Javascript code in one anonymous function, to avoid any declaration issues.
Let's take a look at this simply.
We create our anonymous function like this
javascript: function( ) {
} ) ( );
Our code goes inbetween, sandwiched inside of the anonymous function, which does NOT need a name.
Let's take a look
at how we use this
anonymous function wrapper.
javascript: function( ) {
let myText= "Howdy";
alert(myText);
} ) ( );
We can do so many things with Bookmarklets
and best of all, we don't have to use them in a bookmark.
In fact, we can simply
type in the Browser Console
"javascript:(function( ){ " + alert("hi"); + " })( )"
F12 to open Developers tools. Go to Console Tab.
mozllia shortcut is control + shift + k
chrome shortcut is control + shift + j
After you paste the above code in, exactly as you see it,
including the quotes, then press enter on your keyboard.
Let's examine the method of using the console closely.
"javascript:(function( ){ " + + " })( )"
We put our code between the + +
After we have fully tested the console code, we will remove the quotes and the addition sign.
CONSOLE VERSION
"javascript:(function( ){" + alert("hi"); + "})( )"
BOOKMARK VERSION
javascript:(function( ){ alert("hi"); })( )
and best of all, we don't have to use them in a bookmark.
In fact, we can simply
type in the Browser Console
"javascript:(function( ){ " + alert("hi"); + " })( )"
F12 to open Developers tools. Go to Console Tab.
mozllia shortcut is control + shift + k
chrome shortcut is control + shift + j
After you paste the above code in, exactly as you see it,
including the quotes, then press enter on your keyboard.
Let's examine the method of using the console closely.
"javascript:(function( ){ " + + " })( )"
We put our code between the + +
After we have fully tested the console code, we will remove the quotes and the addition sign.
CONSOLE VERSION
"javascript:(function( ){" + alert("hi"); + "})( )"
BOOKMARK VERSION
javascript:(function( ){ alert("hi"); })( )