How to insert & run jQuery in chrome console

Tue Feb 21 2017

Paul Shan

Many a times we run into the need to testing some elements in some webpages which we don’t own. May be to do some reverse engineering or just to test something.
If that webpage uses jQuery then it’s quite easy for us to do our reverse engineering; but in case jQuery is not there, it’s a headache to do stuffs with native JavaScript. Cause jQuery is always a better DOM manipulator.

To ease our life you can externally insert jQuery on that webpage from your browser’s console. All you need to do is to copy-paste and run the following code in the console.

var jq = document.createElement('script');
jq.src = "https://code.jquery.com/jquery-3.1.1.min.js";
jq.onload = function(){ 
	jQuery.noConflict();
}
document.getElementsByTagName('head')[0].appendChild(jq);

Better way for regular users

If you often come across this situation and have to insert jQuery in multiple pages, you can probably save it as a bookmarklet and include it in the page just by clicking on that bookmarklet. Follow the steps below to create a bookmarklet.

Step 1: Open an empty tab in your browser.
Step 2: Bookmark that empty tab with a name.
Step 3: Now edit that saved bookmark and save the following code in the place of url or location.

javascript:var jq=document.createElement("script");jq.src="https://code.jquery.com/jquery-3.1.1.min.js",jq.onload=function(){jQuery.noConflict()},document.getElementsByTagName("head")[0].appendChild(jq);

Step 4: Save the bookmark.
Step 5: Now you can include jQuery in any of the webpages you want, just by clicking on the bookmarklet after the required webpage is loaded.

Caution

There are some webpages (Eg: gmail) who strictly doesn’t allow loading of external scripts. On those pages the approach mentioned above will not work.

SHARE THIS ARTICLE

post-thumbnail
Today everyone knows the importance of a lightning-fast website and how the speed impacts the conversion rate of a business. Today, everyone wants the site to be a PWA so that the mobile users can have an app-like experience with the website because, for the majority of the merchants, the customers come through mobile devices.
Tue Apr 20 2021
post-thumbnail
Here we are going to see how you can manage backup and restore of Postgres database with docker.
Thu Sep 03 2020
post-thumbnail
Image sliders or carousels always have increased the UI attraction of websites and they are pretty useful for reflecting the major roles/products too. In case, I am having a website that sells tee-shirts,
Mon Apr 30 2018

About VoidCanvas

This blog was created out of hobby and talks mostly about technology, web development, JavaScript, NodeJS and related topics. Thank you for reading my blog.

Copyright 2022 - www.voidcanvas.com

Popular Articles

Authentication using Google's oAuth api with node.js

Thu Mar 10 2016

OAuth authentications are pretty popular now a days and another thing which is popular is JavaScript. This article shows how to plugin google’s oAuth api for authentication in your own node application.

CSS3 Loader Snippet Collection: (Part 2 - Squares)

Sat Mar 01 2014

This is a continuation of my CSS3 loader snippet collection series. I've provided spinning css3 animation loader in the part 1 of this series and here in part 2, I'm providing various square type loading