1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
|
---
title: Browser Extensions
slug: Mozilla/Add-ons/WebExtensions
tags:
- Add-ons
- Landing
- NeedsTranslation
- TopicStub
- WebExtensions
translation_of: Mozilla/Add-ons/WebExtensions
---
<div>{{AddonSidebar}}</div>
<p><span class="seoSummary">Extensions, or add-ons, can modify and enhance the capability of a browser. Extensions for Firefox are built using the WebExtensions API cross-browser technology.</span></p>
<p>The technology for extensions in Firefox is, to a large extent, compatible with the <a href="https://developer.chrome.com/extensions">extension API</a> supported by Chromium-based browsers (such as Google Chrome, Microsoft Edge, Opera, Vivaldi). In most cases, extensions written for Chromium-based browsers run in Firefox with <a href="https://wiki.developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Porting_from_Google_Chrome">just a few changes</a>.</p>
<section class="cleared" id="sect1">
<ul class="card-grid">
<li><span>Guides</span>
<p>Whether you’re just beginning or looking for more advanced advice, learn about how extensions work and use the WebExtensions API from our extensive range of <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">tutorials and guides</a>.</p>
</li>
<li><span>References</span>
<p>Get comprehensive details about the methods, properties, types, and events of the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs">WebExtensions APIs</a> and full details about the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest keys</a>.</p>
</li>
<li><span>Firefox workflow</span>
<p>Discover how to build and publish extensions for Firefox: get the lowdown on developer tools, publication and distribution, and porting on <a href="https://extensionworkshop.com/">Extension Workshop</a>.</p>
</li>
</ul>
<p><strong>If you have ideas or questions or need help,</strong> you can reach us on the <a href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons mailing list</a> or in the <a href="https://matrix.to/#/!CuzZVoCbeoDHsxMCVJ:mozilla.org?via=mozilla.org&via=matrix.org&via=humanoids.be">Add-ons Room</a> on <a href="https://wiki.mozilla.org/Matrix">Matrix</a>.</p>
<div class="topicpage-table">
<div class="section">
<h2 id="Get_started">Get started</h2>
<p>Discover <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions">what extensions can do</a> before building <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">your first extension.</a> Learn about the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">anatomy of an extension</a> and get an overview of the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Firefox_workflow_overview">extension development and publication workflow, Firefox style</a>. Explore a little deeper with a comprehensive selection of <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Examples">example extensions</a> that you can run right in Firefox.</p>
<h2 id="Concepts">Concepts</h2>
<p>Get detailed information on the concept that underpin extensions <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">from an overview of the JavaScript API</a>, through <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_scripts">content scripts,</a> <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns">match patterns</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_files">working with files</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization">internationalization</a>, and <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Content_Security_Policy">content security policy</a>, to more advanced subjects such as <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_messaging">native messaging</a>, <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Using_the_devtools_APIs">using the devtools APIs</a>, and <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Native_manifests">native manifests</a>.</p>
<h2 id="User_interface">User interface</h2>
<p>Discover all the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/user_interface">user interface</a> components you can use in your extensions, with coding examples and tips.</p>
<h2 id="How_to">How to</h2>
<p>From patterns you’ll regularly use such as <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Working_with_the_Tabs_API">work with the Tabs API</a> and <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Add_a_button_to_the_toolbar">adding a button to the toolbar</a> to more advanced topics such as <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Intercept_HTTP_requests">intercepting HTTP requests</a> and <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Work_with_contextual_identities">working with contextual identities</a>, you’ll find a range of tutorials to get you started.</p>
<ul>
</ul>
<h2 id="Firefox_workflow">Firefox workflow</h2>
<p>When you are ready to create your extension for Firefox or port your Chrome extension head over to <a href="https://extensionworkshop.com/">Extension Workshop</a>. It has details on:</p>
<ul>
<li>The Firefox workflow, such as <a href="https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/">temporarily installing extensions during development</a>, <a href="https://extensionworkshop.com/documentation/develop/debugging/">debugging</a>, <a href="https://extensionworkshop.com/documentation/develop/request-the-right-permissions/">request the right permissions</a>, and more.</li>
<li>The <a href="https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/">web-ext</a> developer tool.</li>
<li><a href="https://extensionworkshop.com/documentation/develop/porting-a-google-chrome-extension/">Porting a Google Chrome extension</a>, <a href="https://extensionworkshop.com/documentation/develop/differences-between-desktop-and-android-extensions/">differences between desktop and Android</a>, and more.</li>
<li><a href="https://extensionworkshop.com/documentation/publish/">Publishing and distribution overview</a>, <a href="https://extensionworkshop.com/documentation/publish/promoting-your-extension/">promoting your extension</a>, the <a href="https://extensionworkshop.com/documentation/manage/">extension lifecycle best practices</a>, and more.</li>
</ul>
</div>
<div class="section">
<h2 id="Reference">Reference</h2>
<h3 id="JavaScript_APIs">JavaScript APIs</h3>
<p>Get comprehensive details about the methods, properties, types, and events for all the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/API">JavaScript APIs</a>. There is also detailed information about the compatibility of each API with the major browsers. Most reference pages also include coding examples and links to the extension examples that use the API.</p>
<h3 id="Manifest_keys">Manifest keys</h3>
<p>Get full details about the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json">manifest keys</a>, including all their properties and settings. There’s also detailed information on the <a href="/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_compatibility_for_manifest.json">compatibility</a> of each key with the major browsers.</p>
</div>
</div>
<div class="SnapLinksContainer" style="margin-left: 0px; margin-top: 0px; display: none;">
<div class="SL_SelectionRect">
<div class="SL_SelectionLabel"></div>
</div>
</div>
</section>
|
