How to build a browser extension if you are a frontend developer from 2021?

Our main project — Wordzzz

Introduction

In this article, I will talk about my pet project Wordzzz, but I created an open-source extension starter kit Hello, Word, where I used the same technologies that I will talk about in this article. I want to share it with the community. Feel free to use it or contribute https://github.com/elcodabra/hello-word-sample

What will be considered?

  • Extension Development Overview
  • Developing a cross-browser extension (chrome/chromium, ff, safari)
  • Code modularity, component reusing, and a modern frontend to help you develop extensions (react, typescript, lernajs)
  • Development tools and bundlers (webpack, web-ext)

What the extension will do? / Requirements

Figure 1: Functionality — What the extension will do?
  • the word can also be translated using the context menu by right-clicking on the selected word (1b)
  • from the translation window, you can add a word to the internal dictionary for history and further repetition (postMessage — for transferring between different parts of the extension, storage — for storing words)
  • a word (notification) counter in the background script (2)
  • the list of the internal dictionary can be seen in the extension menu (the same postMessage + storage) (3)
  • training words in a separate window (a separate page inside the extension — learn script) (4)

Anatomy of web-extensions

Picture 2: Image from Mozilla https://developer.mozilla.org/ru/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension

manifest.json

This is a required file of an extension. Consists of metadata and permissions.

Figure 3: Extension structure — Wordzzz

Project architecture:

You can develop simple extensions as in the instructions from Chrome Developers Site, but I’m interested in expanding this instruction for more complex projects where you need to add common components, bundlers, cross-browser compatibility, react, typescript, etc., without which it is difficult to imagine a modern frontend project.

Figure 4: Project architecture — Wordzzz
  • Extension — extension package
  • Web — a landing page for the project
  • Your choice may be different (even another extension, why not?) — in the current project, this is also a react-native project, an additional server, and various interesting ideas and experiments.

Project structure

LernaJS helps to manage connections between packages (read more about configuration and use here). As I wrote above, in common — common styles and components, common static files (font and icons) in the public folder at the root. Web and extension share common components.

Figure 5: Project structure

Cross-browser

1) Separate manifests for different environments and browsers

It is assembled by a webpack using a small written module for different environments and browsers. In FF, for example, we need to extend our original manifest.json by adding browser_specific_settings.gecko.id

2) Safari: converting code to xcode project

I use Apple’s converter (link):

xcrun safari-web-extension-converter ./packages/extension/dist --project-location ./packages/extension/safari --app-name HelloWord --swift --bundle-identifier app.wordzzz.HelloWord

3) Checking in CSS and a little bit about the path:

Different relative path to files in chromium browsers and FF, so I used css selectors:

/* firefox */
@-moz-document url-prefix() {
.hw-icon__logo-content {
background: url("../images/logo.svg") no-repeat;
}
}
/* not firefox */
@supports not (-moz-appearance:none) {
.hw-icon__logo-content {
background: url("chrome-extension://__MSG_@@extension_id__/images/logo.svg") no-repeat;
}
}

4) Checking in JS

Nothing new here: checking navigator.userAgent.
For example, when publishing in the Apple Store, I was asked to remove the donate button.

5) Recommendations for the (non-) use of certain functions

There are recommendations not to use some functions in some browsers

Links

Разработка под Chrome — https://developer.chrome.com/docs/extensions/mv3/overview/

About Wordzzz

Wordzzz extension analyzes subtitles in your YouTube & Netflix player (subtitles must be enabled) and when you hover over a word, the video stops and you can click on a word to see the translation card. Also, you can translate text while browsing.

Final

As you can see, the development of extensions can also be with a modern stack, there is still a lot that can be done in the current project, for example, cover with types and tests, use preprocessors, and much more. Suggest in the comments useful ideas for improving the project and your solutions and useful tools for developing extensions and implement your ideas. Peace for everyone.

Fullstack Developer & JS Trainer

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store