Chrome extensions are awesome and most times someone’s created something that will most likely fit your needs. But what if you can’t find what you need? For that you can create your own. Here, we’ll walk through the structure of an extension and go through a specific example of a plugin we created to help with navigating sites when link auditing.
The anatomy of a Chrome Extension
All you really need are 3 files:
- json – this tells chrome all the information it needs for the extension
- A javascript file – this provides the logic and actions you want the extension to perform
- A 16×16 png file – this is the image for your extension in Chrome
These are the files we used to create the plugin below:
Be sure to create a folder to place the files as it will be used to install the plugin.
Link auditing extension example
The final output of the exercise was an extension, that when clicked takes the user to the homepage of the site in question.
If you’ve link audited before you find this EXTREMELY useful.
Now, let’s breakdown the contents of the different files.
1) Manifest.json
The below is the code that sits in the manifest.json file. This file needs this exact naming.
{
"manifest_version": 2,
"name": "Domain visit",
"description": "This extension visits the domain of the URL",
"version": "1.0",
"background": {"scripts": ["background.js"] },
"browser_action": {
"default_icon": "c3_16x16px.png",
"default_title": "Domain visit"
},
"permissions": [
"activeTab",
"tabs"
]
}
The manifest version is the current designated version to use (more details can be found at https://developer.chrome.com/extensions).
Name, description, and version are parameters you control for the extension. Here we’ve called our extension Domain visit.
The “Background” line designates that we want the extension to monitor in the background for event actions. Here we’ve designated it to run the background.js file.
We’ve designated a default_icon to use and the default_title when you hover over.
Finally we have to assign permissions to allow the extension to interact with the browser – these permissions will be different depending on what actions you are performing.
For more detail of other parameters in the manifest file head over to https://developer.chrome.com/extensions.
2) The logic script – background.js
We’ve called this background.js, but you could name it anything you like as long as the file name is referenced correctly in the manifest file. Here is the code that performs the actions on clicking the extension. This is the code as is, including comments:
// Called when the user clicks on the browser action.
chrome.browserAction.onClicked.addListener(function(tab) {
var url = tab.url;
var urlParts = url.split(/[/?#]/);
var domain = urlParts[0] + "//" + urlParts[2];
//console.log("url is " + url);
//console.log("url split is " + urlParts);
//console.log(domain);
chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
chrome.tabs.update(tabs[0].id, {url:domain});
});
});
To summarise the logic
- Read the tab url into a variable called url
- This is then split using the identified backslashes into an array in variable urlParts
- The domain variable extracts just the domain from the url string
- We then query the chrome tab and update with the new domain url variable
3) Installing your extension in Chrome
The final step is to install into Chrome by following the below:
- Navigate to chrome://extensions in your browser. You can also access this page by clicking on the Chrome menu on the top right side of the Omnibox, hovering over More Tools and selecting Extensions.
- Check the box next to Developer Mode.
- Click Load Unpacked Extension and select the directory for your “Hello Extensions” extension.
There’s most likely a much more efficient way to do this and would be good to hear any suggestions. Feel free to connect via Linkedin or simply contact us.
