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');
}
Sometimes it’s cool to debug and test javascript applications in Chrome but you want to read / write to local files. Example: you’re looking to use ajax and do a $.getJSON(‘json/somefile.json’). Chrome by default won’t allow this and will throw an error similar to:
Chris Bitting 