How to — Browser Extension

Vladimir Pasquier
Aug 9, 2017 · 3 min read

In this article we are going to see:

  • How works browser extensions and their implementation
  • How to bootstrap quickly your extension
  • How to publish it

The example

Some people have multiple Gmail accounts for private or professional purpose.

There are plenty of Gmail browser extensions on the different stores and providing features such as:

  • Connecting via OAuth 2 for account detection
  • Notifications for new incoming emails
  • Reading/writing your emails within a popup
  • etc…

IMO, all overkill. Going to the webclient is definitely better. But one thing was just annoying: the multiple account management.

Would be better to have this view in a popup extension

It would be better to have it as an extension.

The big picture

Structure

The browser extension is a zip containing sources and manifest:

  • The manifest contains the plugin identity, options and permissions to request
  • The html/javascript sources

Here is a simple structure and manifest:

── chrome
│ ├── images
│ ├── libs
│ ├── manifest.json
│ ├── popup.html
│ ├── scripts
│ └── styles

Here is the gulp file to create the browser extension, ready to be packed inside the zip archive or deflated for development purpose.

Click on Developer Mode

Flow

The browser extension script execution flow is the following :

A) The background script is started once the extension is installed

This bg script can be an OAuth authorization for connecting the app to Google accounts for instance and collecting the information. It contains as well the notifications trigger, tabs management and all other ‘basic’ handlers.

B) The plugin script is started once the extension is called from actions to display information (for instance as a popup)

This script is handling all the navigation and actions inside the popup. It’s the operation center script that can trigger as well external scripts to interact with the browser tabs page content:

C) The external scripts interacting with the browser tabs page content

Those scripts can be executed to parse a page, collecting information or identifying urls. The last expression evaluation in the script is the result of this call.

The debug

Script A: Click on background page to get the related debug view for the background script.

Click on background page

Script B: accessible via the inspection inside the plugin, this window will let you debug the plugin scripts.

Click right for inspection

Script C: the main browser global debug pane will let you debug the external scripts.

The result

Here is the repo to checkout to begin your first extension: https://github.com/vpasquier/v-gmail-switch

Here is the example extension: https://chrome.google.com/webstore/detail/gmail-switch/mhehbcmdngeklochfbpihjgmgepkddie

  • The Google API library couldn’t be used as it is not working a lot inside Chrome extensions (https://github.com/google/google-api-javascript-client/issues/64)
  • There is no OAuth authentication and the extension is providing only the links to the multiple accounts (no need to have different permissions to retrieve them)
  • If you’re using frameworks, don’t forget to “vulcanize” and “crisper” your sources (security requirement for all browser extensions)
  • Simple, ugly and useful, I’m using it all the time :D
Vladimir Pasquier

Written by

@nuxeo Software Engineer | Currently Based in New York, USA | Speaking English, Spanish and French

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade