Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Fetching contributors…

Cannot retrieve contributors at this time

471 lines (353 sloc) 16.599 kB
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html lang="en">
<head>
<base >
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<script type="text/javascript" src="static-files/syntaxhighlighter/scripts/shCore.js"></script>
<script type="text/javascript" src="static-files/syntaxhighlighter/scripts/shBrushCss.js"></script>
<script type="text/javascript" src="static-files/syntaxhighlighter/scripts/shBrushXml.js"></script>
<script type="text/javascript" src="static-files/syntaxhighlighter/scripts/shBrushJScript.js"></script>
<link rel="stylesheet" type="text/css" media="all" href="static-files/css/base.css">
<link rel="stylesheet" type="text/css" media="all" href="static-files/css/header.css">
<link rel="stylesheet" type="text/css" media="all" href="static-files/css/footer.css">
<link rel="stylesheet" type="text/css" media="all" href="static-files/css/sdk-docs.css">
<link rel="stylesheet" type="text/css" media="all" href="static-files/css/api-reference.css">
<link rel="stylesheet" type="text/css" href="static-files/syntaxhighlighter/styles/shCore.css">
<link rel="stylesheet" type="text/css" href="static-files/syntaxhighlighter/styles/shThemeDefault.css">
<!--[if IE]>
<style type="text/css">
.package-summary .module,
.package-entry .module,
.package-detail .module {
display: block;
}
</style>
<![endif]-->
<link rel="shortcut icon" type="image/x-icon" href="static-files/media/favicon.png">
<title>Add-on SDK Documentation</title>
</head>
<body>
<div id="global-header">
<div class="funnel">
<a id="mozilla-tab" href="http://www.mozilla.org/?ref=logo">Mozilla</a>
<div class="menu">
<p>
<a href="https://builder.addons.mozilla.org/">Add-on Builder</a>
</p>
<p>
<a href="https://addons.mozilla.org/en-US/developers/">Developer Hub</a>
</p>
</div>
</div>
</div>
<div id="site-header">
<div class="funnel">
<h1>
<a href="dev-guide/index.html">Add-on SDK<span></span></a>
</h1>
<div id="version">Version 1.10</div>
</div>
</div>
<div id="container">
<div id="columns">
<div id="main-content-column" class="column">
<div id="toc"></div>
<div id="main-content"><!-- This Source Code Form is subject to the terms of the Mozilla Public
- License, v. 2.0. If a copy of the MPL was not distributed with this
- file, You can obtain one at http://mozilla.org/MPL/2.0/. -->
<h2 class="top">Welcome to the Add-on SDK!</h2>
<p>Using the Add-on SDK you can create Firefox add-ons using standard Web
technologies: JavaScript, HTML, and CSS. The SDK includes JavaScript APIs which you can use to create add-ons, and tools for creating, running, testing, and packaging add-ons.</p>
<hr>
<h2><a href="dev-guide/tutorials/index.html">Tutorials</a></h2>
<table class="catalog">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tr>
<td>
<h4><a href="dev-guide/tutorials/index.html#getting-started">Getting started</a></h4>
How to
<a href="dev-guide/tutorials/installation.html">install the SDK</a> and
<a href="dev-guide/tutorials/getting-started-with-cfx.html">use the cfx
tool</a> to develop, test, and package add-ons.
</td>
<td>
<h4><a href="dev-guide/tutorials/index.html#create-user-interfaces">Create user interface components</a></h4>
Create user interface components such as
<a href="dev-guide/tutorials/adding-toolbar-button.html">toolbar buttons</a>,
<a href="dev-guide/tutorials/adding-menus.html">menu items</a>, and
<a href="dev-guide/tutorials/display-a-popup.html">dialogs</a>
</td>
</tr>
<tr>
<td>
<h4><a href="dev-guide/tutorials/index.html#interact-with-the-browser">Interact with the browser</a></h4>
<a href="dev-guide/tutorials/open-a-web-page.html">Open web pages</a>,
<a href="dev-guide/tutorials/listen-for-page-load.html">listen for pages loading</a>, and
<a href="dev-guide/tutorials/list-open-tabs.html">list open pages</a>.
</td>
<td>
<h4><a href="dev-guide/tutorials/index.html#modify-web-pages">Modify web pages</a></h4>
<a href="dev-guide/tutorials/modifying-web-pages-url.html">Modify pages matching a URL pattern</a>
or <a href="dev-guide/tutorials/modifying-web-pages-tab.html">dynamically modify a particular tab</a>.
</td>
</tr>
<tr>
<td>
<h4><a href="dev-guide/tutorials/index.html#development-techniques">Development techniques</a></h4>
Learn about common development techniques, such as
<a href="dev-guide/tutorials/unit-testing.html">unit testing</a>,
<a href="dev-guide/tutorials/logging.html">logging</a>,
<a href="dev-guide/tutorials/reusable-modules.html">creating reusable modules</a>,
<a href="dev-guide/tutorials/l10n.html">localization</a>, and
<a href="dev-guide/tutorials/mobile.html">mobile development</a>.
</td>
<td>
<h4><a href="dev-guide/tutorials/index.html#putting-it-together">Putting it together</a></h4>
Walkthrough of the <a href="dev-guide/tutorials/annotator/index.html">Annotator</a> example add-on.
</td>
</tr>
</table>
<hr>
<h2><a href="dev-guide/guides/index.html">Guides</a></h2>
<table class="catalog">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tr>
<td>
<h4><a href="dev-guide/guides/index.html#sdk-infrastructure">SDK infrastructure</a></h4>
Aspects of the SDK's underlying technology:
<a href="dev-guide/guides/commonjs.html">CommonJS</a>, the
<a href="dev-guide/guides/program-id.html">Program ID</a>, the
<a href="dev-guide/guides/module-search.html">module search algorithm</a>
and the rules defining
<a href="dev-guide/guides/firefox-compatibility.html">Firefox compatibility</a>.
</td>
<td>
<h4><a href="dev-guide/guides/index.html#sdk-idioms">SDK idioms</a></h4>
The SDK's
<a href="dev-guide/guides/events.html">event framework</a> and the
<a href="dev-guide/guides/two-types-of-scripts.html">distinction between add-on scripts and content scripts</a>.
</td>
</tr>
<tr>
<td>
<h4><a href="dev-guide/guides/index.html#content-scripts">Content scripts</a></h4>
A <a href="dev-guide/guides/content-scripts/index.html">detailed guide to working with content scripts</a>,
including: how to load content scripts, which objects
content scripts can access, and how to communicate
between content scripts and the rest of your add-on.
</td>
<td>
<h4><a href="dev-guide/guides/index.html#xul-migration">XUL migration</a></h4>
A guide to <a href="dev-guide/guides/xul-migration.html">porting XUL add-ons to the SDK</a>.
This guide includes a
<a href="dev-guide/guides/sdk-vs-xul.html">comparison of the two toolsets</a> and a
<a href="dev-guide/guides/library-detector.html">worked example</a> of porting a XUL add-on.
</td>
</tr>
</table>
<hr>
<h2>Reference</h2>
<table class="catalog">
<colgroup>
<col width="50%">
<col width="50%">
</colgroup>
<tr>
<td>
<h4>API reference</h4>
Reference documentation for the high-level SDK APIs found in the
<a href="packages/addon-kit/index.html">addon-kit</a>
package, and the low-level APIs found in the
<a href="packages/api-utils/index.html">api-utils</a> package.
</td>
<td>
<h4>Tools reference</h4>
Reference documentation for the
<a href="dev-guide/cfx-tool.html">cfx tool</a>
used to develop, test, and package add-ons, the
<a href="dev-guide/console.html">console</a>
global used for logging, and the
<a href="dev-guide/package-spec.html">package.json</a> file.
</td>
</tr>
</table></div>
</div>
<div id="sidebar" class="column">
<div class="sidebar-section" id="addon-development">
<a href="dev-guide/index.html"><h2 class="sidebar-section-header">Developer Guide</h2></a>
<ul class="sidebar-section-contents" id="default-section-contents">
<li class="sidebar-subsection">
<a href="dev-guide/tutorials/installation.html"><h3>Installation</h3></a>
</li>
<li class="sidebar-subsection">
<a href="dev-guide/tutorials/index.html"><h3 class="sidebar-subsection-header">Tutorials</h3></a>
</li>
<li class="sidebar-subsection">
<a href="dev-guide/guides/index.html"><h3 class="sidebar-subsection-header">Guides</h3></a>
</li>
<li class="sidebar-subsection" id="third-party-packages-subsection">
<a href="dev-guide/third-party-apis.html"><h3 class="sidebar-subsection-header">Third-Party APIs</h3></a>
<div class="sidebar-subsection-contents">
<ul id="third-party-package-summaries"></ul>
</div>
</li>
<li class="sidebar-subsection">
<a href="dev-guide/high-level-apis.html"><h3 class="sidebar-subsection-header">High-Level APIs</h3></a>
<div class="sidebar-subsection-contents">
<ul id="high-level-package-summaries">
<li style="display: block;" class="package-summary">
<h4>
<a href="packages/addon-kit/index.html">addon-kit</a>
</h4>
<a href="packages/addon-kit/addon-page.html">addon-page</a>
<a href="packages/addon-kit/clipboard.html">clipboard</a>
<a href="packages/addon-kit/context-menu.html">context-menu</a>
<a href="packages/addon-kit/hotkeys.html">hotkeys</a>
<a href="packages/addon-kit/l10n.html">l10n</a>
<a href="packages/addon-kit/notifications.html">notifications</a>
<a href="packages/addon-kit/page-mod.html">page-mod</a>
<a href="packages/addon-kit/page-worker.html">page-worker</a>
<a href="packages/addon-kit/panel.html">panel</a>
<a href="packages/addon-kit/passwords.html">passwords</a>
<a href="packages/addon-kit/private-browsing.html">private-browsing</a>
<a href="packages/addon-kit/request.html">request</a>
<a href="packages/addon-kit/selection.html">selection</a>
<a href="packages/addon-kit/self.html">self</a>
<a href="packages/addon-kit/simple-prefs.html">simple-prefs</a>
<a href="packages/addon-kit/simple-storage.html">simple-storage</a>
<a href="packages/addon-kit/tabs.html">tabs</a>
<a href="packages/addon-kit/timers.html">timers</a>
<a href="packages/addon-kit/widget.html">widget</a>
<a href="packages/addon-kit/windows.html">windows</a>
</li>
</ul>
</div>
</li>
<li class="sidebar-subsection">
<a href="dev-guide/low-level-apis.html"><h3 class="sidebar-subsection-header">Low-Level APIs</h3></a>
<div class="sidebar-subsection-contents">
<ul id="low-level-package-summaries">
<li style="display: block;" class="package-summary">
<h4>
<a href="packages/api-utils/index.html">api-utils</a>
</h4>
<a href="packages/api-utils/api-utils.html">api-utils</a>
<a href="packages/api-utils/app-strings.html">app-strings</a>
<a href="packages/api-utils/base64.html">base64</a>
<a href="packages/api-utils/byte-streams.html">byte-streams</a>
<a href="packages/api-utils/collection.html">collection</a>
<a href="packages/api-utils/content.html">content</a>
<a href="packages/api-utils/content/loader.html">content/loader</a>
<a href="packages/api-utils/content/proxy.html">content/proxy</a>
<a href="packages/api-utils/content/symbiont.html">content/symbiont</a>
<a href="packages/api-utils/content/worker.html">content/worker</a>
<a href="packages/api-utils/cortex.html">cortex</a>
<a href="packages/api-utils/cuddlefish.html">cuddlefish</a>
<a href="packages/api-utils/environment.html">environment</a>
<a href="packages/api-utils/errors.html">errors</a>
<a href="packages/api-utils/event/core.html">event/core</a>
<a href="packages/api-utils/event/target.html">event/target</a>
<a href="packages/api-utils/events.html">events</a>
<a href="packages/api-utils/file.html">file</a>
<a href="packages/api-utils/frame/utils.html">frame/utils</a>
<a href="packages/api-utils/globals.html">globals</a>
<a href="packages/api-utils/heritage.html">heritage</a>
<a href="packages/api-utils/hidden-frame.html">hidden-frame</a>
<a href="packages/api-utils/httpd.html">httpd</a>
<a href="packages/api-utils/light-traits.html">light-traits</a>
<a href="packages/api-utils/list.html">list</a>
<a href="packages/api-utils/loader.html">loader</a>
<a href="packages/api-utils/match-pattern.html">match-pattern</a>
<a href="packages/api-utils/memory.html">memory</a>
<a href="packages/api-utils/message-manager.html">message-manager</a>
<a href="packages/api-utils/namespace.html">namespace</a>
<a href="packages/api-utils/observer-service.html">observer-service</a>
<a href="packages/api-utils/plain-text-console.html">plain-text-console</a>
<a href="packages/api-utils/preferences-service.html">preferences-service</a>
<a href="packages/api-utils/promise.html">promise</a>
<a href="packages/api-utils/querystring.html">querystring</a>
<a href="packages/api-utils/runtime.html">runtime</a>
<a href="packages/api-utils/sandbox.html">sandbox</a>
<a href="packages/api-utils/tab-browser.html">tab-browser</a>
<a href="packages/api-utils/test/assert.html">test/assert</a>
<a href="packages/api-utils/text-streams.html">text-streams</a>
<a href="packages/api-utils/traceback.html">traceback</a>
<a href="packages/api-utils/traits.html">traits</a>
<a href="packages/api-utils/unload.html">unload</a>
<a href="packages/api-utils/url.html">url</a>
<a href="packages/api-utils/uuid.html">uuid</a>
<a href="packages/api-utils/window/utils.html">window/utils</a>
<a href="packages/api-utils/window-utils.html">window-utils</a>
<a href="packages/api-utils/xhr.html">xhr</a>
<a href="packages/api-utils/xpcom.html">xpcom</a>
<a href="packages/api-utils/xul-app.html">xul-app</a>
</li>
<li style="display: block;" class="package-summary">
<h4>
<a href="packages/test-harness/index.html">test-harness</a>
</h4>
<a href="packages/test-harness/harness.html">harness</a>
<a href="packages/test-harness/run-tests.html">run-tests</a>
</li>
</ul>
</div>
</li>
<li class="sidebar-subsection">
<h3 class="sidebar-subsection-header">Tools Reference</h3>
<div class="sidebar-subsection-contents">
<a href="dev-guide/console.html">console</a>
<a href="dev-guide/cfx-tool.html">cfx</a>
<a href="dev-guide/package-spec.html">package.json</a>
</div>
</li>
</ul>
</div>
<ul class="sidebar-section" id="appendices">
<li><a href="https://wiki.mozilla.org/Labs/Jetpack/Release_Notes"><h3>Release Notes</h3></a></li>
<li><a href="https://wiki.mozilla.org/Labs/Jetpack"><h3>Jetpack Wiki</h3></a></li>
<li><a href="dev-guide/glossary.html"><h3>Glossary</h3></a></li>
<li><a href="dev-guide/credits.html"><h3>Credits</h3></a></li>
</ul>
<!--end of sidebar column-->
</div>
<!--end of 'columns'-->
<div class="clearfooter"></div>
</div>
</div>
<div id="footer">
<div class="section">
<img alt="" src="static-files/media/footer-logo-med.png" class="footerlogo">
<div id="social-footer">
<ul>
<li>get to know <b>add-ons</b></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/about">About</a></li>
<li><a href="http://blog.mozilla.com/addons">Blog</a></li>
<li class="footer-devhub-link"><a href="https://addons.mozilla.org/en-US/developers/">Developer Hub</a></li>
<li><a href="https://addons.mozilla.org/en-US/firefox/faq">FAQ</a></li>
<li><a href="https://forums.addons.mozilla.org">Forum</a></li>
</ul>
</div>
<div id="copyright">
<p id="footer-links">
<a href="http://mozilla.com/privacy-policy.html">Privacy Policy</a> &nbsp;|&nbsp;
<a href="http://mozilla.com/about/legal.html">Legal Notices</a> &nbsp;|&nbsp;
<a href="http://mozilla.com/legal/fraud-report/index.html">Report Trademark Abuse</a>
&nbsp;|&nbsp;<a href="https://addons.mozilla.org/z/en-US/developers/" class="mobile-link">View Mobile Site</a>
</p>
<p>
Except where otherwise <a href="http://mozilla.com/about/legal.html#site">noted</a>, content on this site is licensed under the <br> <a href="http://creativecommons.org/licenses/by-sa/3.0/"> Creative Commons Attribution Share-Alike License v3.0 </a> or any later version.
</p>
</div>
</div>
</div>
<script type="text/javascript" src="static-files/js/jquery.js"></script>
<script type="text/javascript" src="static-files/js/main.js"></script>
</body>
</html>
Jump to Line
Something went wrong with that request. Please try again.