Extension development tools

[caitlin (Caitlin Neiman)]

Hi all,

I’m excited to share some tools that community members have recently created to help with extension development. If you’ve built something that could be helpful to others, please let us know by replying to this post!

create web-ext

create-web-ext

The source code is viewable at GitHub - web-ext-labs/create-web-ext: Tool to create a directory structure for getting started with an addon.

webextensions.tech

A web interface for creating a directory structure for creating an extension.

The source code is available at GitHub - web-ext-labs/ui-tool: UI for create-web-ext

tern-def-webextensions

tern-def-webextensions

This is a tool that can help tern-enabled editors understand and autocomplete WebExtensions code.

[freaktechnik (Martin Giger)]

I still use https://www.npmjs.com/package/create-webextension from rpl to generate new extension projects.

I use various things mentioned on https://github.com/bfred-it/Awesome-WebExtensions

https://github.com/webexts has various interesting tools for testing WebExtensions.

[sangaline (Evan)]

We recently released an open source browser automation framework called Remote Browser that’s built on the Web Extensions API. It’s a bit less directly applicable to extension development than some of the other tools mentioned here, but we thought that it might be of interest to people doing extension development. Remote Browsers automation client allows you to remotely interact with the full Web Extensions API, and it allows you to script and automate browsers using external code.

The project itself is on GitHub (https://github.com/intoli/remote-browser), and there’s also an interactive tour where you can try it out in your browser (https://intoli.com/tour)!

[caitlin (Caitlin Neiman)]

Github developer fregante has some tools that folks maybe find useful:

• webext-patterns: Tool to convert the patterns and globs of your WebExtension manifest to regex
• webext-options-sync - Helps you manage and autosave your extension’s options. Chrome and Firefox.
• webext-storage-cache - Map-like promised cache storage with expiration. Chrome and Firefox
• webext-detect-page - Detects where the current browser extension code is being run. Chrome and Firefox.
• webext-content-script-ping - One-file interface to detect whether your content script have loaded.
• web-ext-submit - Wrapper around Mozilla’s web-ext to submit extensions to AMO.
• Awesome-WebExtensions - A curated list of awesome resources for WebExtensions development.

[tim-we (Tim Weißenfels)]

I’ll just mention my own tool web-ext-inspector that allows you to quickly inspect the source code of other extensions. I think this can help new developers getting an idea how certain problems can be solved by example of other successful extensions.