How to — Browser Extension
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.

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
│ └── stylesHere is the gulp file to create the browser extension, ready to be packed inside the zip archive or deflated for development purpose.

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.

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

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