I don't write Chrome extensions often, it's usually once in a couple of years, and every time I come back to building one - it's really painful to remember how to go about using the API.
Google documentation is comprehensive, however, I just don't have the attention span to sift through so many pages, a sea of documentation that's extremely verbose, and sometimes confusing without a strong cup of coffee.
Anyway, getting back to the point of this article - I will run through a basic extension to help save you an hour or two of pulling out your hair.
The manifest file
First things first, you are going to need a settings file called "manifest.json" - which lists and controls permissions, where your files are, and so forth.
{
"name": "My Fancy Extension",
"version": "0.0.1",
"description": "Something cool is coming",
"permissions": [
"contextMenus",
"tabs"
],
"icons": {
"16": "icons/app-icon.png",
"48": "icons/app-icon48px.png",
"128": "icons/app-icon128px.png"
},
"background": {
"service_worker": "service_worker.js"
},
"host_permissions": [
"https://*/*",
"http://*/*"
],
"manifest_version": 3
}
We use the "contextMenus" permission to create menu items on the mouse right-click menu. The "tabs" permission is used to open a new tab.
The background service worker
This is essentially our application main and will contain all the code needed to install and use our extension.
You can name the file whatever you want to, so long as the name in your manifest matches the file name.
chrome.runtime.onInstalled.addListener(() => {
chrome.contextMenus.create({
id: "SearchGoogle",
title: "Search Google for something",
contexts: ["all"]
});
});
chrome.contextMenus.onClicked.addListener(event => {
if (event.menuItemId == "SearchGoogle") {
const text = event.selectionText;
const baseUrl = "https://www.google.com/search?q="
chrome.tabs.create({url: baseUrl + text});
}
});
Conclusion
That's really all there is to creating a basic extension. Even though this is a very simple implementation, it's quite powerful and you can get a lot of mileage from just adding menu items to the context menu.
To keep things simple, I did not add validation or separate out the logic into functions, however, you get the idea and can use this as a starting point to expand upon.
Happy extension building, check back soon - I'll be covering a more advanced extension with a setup wizard and popup window.
