Dfyjkt

I am new in JavaScript/web extensions can someone tell me how web extensions work? And how I can write a web extension for my own?

Thank you.

I recomend you to read MDN for Mozilla Products.

WebExtensions

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions

An extension adds features and functions to a browser. It’s created using familiar web-based technologies—HTML, CSS, and JavaScript. It can take advantage of the same web APIs as JavaScript on a web page, but an extension also has access to its own set of JavaScript APIs. This means that you can do a lot more in an extension than you can with code in a web page.
To help illustrate how to develop extensions, we maintain a repository of simple example extensions at https://github.com/mdn/webextensions-examples. This article describes the WebExtension APIs used in that repository.

...

These examples work in Firefox Nightly: most work in earlier versions of Firefox, but check the strict_min_version key in the extension's manifest.json to make sure.

If you want to try out these examples, you have three main choices:

• Clone the repository, then load the extension straight from its source directory, using the "Load Temporary Add-on" feature. The extension will stay loaded until you restart Firefox.


• Clone the repository, then use the web-ext command line tool to run Firefox with the extension installed.


• Clone the repository, then go to the build directory. This contains built and signed versions of all the examples, so you can just open them in Firefox (using File/Open File) and install them permanently, just like an extension you would install from addons.mozilla.org.

Thunderbird Extensions

https://developer.mozilla.org/en-US/docs/Mozilla/Thunderbird/Thunderbird_extensions

Getting started with Thunderbird

A brave, young developer wants to develop an add-on for Thunderbird. These links to help through this journey. Note: This documention series is not yet updated for version 60.

• Start by reading the tutorial and learn how to build a Thunderbird extension.
  (https://developer.mozilla.org/en-US/docs/Mozilla/Thunderbird/Thunderbird_extensions/Building_a_Thunderbird_extension)


• Also see Thunderbird 57-60 add-ons guide (https://wiki.mozilla.org/Thunderbird/Add-ons_Guide_57) for changes introduced in Thunderbird 60.


• Read about the main windows (https://developer.mozilla.org/en-US/docs/Mozilla/Thunderbird/Main_Windows) to learn about « thread pane », « preview pane », and « folder pane ».


• Play with a demo add-on (https://developer.mozilla.org/en-US/docs/Mozilla/Thunderbird/Thunderbird_extensions/Demo_Addon) that exercises some more advanced Thunderbird-specific features


• Want to do even more? Don't reinvent the wheel: steal from the thunderbird-stdlib (https://github.com/protz/thunderbird-stdlib) project (doc here: http://protz.github.io/thunderbird-stdlib/doc/symbols/global.html). Functions for dealing with messages (delete, archive, change tags, etc.) are included.


• Haven't found what you need? Read the Thunderbird how-tos (https://developer.mozilla.org/en-US/docs/Mozilla/Thunderbird/Thunderbird_extensions/HowTos); they contain many recipes for things extensions want to do.


• Still stuck? Ask in a community communication channel on the right.


• Feeling really brave? Read the source using a fancy interface (http://doxygen.db48x.net/comm-central/html/); you can often find tests that demonstrate what you're trying to achieve.

Thunderbird Extensions Developing

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Developing_WebExtensions_for_Thunderbird

Being both Gecko based, Thunderbird supports many of the APIs Firefox supports, with some differences, see browser compatibility for manifest.json and browser support for JavaScript APIs for details. (https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json)