Skip to content
Barebones boilerplate with webpack, options handler and auto-publishing
JavaScript HTML CSS
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github
media Add in finished example Jun 23, 2019
source Improve Firefox Addon id (#4) Jul 26, 2019
.editorconfig Initial commit Jun 19, 2019
.gitattributes
.gitignore
.travis.yml
package.json Fix deployment script Aug 3, 2019
readme.md
webpack.config.js Initial commit Jun 19, 2019

readme.md

browser-extension-template

Barebones boilerplate with webpack, options handler and auto-publishing.

Sample extension output

Features

This extension template is heavily inspired by refined-github, notifier-for-github, and hide-files-on-github browser extensions. You can always refer to these browser extensions' source code if you find anything confusing on how to create a new extension.

How to use this template

Click Use this template and make a copy of your own. 😉

Configuration

The extension doesn't target any specific ECMAScript environment or provide any transpiling by default. The extensions output will be the same ECMAScript you write. This allows us to always target the latest browser version, which is a good practice you should be following.

Webpack

Transpiling using Babel

The template bakes in a pretty basic webpack config, with no transpiling. To setup transpiling using Babel follow the following configuration steps.

  1. Install Babel packages and respective loader for webpack.

    npm i --save-dev @babel/core @babel/preset-env babel-loader
  2. In webpack.config.js, add the following rule to process JS files.

    module: {
    	rules: [
    		{
    			test: /\.js$/,
    			exclude: /node_modules/,
    			loader: 'babel-loader'
    		}
    	]
    }
  3. Target respective browsers using .babelrc.

    {
    	"presets": [
    		["@babel/preset-env", {
    			"targets": {
    				"chrome": "74",
    				"firefox": "67"
    			}
    		}]
    	]
    }

Extracting CSS

If you will be writing any code that will be importing CSS files from JS files, then you will be needing mini-css-extract-plugin to extract this imported CSS into its own file.

  1. Install the webpack plugin.

    npm i --save-dev mini-css-extract-plugin
  2. Modify the webpack config as mentioned to let this plugin handle CSS imports.

    // Import plugin
    const MiniCssExtractPlugin = require('mini-css-extract-plugin');
    
    // Under `module.rules`
    {
    	test: /\.css$/,
    	use: [
    		MiniCssExtractPlugin.loader,
    		'css-loader'
    	]
    }
    
    // Under `plugins`
    new MiniCssExtractPlugin({
    	filename: 'content.css'
    })

TypeScript

TypeScript and Babel configs conflict each other, so you can only use one of these configuration types at any point.

  1. Install TypeScript and respective loader for webpack

    npm i --save-dev typescript ts-loader @types/firefox-webext-browser
  2. Use the following webpack rule in the config file.

    {
    	test: /\.(js|ts|tsx)$/,
    	loader: 'ts-loader',
    	exclude: /node_modules/
    },
  3. Use the following as tsconfig.json, uses sindresorhus/tsconfig (install it as dependecy before using).

    {
    	"extends": "@sindresorhus/tsconfig",
    	"compilerOptions": {
    		"target": "esnext",
    		"declaration": false
    	},
    	"include": [
    		"source"
    	]
    }

TypeScript requires additional configuration depending on how you set it up, like linting.

Auto-syncing options

Options are managed by fregante/webext-options-sync, which auto-saves and auto-restores the options form, applies defaults and runs migrations.

Publishing

It's possible to publish to both the Chrome Web Store and Mozilla Addons at once by creating these ENV variables:

  1. CLIENT_ID, CLIENT_SECRET, and REFRESH_TOKEN from Google APIs.
  2. WEB_EXT_API_KEY, and WEB_EXT_API_SECRET from AMO.

And then running:

npm run release

This will:

  1. Build the extension
  2. Create a version number based on the current UTC time, like 19.6.16.428 and sets it in the manifest.json
  3. Deploy it to both stores

Auto-publishing

Thanks to the included Travis file, if you set up those ENVs on Travis, the deployment will automatically happen:

  • when clicking "Trigger build"
  • every day, if you configure the Cron Job (but only if there are any new commits in the last day)

Auto-publishing on tags

If you prefer picking your versions and publishing on demand, replace the deployment in Travis file with:

  - provider: script
    skip_cleanup: true
    script: npm run release
    on:
      tags: true

And then replace the prerelease:version script in package.json with:

"prerelease:version": "dot-json distribution/manifest.json version $TRAVIS_TAG",

And your extension will be published when creating a git tag, using the tag itself as version for the extension.

License

This browser extension template is released under MIT and mentioned below. There is no license file included in here, but when you clone this template, you should include your own license file for the specific license you choose to use.

Credits

Extension icon made by Freepik from www.flaticon.com is licensed by CC 3.0 BY.

Extensions created using this template

License

CC0

You can’t perform that action at this time.