Extension development tools

caitlin · April 11, 2018, 11:11pm

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

The source code is viewable at https://github.com/web-ext-labs/create-web-ext.

webextensions.tech

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

The source code is available at https://github.com/web-ext-labs/ui-tool

tern-def-webextensions

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

freaktechnik · April 16, 2018, 9:44pm

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.

caitlin · April 16, 2018, 7:10pm

sangaline · April 16, 2018, 7:58pm

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 · February 26, 2021, 7:32pm

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 · June 23, 2021, 9:41pm

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.