A browser extension starter for Chrome and Firefox
Branch: master
Clone or download
Latest commit 3ef22bc Dec 17, 2018
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
extension add author to manifest for edge Dec 17, 2018
images
.gitignore Clean commits Jun 23, 2018
MIT-LICENSE Clean commits Jun 23, 2018
README.md Update Readme Dec 17, 2018
_config.yml Create _config.yml Jul 9, 2018

README.md

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.

JavaScript image

Save locally on your computer and run extension

  • Open your terminal
  • cd to a directory where you want to save this
  • run: git clone git@github.com: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

Libraries used

Mozilla and Chrome guides

The following pages were helpful when creating a web extension.

Credits

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