Add javascript functionality to any site using the web console

June 7, 2012

Sometimes i want to dig into a webpage, but i’d like to have e.g. jQuery at my service. I then easily add jQuery functionality to the site by inserting the following code into the web console of my browser, while on that site:

var toons = document.createElement('script');
toons.type = 'text/javascript';
toons.async = true;
toons.src = 'https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js';
var toonsheader = document.getElementsByTagName('head')[0];
toonsheader.appendChild(toons);

  • This just creates a new dom element, called
  • it then sets the type attribute to text/javascript
  • after that it sets the source url (src attribute) of the javascript file i want to include, in this case jQuery but it can be anything
  • and then the magic happens with the async=true attribute. this makes the browser load the javascript instantly.
  • at last we append the script element to the header.

That’s it! Hope you enjoy it. 🙂

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: