jacob-israel-turner/howtobookmarklet

Lesson for DevMountain

HowToBookmarklet

Lesson for DevMountain

##Resources

• http://www.smashingmagazine.com/2010/05/23/make-your-own-bookmarklets-with-jquery/

##What is a Bookmarklet?

• A bookmarklet is javascript written in link form that you can run on other people's websites.

• Example: The Pinterest Pin button saves information to someone's pinterest board.

• The script is written in a link that people can add to their toolbar, just like any normal website link.

##Use Cases

• Improve activity or functionality for a user.

• Scrape information off a website. (Like a recipe!)

• " . . ."one-click" tools and functions . . . used to extend the functionality of the browser and to interact with Web services."

• Post to a blog.

• "Pin" something from another website.

• " . . . submit any selected text to Google Search . . . "

• " . . . modify a current page's CSS . . . "

• Whatever else you can imagine.

##Guided Practice

• In the browser open the index.html file from this repo.
• Drag the "Hello World" bookmarklet to your toolbar and click it!
• It alerts "Hello World", nothing you haven't seen before.
• Now go to a Wikipedia page or some other web page and click on the bookmarklet. The alert is running on someone elses page! But it's kind of boring.
• Before we do something more interesting, let's look at how the bookmarklet does it's job by looking at the code. Use your 'right click' on the bookmarklet in the browser toolbar. In the menu that pops up click the 'Edit' button.
• See that the javascript is in the place where we would normally have the url.
• But how did it get there? Go look at the HTML on the index.html file. It's in the link on the index.html page.

At this point you could write whatever script you need directly in the link on the index.html page. However, for it to work, everything has to be in one line, no spaces. And, you got to make sure that the stuff inside is in single quotes rather than double quotes. And, if you are writing anything significant you are really going to want a longer script.

For ease of coding and maintaining, we are going to make our bookmarklet url a javascript "link" to another script (myBookmarklet.js) where we can write the functionality.

To add a script to a webpage, we would normally add to our index.html:

<script src='http://localhost:8888/myBookmarklet.js'></script>

However, our script (myBookmarklet.js) isn't on any of the pages we go to. We will use a script in link form that puts it on the page.

Go to the index.html, comment out the Hello World bookmarklet and uncomment the script below it.

	<a href="javascript:(function(){document.body.appendChild(document.createElement('script')).src='http://localhost:8888/myBookmarklet.js';})();">My Bookmarklet</a>

The script in the 'a' tag we uncommented uses basic javascript to append a script tag and our script source (myBookmarklet.js) to the document.body of the current page we are on.

However, that script has to be online somewhere if it is going to get appended, so I have spun up a simple server (server.js) that will serve our script every time we press the button.

• To test it out, you need to run npm init and npm install express to make the server.js file run.
• Then, you need to start up the server using node or nodemon.
• Again, go to wikipedia or another page that isn't and run the script. (P.S. Don't go to an https website for this one).
• You get . . . another alert? Come on . . .
• Go to the bottom of the web page and see what you have added.
• That's better.
• In DevTools you can at this point look and see that your script was actually appended to the page.
• Now let's take a look at the myBookmarklet.js and I'll explain what's going on .

##Traversing the DOM

If you want to pull/'scrape' information off the page then you need to learn to look at the information you get using document.getElementsByClassName/getElementsByTagName, etc.

We will look at my recipe site to see more specifically what I mean by traversing the DOM as well as to show you how I hooked it up to pass information to my database.

##Resource for Problem Solving if you were to use this with Angular Angular will append an unsafe: when people grab your bookmarklet if you aren't hosted https://.

• http://stackoverflow.com/questions/18565560/how-to-dynamically-change-bookmarklet-parameters-using-angular
• Feel free to hit me up with questions.

##Independent Practice

• Modify the myBookmarklet.js script so it scrapes the type information that you want. Find a music site, a sports site, or other site that interests you. Create a javascript object that you can 'save' the information to and console log the object when you have all the information.
• Example: On my recipe site, I use a constructor object that has some of the following properties.

var Recipe = {
	recipeName:
	recipeUrl:
	recipeImage:
	recipeIngredients: []
}

• Alternatively, create a bookmarklet that creates a widget on the webpage. A simple example would be a clock that appears at the top of the page. This doesn't actually alter the page that others are seeing. The script is running client side, so only the client using the bookmarklet experiences it.