To provide the FocusFinder User Style to Firefox users that do not have the Stylish or Stylus browser extension, I want to create a simple Firefox extension that just applies these CSS rules. How easy is this with the new WebExtensions API model? Well…

Very easy!

1. Create your CSS and provide it as User Style.
2. Create the extension skeleton using the First Example from the Add-ons topic on MDN docs as Template.
3. Replace the javascript file from the example with the file obtained via “Install style as userscript” on the user style website.
4. Try the extension out locally using the Firefox debugging mode.
5. Package it as a simple ZIP file.
6. Publish to addons.mozilla.org (AMO), by submitting it through the submission form.
7. Enjoy!

Here is the Focus Finder Firefox Extension on the official Firefox Add-ons Page!

Resources

• Firefox Browser Extension overview
• For publishing your add-on, see Signing and distributing your add-on.
• This extension quite exactly fits the outline of the First WebExtension Example.