Search code examples
javascriptgoogle-chromebookmarklet

Simple bookmarklet not working in chrome

I am new to bookmarklet coding and i have run into a problem where the regular javascript works fine in the browser but not the bookmarklet version.

I had found a bookmarklet which finds a image and turns it into BB code and that works fine, however it loads jQuery and i did not want it doing that all the time. So i was basically just trying to remove the need for it but now it does not work anymore as a bookmarklet.

The original bookmarklet was this:

javascript:document.body.appendChild(document.createElement('script')).src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js';var%20pictureurl=jQuery('img[id$=%22myImage%22]').attr('src');var%20linkurl=document.location.href;alert('%5BURL='+linkurl+'%5D%5BIMG%5D'+pictureurl+'%5B%2FIMG%5D%5B%2FURL%5D');

My javascript which works as regular JS code is:

// Create array variables
var imgs = [];

// Put all of the documents tags in to the arrays
imgs = document.getElementsByTagName('img');

var pictureurl = '';
var linkurl = document.location.href;

for(var i = 0; i < imgs.length; i++){
    var str = imgs[i].getAttribute('id');
    var find = str.search("myImage"); 
    if(find != -1){
        pictureurl = imgs[i].getAttribute('src');
        alert('[URL=' + linkurl + '][IMG]' + pictureurl + '[/IMG][/URL]');
    }
}

When i add javascript: and append the minimized code i can not get it working no matter what i try. If anyone could help me get this working that would be a big help, thanks.

Solution

  • Yeah, you have an error in your code. I would like to show you how to find it yourself rather than just say where it is, so here goes a micro-tutorial ;)

    1. Strip line comments (//) from your JS code as the bookmarklet will be on one line. You should end up with the code:

      var imgs = [];
imgs = document.getElementsByTagName('img');
var pictureurl = '';
var linkurl = document.location.href;
for(var i = 0; i < imgs.length; i++){
    var str = imgs[i].getAttribute('id');
    var find = str.search("myImage"); 
    if(find != -1){
        pictureurl = imgs[i].getAttribute('src');
        alert('[URL=' + linkurl + '][IMG]' + pictureurl + '[/IMG][/URL]');
    }
}

    2. Remove new line characters from the code and prefix the code with javascript: protocol so that Chrome knows that the contents is JavaScript code. Your code should now look like this:

      javascript: var imgs = []; imgs = document.getElementsByTagName('img'); var pictureurl = ''; var linkurl = document.location.href; for(var i = 0; i < imgs.length; i++){     var str = imgs[i].getAttribute('id');     var find = str.search("myImage");      if(find != -1){         pictureurl = imgs[i].getAttribute('src');         alert('[URL=' + linkurl + '][IMG]' + pictureurl + '[/IMG][/URL]');     } }

    3. Create your bookmarklet as a bookmark and make sure its accessible (i.e. visible so you can click it in any Chrome window).

    4. Go to a page on which you will test your bookmarklet code.
    5. Open Developer tools by holding CTRL + SHIFT + I.
    6. Switch to the tab named Console.
    7. Click the bookmarklet.
    8. The console should now show you the errors/warnings that have been issued while executing the code of your bookmarlet.

    9. In case of your code, it spits:

      Uncaught TypeError: Cannot call method 'search' of null (program):1
(anonymous function)

    Which seems reasonable since search() is invoked on the value of str which contains a value of ID attribute, but not all IMG tags have an id assigned.

    What's cool is that you can click on the (program):1 on the right hand side of the window and debug the code, inspect variables, etc.