[{"id":"cG9zdDo3MDU=","slug":"write-cross-browser-extensions-without-the-tears","title":"Write cross browser extensions without the tears","content":"\n

Today I want to cover the process of developing browser extensions, from start to finish and submission to the chrome and firefox stores.
According to Apple the new Safari will have better support for extensions, but as for now (Dec. 2021) this is not the case so we will focus on Firefox and Chromium based browsers.

\n\n\n\n

This guide and the examples will be based on Ora, a web extension I wrote for both Firefox and Chrome.

\n\n\n\n

We will not touch on the controversial manifest version 3. We’ll stick to version 2.

\n\n\n\n

\"\" — Photo by Markus Spiske on Unsplash

\n\n\n\n

The Basics

\n\n\n\n

Let’s dive right in! A browser extensions is basically a series of small “websites”. Logic is written in Javascript, styled in CSS, etc. This also means that we can use Vanilla JS, React, Svelte, whatever you prefer.

\n\n\n\n

There are mainly 3 types of content you need to know.

\n\n\n\n

Content scripts
These are files that you will be injected into existing tabs of the user. This can be CSS or JS files. They live on a tab level.
Background scripts
Here we have files that will run in the background, in a separate thread. They are not bound to any tab/window and have basically the same runtime as the browser itself. These are only JS scripts.
Normal websites for your extension
As we will se later, files inside your extensions will be served as if it was a server, so here you will code you settings page, dashboard and everything else. These are HTML, CSS, JS, images, etc. You name it.
Often this will be an options page, or a dashboard.

\n\n\n\n

Almost everything I learned about browser extensions I learned from the MDN Docs, they are amazing! If you are stuck this should be the first point to look.

\n\n\n\n

The Manifest

\n\n\n\n

The first thing you’ll need to know is a file called manifest.json.
Here you will define all the contents, permissions, icons, name, etc. It’s the entry point to your app. It’s where your high level configuration lives.

\n\n\n\n

{\n  \"manifest_version\": 2,\n  \"name\": \"Ora\",\n  \"version\": \"0.8.1\",\n  \"description\": \"See how much time you spend on each website and set limits\",\n}

\n\n\n\n

Icons

\n\n\n\n

Every extensions has an icon. They are defined in the manifest.json.

\n\n\n\n

icons is for the general icon, in the settings menu e.g.
browser_action is for the icon you’ll see in the browser interface. Optionally you can specify theme_icons for dark mode support.

\n\n\n\n

As a general rule you can always specify different sizes, but in my experience the easiest method is to just use a good high res (256 or 512px) png. SVGs support is quite hit or miss, would not recommend it.

\n\n\n\n

Here I chose the same 512px png for both the extension and the interface.

\n\n\n\n

{\n  \"manifest_version\": 2,\n  ...\n  \"icons\": {\n    \"512\": \"icons/watch.png\"\n  },\n  \"browser_action\": {\n    \"default_icon\": {\n      \"512\": \"icons/watch.png\"\n    },\n    \"default_title\": \"Ora Dashboard\",\n    \"theme_icons\": [\n      {\n        \"light\": \"./icons/watch.png\",\n        \"dark\": \"./icons/watch-alt.png\",\n        \"size\": 512\n      }\n    ]\n  }\n}

\n\n\n\n

Permission

\n\n\n\n

Browser extensions are really powerful, but need to request permissions to unlock that power. Most of them you’ll find on your way but the most common are <all_urls> for injecting scripts/styles into every page. another common one would be tabs to be able to get information on all tabs.

\n\n\n\n

Try to keep permissions to the minimum possible and not request stuff you don’t need. Permissions are listed when installing the extensions all at once, unlike on a phone where there is a prompt.

\n\n\n\n

For ora I needed <all_urls> to inject scripts to block a website when the time limit was reached, tabs to count the time spent on websites and unlimitedStorage & storage for saving all that data.

\n\n\n\n

{\n  \"manifest_version\": 2,\n  ...\n  \"permissions\": [\"<all_urls>\", \"tabs\", \"unlimitedStorage\", \"storage\"]\n}

\n\n\n\n

Toolchain

\n\n\n\n

We all hate it, bundlers, framework setup, etc. I will try to give you the most basic, painless setup. And by far that is a setup using parcel.js.

\n\n\n\n

They have official support for browser extensions! And it works really well.
I would write some little guide, but TBH it would just duplicate their docs so I will just point you to the official documentation which explains the steps perfectly.

\n\n\n\n

The cool thing about parcel is that we use the manifest.json as entry point and just point to the sources we want to use inside of that. Parcel does the rest of the magic.

\n\n\n\n

{\n  \"manifest_version\": 2,\n  ...\n  \"background\": {\n    \"scripts\": [\"./src/background/index.ts\"]\n  },\n  \"content_scripts\": [\n    {\n      \"matches\": [\"<all_urls>\"],\n      \"run_at\": \"document_start\",\n      \"js\": [\"./src/content/index.ts\"]\n    }\n  ]\n}

\n\n\n\n

As you can see above we just use ts typescript files in our manifest and parcel will compile them for us. And those typescript files can include React, Svelte, whatever framework and it will just work. Amazing 😍

\n\n\n\n

For svelte you’ll need to add the typescript transformer. React works out of the box.

\n\n\n\n

Cross browser support without tears

\n\n\n\n

For this we need to thank the good folks over at Mozilla. They created webextension-polyfill.

\n\n\n\n

import browser from 'webextension-polyfill'\n\nconst tabs = await browser.tabs.query({ active: true })

\n\n\n\n

Just like that you will have code that will work in both Chrome and Firefox 99% of the time. This can be used in background scripts, client scripts and standalone pages.

\n\n\n\n

Building

\n\n\n\n

{\n  ...\n  \"scripts\": {\n    \"dev\": \"parcel watch --target dev --no-hmr ./manifest.json\",\n    \"build\": \"parcel build --target prod ./manifest.json\",\n    \"dist\": \"run-s clean build pack:*\",\n    \"pack:zip\": \"zip -r ./ora.zip dist/prod/*\",\n    \"pack:ff\": \"web-ext build -s dist/prod --overwrite-dest\"\n  },\n  \"targets\": {\n    \"dev\": {\n      \"sourceMap\": {\n        \"inline\": true,\n        \"inlineSources\": true\n      }\n    },\n    \"prod\": {}\n  },\n}

\n\n\n\n

This is the package.json of Ora. How is the extension built?

\n\n\n\n

Parcel bundler builds the raw web files, copies images, etc to the ./dist/prod folder.
For Chrome we only need to zip it with zip -r ./ora.zip dist/prod/*.
For Firefox we use the mozilla own web-ext tool with web-ext build -s dist/prod --overwrite-dest.
This results into a web-ext-artifacts/ota-0.8.1.zip file.

\n\n\n\n

Distributing

\n\n\n\n

Now you can upload the normal zip file to the chrome web store after paying a one time 5$ fee and the web ext artefact to the mozilla add-on page.

\n\n\n\n

Mozilla also requires for minified apps (which this one is) to also submit sources. Just zip the source code (without node_modules) and upload them along the minified one.

\n\n\n\n

Common use cases

\n\n\n\n

I also want to add a few notes on common use cases that every extensions uses.

\n\n\n\n

Communication between content, background and other scripts.

\n\n\n\n

The postMessage API is the way to go. It’s basically like IPC in the sense that you can send any serializable content from and to any of your scripts while listening for an answer.

\n\n\n\n

Storage / Persistence

\n\n\n\n

Here you have a lot of options. The easiest way that works for most cases is using the storage API. Here you get access to local and sync storage interfaces. local is.. well local and sync is synced between browsers if the user is logged in. Choose whatever suits you best.

\n\n\n\n

Another options, which is more powerful for more complex and data hungry is using something like Dexie.js on top of IndexedDB. This is a full NoSQL kind of local database. A good options for data intensive extensions.

\n\n\n\n

Shortcuts

\n\n\n\n

You can easily add keyboard shortcuts to your browser extension with the commands entry in the manifest.json. This has the added benefit that browsers provide an interface where users can customize them.

\n\n\n\n

A little exception for opening the popup with a keyboard shortcut can be achieved with the _execute_browser_action command.

\n\n\n\n

Final thoughts

\n\n\n\n

A browser extension is very fun project for a free Sunday and I’d recommend everyone to try it out, it’s easier than you might think!

\n","status":"publish","date":"2021-12-28T22:56:16","modified":"2021-12-28T23:00:53","tags":{"nodes":[{"id":"dGVybTo3Ng==","slug":"web-extension","name":"web-extension","count":1}]},"post":{"featured":{"srcSet":"https://api.nicco.io/wp-content/uploads/2020/11/markus-spiske-8CWoXxaqGrs-unsplash-300x200.jpg 300w, https://api.nicco.io/wp-content/uploads/2020/11/markus-spiske-8CWoXxaqGrs-unsplash-1024x683.jpg 1024w, https://api.nicco.io/wp-content/uploads/2020/11/markus-spiske-8CWoXxaqGrs-unsplash-150x100.jpg 150w, https://api.nicco.io/wp-content/uploads/2020/11/markus-spiske-8CWoXxaqGrs-unsplash-768x512.jpg 768w, https://api.nicco.io/wp-content/uploads/2020/11/markus-spiske-8CWoXxaqGrs-unsplash-1536x1024.jpg 1536w, https://api.nicco.io/wp-content/uploads/2020/11/markus-spiske-8CWoXxaqGrs-unsplash-2048x1365.jpg 2048w, https://api.nicco.io/wp-content/uploads/2020/11/markus-spiske-8CWoXxaqGrs-unsplash-500x333.jpg 500w, https://api.nicco.io/wp-content/uploads/2020/11/markus-spiske-8CWoXxaqGrs-unsplash-800x533.jpg 800w, https://api.nicco.io/wp-content/uploads/2020/11/markus-spiske-8CWoXxaqGrs-unsplash-1200x800.jpg 1200w, https://api.nicco.io/wp-content/uploads/2020/11/markus-spiske-8CWoXxaqGrs-unsplash-1500x1000.jpg 1500w, https://api.nicco.io/wp-content/uploads/2020/11/markus-spiske-8CWoXxaqGrs-unsplash-2000x1333.jpg 2000w","altText":"","sourceUrl":"https://api.nicco.io/wp-content/uploads/2020/11/markus-spiske-8CWoXxaqGrs-unsplash-scaled.jpg"}}}]