If you’ve played w/ Chrome extensions at all, you know they are super powerful. I recently wanted to visit a bunch of pages, and extract some info from each page. I could easily run some jQuery script in the console of each page to do this, but I wanted a quick and easy way to do this. Creating a Chrome extension, that includes jQuery, to run locally is pretty simple. Below are the different files (5 of them) you’ll need (put these all in a single folder).
After creating these and adding your code, add to Chrome by going to Extensions > Load unpacked extension and choose your folder.
1: manifest.json
{ "name": "Your Extension Name", "description": "This was easy", "version": "1.1", "background": { "scripts": [ "jquery-3.1.1.min.js","background.js","content.js"] }, "permissions": [ "tabs", "http://*/*", "https://*/*" ], "browser_action": { "default_title": "My Extension Title", "default_icon": "a-cool-logo.png" }, "manifest_version": 1 }
2: jquery-3.1.1.min.js (get a copy from jquery.com)
3: a-cool-logo.png (16px x 16px)
4: background.js
chrome.browserAction.onClicked.addListener(function(tab) { chrome.extension.getBackgroundPage().console.log('your plugin gonna do something'); //maybe see if your plugin should be allowed to run if (tab.url.indexOf("/maybeCheckAurl/") !== -1) { chrome.tabs.executeScript(null, { file: "jquery-3.1.1.min.js" }, function() { chrome.tabs.executeScript(null, { file: "content.js" }); }); } });
5: content.js (the magic happen here)
//i check to make sure jQuery is loaded if (jQuery) { jQuery(".someclass a").each( function() { //log the results console.log($(this).attr("href")); //maybe do something with them $.get( "http://yourapi"), function( data ) {}); }); } else { alert('no jq'); }