How to create a Google Chrome extension

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.

// First we create a right-click context menu
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create({
    id: "SearchGoogle",
    title: "Search Google for something",
    contexts: ["all"]
  });
});

// Next respond to the event when the above is clicked.
chrome.contextMenus.onClicked.addListener(event => {
// Notice "SearchGoogle" matches the context menu ID above.
  if (event.menuItemId == "SearchGoogle") {
       // Similar to regular events in the browser
       // - you can access the event object and grab
       // - the text the user has highlighted
       const text = event.selectionText;
       const baseUrl = "https://www.google.com/search?q="

       // Next - create a new tab and open the URL.
       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.