Keep multiple stylesheets ready to inject and change on the fly. Works with LiveReload. Compatible with Chrome and Firefox.
- Clone or download the repository zip file (extract it to a folder)
- Open Chrome extensions page
- Enable Developer Mode
- Click on Load Unpacked Extension
- Select the
distfolder inside the extension folder
The extension icon should be now visible in Chrome menu.
- First, add a stylesheet URL to the list by using the Options page, acessible via the Popup page.
- On the web page where you want to inject the stylesheet, click on the extension icon to open the popup, click on one or more stylesheets from the list to inject them on your web page.
- If there's more than one stylesheet selected, they will be injected in the order of your selection.
The extension is composed of multiple parts, you can think of them as being endpoints that can communicate with each other, these endpoints are:
- Content Script
- Popup Page
- Options Page
- Background Worker
Content Script
The JavaScript file that gets injected into the web page and the final responsible for managing the HTML necessary to inject or remove the injected stylesheet from the web page.
Popup Page
The web page that shows up when you click on the extension icon on the browser. The popup page is responsible for listing the available stylesheets and also responsible for managing the injected stylesheets per tab. Each tab can have multiple stylesheets injected at once.
Options Page
The web page responsible for managing the available stylesheets, where you can add, edit or remove stylesheets.
Background Worker
A web worker responsible for managing the communication between all the other endpoints. It also acts as a kind of session storage to keep track of all injected stylesheets in all browser tabs.