I like using bookmarklets to inject scripts into a page I’m on. One of the popular ones for this is the jQueryify bookmarklet to inject jQuery into a page.
After getting the jQuerify bookmarklet, I created a separate bookmarklet to inject my own JavaScript file into a document. This is handy when I’m debugging a website I either don’t have the files for, or just want to test changes out within the confines of my own browser without touching any of the live files. To do this, I simply Edit the bookmark in my browser, and change the URL embedded in the bookmarklet to point to the URL of the JavaScript file I want to inject into the page. The URL to the script can even be a script on your own computer accessible via http://localhost, if you’re too lazy to upload the script to a public website :)
Recently, I needed to inject a CSS stylesheet into the page I’m on. The bookmarklet for this is very similar to the JavaScript injection bookmarklet. The bookmarklet I created for this is at the bottom of this post.
Dynamic URL Bookmarklets
Even though it’s not a big hassle to Edit the CSS/JS injection bookmarks to change the URL to the JS or CSS file embedded within the bookmarklet, I realized a very convenient bookmarklet would be one that would prompt me for the URL to the CSS/JS file, and then inject that URL. By doing this, I don’t need to edit the bookmark, and can easily inject any CSS or JS file. It’s also easy to inject multiple URLs by running the bookmark more than once, and entering a different URL each time.
Bookmarklets – For your Browser
For convenience’s sake, I have these 4 bookmarklets down below. Feel free to use them. Two of the bookmarklets are for JS injections and two are for CSS injections. Within each pair, one bookmarklet has the URL already embedded within it, and the other one will prompt you for the URL.
Just drag these links into your Bookmarks toolbar or menu area. For reference, the bookmarklet code is under each link.
> Inject JS file <
javascript:(function(){var%20s=document.createElement('script');s.setAttribute('src','http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js');document.getElementsByTagName('body')[0].appendChild(s);alert('Script%20injected!');})();
> Inject JS file (get prompted) <
javascript:(function(){var%20sUrl=prompt('Enter%20URL%20to%20JavaScript%20file');if(sUrl){var%20s=document.createElement('script');s.setAttribute('src',sUrl);document.getElementsByTagName('body')[0].appendChild(s);alert('Script%20injected!');}})();
> Inject CSS file <
javascript:(function(){var%20s=document.createElement('link');s.setAttribute('href','http://l.yimg.com/a/lib/arc/core_1.0.5.css');s.setAttribute('rel','stylesheet');s.setAttribute('type','text/css');document.getElementsByTagName('head')[0].appendChild(s);alert('Stylesheet%20injected!');})();
> Inject CSS file (get prompted) <
javascript:(function(){var%20sUrl=prompt('Enter%20URL%20to%20Stylesheet');if(sUrl){var%20s=document.createElement('link');s.setAttribute('href',sUrl);s.setAttribute('rel','stylesheet');s.setAttribute('type','text/css');document.getElementsByTagName('head')[0].appendChild(s);alert('Stylesheet%20injected!');}})();