# Extension development tools

**URL:** <https://discourse.mozilla.org/t/extension-development-tools/27608>\
**Category:** Development\
**Tags:** developer-tools\
**Created:** [April 11, 2018, 11:11pm UTC](https://discourse.mozilla.org/t/extension-development-tools/27608 "2018-04-11T23:11:20Z")\
**Posts on this page:** 6\
**Page:** 1

<div class="post-metadata">

**Author:** ![caitlin](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/caitlin/32/6091_2.png) [@caitlin](https://discourse.mozilla.org/u/caitlin)\
**Post date:** [April 11, 2018, 11:11pm UTC](https://discourse.mozilla.org/t/extension-development-tools/27608/1 "2018-04-11T23:11:21Z")

</div>

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](https://www.npmjs.com/package/create-web-ext)**
>
> Tool to create a directory structure for getting started with an addon. Latest version: 1.0.0, last published: 7 years ago. Start using create-web-ext in your project by running \`npm i create-web-ext\`. There are no other projects in the npm registry...

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](https://github.com/web-ext-labs/create-web-ext).

**`webextensions.tech`**

[A web interface](https://webextensions.tech) 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](https://github.com/web-ext-labs/ui-tool)

**`tern-def-webextensions`**

> **[tern-def-webextensions](https://www.npmjs.com/package/tern-def-webextensions)**
>
> tern definition file for WebExtensions.. Latest version: 0.21.1, last published: 4 years ago. Start using tern-def-webextensions in your project by running \`npm i tern-def-webextensions\`. There are no other projects in the npm registry using...

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

---

<div class="post-metadata">

**Author:** ![freaktechnik](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/freaktechnik/32/37766_2.png) [@freaktechnik](https://discourse.mozilla.org/u/freaktechnik)\
**Post date:** [April 12, 2018, 7:15am UTC](https://discourse.mozilla.org/t/extension-development-tools/27608/2 "2018-04-12T07:15:56Z")

</div>

I still use [https://www.npmjs.com/package/create-webextension](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/bfred-it/Awesome-WebExtensions)

[https://github.com/webexts](https://github.com/webexts) has various interesting tools for testing WebExtensions.

---

<div class="post-metadata">

**Author:** ![caitlin](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/caitlin/32/6091_2.png) [@caitlin](https://discourse.mozilla.org/u/caitlin)\
**Post date:** [April 16, 2018, 7:10pm UTC](https://discourse.mozilla.org/t/extension-development-tools/27608/3 "2018-04-16T19:10:13Z")

</div>



---

<div class="post-metadata">

**Author:** ![sangaline](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/sangaline/32/19318_2.png) [@sangaline](https://discourse.mozilla.org/u/sangaline)\
**Post date:** [April 16, 2018, 7:58pm UTC](https://discourse.mozilla.org/t/extension-development-tools/27608/4 "2018-04-16T19:58:40Z")

</div>

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](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](https://intoli.com/tour))!

---

<div class="post-metadata">

**Author:** ![caitlin](https://sea1.discourse-cdn.com/flex001/user_avatar/discourse.mozilla.org/caitlin/32/6091_2.png) [@caitlin](https://discourse.mozilla.org/u/caitlin)\
**Post date:** [February 26, 2021, 7:32pm UTC](https://discourse.mozilla.org/t/extension-development-tools/27608/10 "2021-02-26T19:32:14Z")

</div>

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

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

---

<div class="post-metadata">

**Author:** ![tim-we](https://avatars.discourse-cdn.com/v4/letter/t/ecb155/32.png) [@tim-we](https://discourse.mozilla.org/u/tim-we)\
**Post date:** [June 23, 2021, 9:41pm UTC](https://discourse.mozilla.org/t/extension-development-tools/27608/13 "2021-06-23T21:41:49Z")

</div>

I’ll just mention my own tool [web-ext-inspector](https://tim-we.github.io/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.