How do I create a Toolbar/ Bookmarklet using Javascript?

Hi i'm a JavaScript novice and need some help. I am trying to create开发者_开发技巧 a toolbar which can be viewed on any website through the use of a bookmarklet, the toolbar is simply just a div with a few links. But i am stuck on how to achieve this. Any help to accomplish this would be greatly appreciated.

most bookmarklets that do something complecated like "creating a toolbar" simply add an external script to the page that the bookmarklet is invoked on.

Basically all you have to do is write a link that contains javascript, which can be acheived by starting the href="" with javascript:

so lets just start with a script in an href that will add an external JavaScript to your page

addScript = function ( url ) {
    myScript = document.createElement('script');
    myScript.src = "url";
    document.head.appendChild(myScript);
};
addScript("http://google.com/");

so if you shrink that down into a url you get..

<a href="javascript:addScript=function(url){myScript=document.createElement('script');myScript.src=url;document.head.appendChild(myScript);};addScript('http://google.com/');"> click to add toolbar </a>

however you want to make this bookmark-able so theres one more level of confusion we have to add... and this part has to be done in different ways depending on the browser

addBookmark( url, title ) {
    if (window.sidebar) { // Firefox
        window.sidebar.addPanel(url,bookmarkName,"");
    } else if(window.external) { // IE 
        window.external.AddFavorite(url,bookmarkName); 
    }
 }

You can include that on the page where you're going to have your add bookmark button. A couple things to note though

1. this isnt going to work in opera.. but who cares about opera
2. webkit browsers (chrome & safari) dont allow javascript to create bookmarklets

Finally you need to mash it all up into one ugly link

 <a href="javascript:addBookmark(\"javascript:addScript=function(url){myScript=document.createElement('script');myScript.src=url;document.head.appendChild(myScript);};addScript('http://google.com/');\",\"whatever you want the bookmarks name to be\")"> click to add bookmark </a>

In the end though I suggest you look into making a Google Chrome Extension or a Firefox Plugin instead of a bookmarklet since you have more capability with either of the two.

As far as how to make a toolbar with JavaScript, well you're just going to have to make another question for that.. Its too much and you haven said enough about what you wan to do for me to answer it here.

bombedmetor,

Greg Guida's tip on including an external script will allow you to create an awesome, clean bookmarklet-based toolbar. Why? Because you'll be able to use JavaScript libraries like JQuery, etc.

Here's a quick example along the lines you asked for to help get you started. The bookmarklet creates a div element with a link to the Stack Overflow homepage.

javascript:void(function(){var divElmt=document.createElement('div');link1=document.createElement('a'); link1.href='http://stackoverflow.com';link1.innerHTML='StackOverflow Homepage';divElmt.style.backgroundColor='yellow';divElmt.style.position='fixed';divElmt.style.top='0px';divElmt.style.width='10em';divElmt.style.height='5em'; divElmt.style.border='solid red 4px';divElmt.style.zIndex='100'; divElmt.appendChild(link1);document.body.appendChild(divElmt);})();

To use the above bookmarklet, you create a new bookmark in your favorite browser and add the code above where you would normally place the URL.

The code does the following:

1. Creates a new div element.
2. Creates a new anchor element and sets the value of the href attribute.
3. Assigns some basic values to the style attributes of the new div (so you can see it easily).
4. Appends the anchor as a child element of the new div.
5. Appends the new div element as a child of the body element.

If all goes well, you should see a yellow box with a link to the Stack Overflow homepage at the top-right of your page after using the bookmarklet. bombedmetor - I hope this helps get you started. After you get comfortable with how these things work, you can apply Greg's wisdom to create your toolbar bookmarklet in a way that can be added to people's browsers with just a click or two.

Something to keep in mind: As Greg indicates, bookmarklet code is treated as the contents of the href attribute of an anchor element. This is why I used single quotes in the code above.

Some sites/articles to check out:

• http://en.wikipedia.org/wiki/Bookmarklets
• http://www.latentmotion.com/how-to-create-a-jquery-bookmarklet/