6

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.

2 Answers 2

13

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.

5
  • Well i tried the steps but console did not show that error, there were page errors and a bubble that says 7 but i cannot seem to expand it.
    – zeddex
    Commented Jan 21, 2013 at 13:50
  • @zeddex "Bubble"? Page errors may appear due to e.g. resources that failed to load (like images with wrong URLs). Can you post a screenshot? What Chrome version are you using?
    – andr
    Commented Jan 21, 2013 at 13:55
  • Apparently version 22.0.1229.94 m
    – zeddex
    Commented Jan 21, 2013 at 13:59
  • Edit - Actually it works i just forgot getAttribute('id') later, so it seems to be fixed now. Now idea why the console does not work for me but i have solved this now thanks to you pointing out the error. :)
    – zeddex
    Commented Jan 21, 2013 at 14:06
  • @zeddex I've updated the answer, check if you've followed steps 1 and 2 and the code you get is the same. I'm running 24.0.1312.52 m. Yes, a working fix is to check if str != null. I think you're doing something wrong earlier - my colleagues tested resulting bookmarklet from step 2 and it's also working for them.
    – andr
    Commented Jan 21, 2013 at 14:06
4

note that this code

javascript:alert('hi');

wont work unless if there is any visible page i.e try to go to any website first

when i first try it nothing was happening , then when i tried the same code in an existing page it worked

1
  • This is explained in detail in this post
    – cachius
    Commented Sep 9, 2022 at 2:06

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.