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.

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]:ryandav/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

Files to edit to create your extension

The extension project structure looks like this:

extension
├── css
│   ├── style.css
│   └── themes
│       ├── bootstrap
│       │   └── bootstrap.css
│       └── flatly
│           └── bootstrap.css
├── js
│   ├── lib
│   │   ├── bootstrap.bundle.js
│   │   ├── clipboard-polyfill.js
│   │   └── jquery.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

Resources, guides and tutorials

The following pages were helpful when creating a web extension.

• What are extensions? - Google Chrome
• Anatomy of an extension - Mozilla | MDN
• Using media queries - CSS: Cascading Style Sheets | MDN
• manifest.json - Mozilla | MDN
• Manifest File Format - Google Chrome
• Your first extension - Mozilla | MDN
• Browser Extensions - Mozilla | MDN
• How to link to a specific paragraph in your Medium article (2018 Table of Contents method) The post that I read by Quincy Larson on Medium that led me to try out the below Anchor Links Chrome Extension
• castroalves/anchor-links: Anchor Links is a free Chrome Extension to add anchor links to Medium and WordPress posts. This inspired me to write this Chrome extension as it is used for making it easier to add links to specific sections of your blog post on Medium