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.
Read my post on Medium that explains more about how to create a browser 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
- Visit
chrome://extensions/in your Chrome browser - Click
Load Unpacked - Select the folder you saved this in
- 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.
The extension project structure looks like this:
extension
├── css
│ └── style.css
├── js
│ └── popup.js
├── manifest.json
└── popup.html
popup.htmlis the popup that appears when you click the extension icon in the browser's toolbarjspopup.jsis 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.cssis the css file for your popup pagemanifest.jsonupdate 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/themesfolder and then link to that inpopup.html
- 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
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
- dmoneyballer Special thanks for helping to support compatibility with the Edge browser