Template Browser Extension

A template browser extension. This designed to be a quick way to setup a browser extension, which can be used by loading locally or publishing the the Chrome Web Store or Firefox Add-ons store.

Tutorial

Read my post on Medium that explains more about how to create a browser extension.

• How to make a cross-browser extension using JavaScript and browser APIs

Save locally on your computer and run extension

• Open your terminal
• cd to a directory where you want to save this
• run: git clone [email protected]:ryanwhocodes/template-browser-extension.git
• Then open the browser you wish to use it in and follow the below instructions

Chrome

• Visit chrome://extensions/ in your Chrome browser
• Click Load Unpacked
• Select the folder you saved this in

Firefox

• Visit about:debugging
• Click on Load Temporary Add-on
• Select the folder you saved this in

The extension can then be viewed by clicking the icon in the address bar.

Files to edit to create your extension

The extension project structure looks like this:

extension
├── css
│   └── style.css
├── js
│   └── popup.js
├── manifest.json
└── popup.html

• popup.html is the popup that appears when you click the extension icon in the browser's toolbar
• jspopup.js is the JavaScript file that will run when the extension icon is clicked. This already has some functions to copy to the clipboard, to interact with the browser's tabs (depending on whether the browser is Chrome or not), and add event listeners.
• css/style.css is the css file for your popup page
• manifest.json update this with the configuration for your extension. If you want to add icons then you need to add them in an icons folder and then specify them here.
• Add any other theme you want for Bootstrap easily by adding it to the css/themes folder and then link to that in popup.html

Publishing your extension

• Publish in the Chrome Web Store - Google Chrome
• Developer Hub :: Add-ons for Firefox

Libraries used

• lgarron/clipboard-polyfill: Sane copying on the web.
• Bootstrap · The most popular HTML, CSS, and JS library in the world.
• jQuery
• Bootswatch.com theme Flatly

Mozilla and Chrome guides

The following pages were helpful when creating a web extension.

• What are extensions? - Google Chrome
• Anatomy of an extension - Mozilla MDN
• Your first extension - Mozilla MDN

Credits

• dmoneyballer Special thanks for helping to support compatibility with the Edge browser