extension-boilerplate

⚡️ A template for building cross browser extensions for Chrome, Opera & Firefox.

3,281

371

3,281

View on GitHub

Top Related Projects

webextension-polyfill

2,653

A lightweight polyfill library for Promise-based WebExtension APIs in Chrome

webextensions-examples

4,067

Example Firefox add-ons created using the WebExtensions API

web-extension-starter

2,000

🖥🔋Web Extension starter to build "Write Once Run on Any Browser" extension

refined-github

24,191

:octocat: Browser extension that simplifies the GitHub interface and adds useful features

Quick Overview

The EmailThis/extension-boilerplate is a repository that provides a starting point for building browser extensions. It includes a basic structure and configuration for creating extensions for popular web browsers such as Chrome, Firefox, and Edge.

Pros

Cross-Browser Compatibility: The boilerplate supports the development of extensions for multiple browsers, including Chrome, Firefox, and Edge, making it easier to create a single codebase that can be deployed across different platforms.
Modular Structure: The project follows a modular structure, allowing developers to easily add or modify functionality as needed, making the extension more scalable and maintainable.
Automated Build Process: The boilerplate includes a build process that automates the packaging and deployment of the extension, streamlining the development workflow.
Extensive Documentation: The repository provides detailed documentation, including instructions for setting up the development environment, building the extension, and publishing it to the respective browser's extension store.

Cons

Limited Functionality: The boilerplate provides a basic structure and configuration, but it does not include any specific functionality out of the box. Developers will need to build the desired features from scratch.
Dependency on External Libraries: The boilerplate relies on several external libraries and tools, which may require additional setup and configuration, potentially increasing the complexity for some developers.
Potential Maintenance Overhead: As the boilerplate is a community-driven project, there may be a need for ongoing maintenance and updates to keep up with changes in the underlying browser APIs and development tools.
Learning Curve: Developers who are new to browser extension development may need to invest time in understanding the boilerplate's structure and configuration, as well as the various browser-specific APIs and requirements.

Getting Started

To get started with the EmailThis/extension-boilerplate, follow these steps:

Clone the repository:

git clone https://github.com/EmailThis/extension-boilerplate.git

Install the dependencies:

cd extension-boilerplate
npm install

Build the extension:

npm run build

Load the extension in your browser:
- For Chrome, go to chrome://extensions/, enable "Developer mode", and click "Load unpacked" to select the dist folder.
- For Firefox, go to about:debugging#/runtime/this-firefox, click "Load Temporary Add-on", and select the manifest.json file in the dist folder.
- For Edge, go to edge://extensions/, enable "Developer mode", and click "Load unpacked" to select the dist folder.
Customize the extension by modifying the files in the src folder and rebuilding the project.
Publish the extension to the respective browser's extension store when ready.

Competitor Comparisons

webextension-polyfill

2,653

A lightweight polyfill library for Promise-based WebExtension APIs in Chrome

Pros of webextension-polyfill

Provides a standardized Promise-based API for cross-browser extension development
Maintained by Mozilla, ensuring compatibility with Firefox and other browsers
Actively developed with regular updates and community support

Cons of webextension-polyfill

Focused solely on API compatibility, lacking additional development tools
May introduce a small performance overhead due to Promise wrapping
Requires additional setup and integration into existing projects

Code Comparison

extension-boilerplate:

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
  chrome.tabs.sendMessage(tabs[0].id, {action: "open_dialog_box"}, function(response) {
    console.log(response);
  });
});

webextension-polyfill:

browser.tabs.query({active: true, currentWindow: true}).then((tabs) => {
  return browser.tabs.sendMessage(tabs[0].id, {action: "open_dialog_box"});
}).then((response) => {
  console.log(response);
});

The webextension-polyfill example uses Promises, making the code more readable and easier to work with asynchronous operations. However, extension-boilerplate provides a more comprehensive toolkit for extension development, including build tools and project structure, which may be beneficial for developers looking for a complete setup.

webextensions-examples

4,067

Example Firefox add-ons created using the WebExtensions API

Pros of webextensions-examples

Comprehensive collection of examples covering various WebExtension APIs
Maintained by Mozilla Developer Network (MDN), ensuring up-to-date and reliable code
Includes examples for both Firefox and Chrome, promoting cross-browser compatibility

Cons of webextensions-examples

Focuses on individual API examples rather than providing a complete boilerplate structure
May require more setup and configuration for a full-fledged extension project
Less opinionated about project structure and build processes

Code Comparison

webextensions-examples (from borderify example):

document.body.style.border = "5px solid red";

extension-boilerplate (from popup.js):

import ext from "./utils/ext";
import storage from "./utils/storage";

ext.tabs.query({ active: true, currentWindow: true }, function (tabs) {
  var activeTab = tabs[0];
  chrome.tabs.sendMessage(activeTab.id, { action: 'process-page' }, renderBookmark);
});

The webextensions-examples code demonstrates a simple content script, while extension-boilerplate shows a more structured approach with modular imports and message passing between extension components.

web-extension-starter

2,000

🖥🔋Web Extension starter to build "Write Once Run on Any Browser" extension

Pros of web-extension-starter

Uses modern JavaScript features and TypeScript, providing better type safety and developer experience
Includes support for React out of the box, allowing for more complex UI development
Offers a more comprehensive build and development setup with webpack and hot reloading

Cons of web-extension-starter

More complex setup and configuration, which may be overwhelming for beginners
Heavier dependency footprint due to inclusion of React and TypeScript
Potentially slower build times compared to the simpler extension-boilerplate

Code Comparison

extension-boilerplate (manifest.json):

{
  "manifest_version": 2,
  "name": "Extension Boilerplate",
  "version": "0.0.1",
  "default_locale": "en"
}

web-extension-starter (manifest.json):

{
  "manifest_version": 2,
  "name": "__MSG_extensionName__",
  "version": "0.0.0",
  "default_locale": "en",
  "description": "__MSG_extensionDescription__"
}

The web-extension-starter uses message placeholders for internationalization, while extension-boilerplate has a simpler structure. web-extension-starter also includes a description field, which is absent in the extension-boilerplate example.

generator-chrome-extension

2,615

Scaffold out a Chrome extension

Pros of generator-chrome-extension

Utilizes Yeoman, a robust scaffolding tool for web applications
Offers more customization options during project setup
Includes built-in support for popular tools like Babel and Webpack

Cons of generator-chrome-extension

Steeper learning curve for developers unfamiliar with Yeoman
May generate more complex project structure than necessary for simple extensions
Less frequently updated compared to extension-boilerplate

Code Comparison

extension-boilerplate:

import ext from "./utils/ext";
import storage from "./utils/storage";

ext.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if(request.action === "perform-save") {
      console.log("Extension Type: ", "/* @echo extension */");
      console.log("PERFORM AJAX", request.data);

generator-chrome-extension:

chrome.runtime.onInstalled.addListener(function (details) {
  console.log('previousVersion', details.previousVersion);
});

chrome.tabs.onUpdated.addListener(function (tabId) {
  chrome.tabs.get(tabId, function (tab) {
    if (tab.url.indexOf('chrome://') === 0) {
      return;
    }

Both repositories provide boilerplate code for Chrome extensions, but they differ in their approach and complexity. extension-boilerplate offers a simpler, more straightforward structure, while generator-chrome-extension provides a more customizable and feature-rich starting point. The choice between them depends on the developer's familiarity with Yeoman and the complexity of the intended extension.

refined-github

24,191

:octocat: Browser extension that simplifies the GitHub interface and adds useful features

Pros of refined-github

More comprehensive and feature-rich, offering numerous enhancements to the GitHub interface
Actively maintained with frequent updates and a large community of contributors
Extensive documentation and well-organized codebase

Cons of refined-github

Larger codebase and more complex structure, potentially harder to understand for beginners
Specific to GitHub, limiting its applicability to other platforms or use cases
May require more frequent updates to keep up with GitHub's interface changes

Code Comparison

refined-github:

import * as pageDetect from 'github-url-detection';

function init(signal) {
	// ...
	await import('./features/useful-not-found-page.js');
	await import('./features/useful-forks.js');
	// ...
}

extension-boilerplate:

import ext from "./utils/ext";
import storage from "./utils/storage";

ext.runtime.onMessage.addListener(
  function(request, sender, sendResponse) {
    if(request.action === "perform-save") {
      // ...
    }
  }
);

The code snippets show different approaches to structuring browser extensions. refined-github uses dynamic imports for modular feature loading, while extension-boilerplate demonstrates a more traditional message-based architecture.

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot

README

Extension Boilerplate

A foundation for creating browser extensions for Chrome, Opera & Firefox.

Now that Firefox supports WebExtensions, it has become a lot easier to build browser extensions/addons for multiple browsers without duplicating the codebase. This project serves as a sensible starting point to help you get started.

I have extracted this from the browser extensions that I built for my side-project, Email This.

Side note: Do check out Email This. It is a simpler alternative to bookmarking tools like Pocket, Readability & Instapaper. Email This will remove ads & distractions from an article and send you a nice email with just the text/images. No need to install any additional applications or login to another app just to access your bookmarks. The Chrome Extensions is available on the Chrome Web Store.

Features

Write once and deploy to Chrome, Opera & Firefox: Based on WebExtensions. It also includes a tiny polyfill to bring uniformity to the APIs exposed by different browsers.

Live-reload: Your changes to CSS, HTML & JS files will be relayed instantly without having to manually reload the extension. This ends up saving a lot of time and improving the developer experience.

Sensible starting point: This comes with a gulp based workflow that converts modern ES6 JavaScript and SCSS to JS/CSS. Scripts are transpiled using Babel and bundled using Browserify. Sourcemaps are available for both JS and SCSS.

Sketch (.sketch) assets for icons and promo images: A .sketch file is included in the resources directory. This has all the icons and promo images that will be needed while uploading the extensions to the app stores.

Easily configurable and extendable: The gulpfile is easily understandable and configurable. If you want to add additional tasks or remove un-used ones, you can easily tweak that file to suit your needs.

Platform specific & Environment specific variables.

You might need to specify different data variables based on your environment. For example, you might want to use a localhost API endpoint during development and a production API endpoint once the extension is submitted to the appstore. You can specify such data in the json files inside `config` directory.

You can also set custom data variables based on the platform (different variable for Chrome, FF, Opera).

Installation

Clone the repository git clone https://github.com/EmailThis/extension-boilerplate.git
Run npm install
Run npm run build

Alternately, if you want to try out the sample extension, here are the download links. After you download it, unzip the file and load it in your browser using the steps mentioned below.

Load the extension in Chrome & Opera

Open Chrome/Opera browser and navigate to chrome://extensions
Select "Developer Mode" and then click "Load unpacked extension..."
From the file browser, choose to extension-boilerplate/build/chrome or (extension-boilerplate/build/opera)

Load the extension in Firefox

Open Firefox browser and navigate to about:debugging
Click "Load Temporary Add-on" and from the file browser, choose extension-boilerplate/build/firefox

Developing

The following tasks can be used when you want to start developing the extension and want to enable live reload -

npm run chrome-watch
npm run opera-watch
npm run firefox-watch

Packaging

Run npm run dist to create a zipped, production-ready extension for each browser. You can then upload that to the appstore.

TODO

Add support for Safari
Add Firefox & Opera Promo images
Add sample screenshot templates
Write a guide for using config variables & JS preprocessor

This project is licensed under the MIT license.

If you have any questions or comments, please create a new issue. I'd be happy to hear your thoughts.

Bharani, Email This

Top Related Projects

Convert designs to code with AI

Introducing Visual Copilot: A new AI model to turn Figma designs to high quality code using your components.

Try Visual Copilot