Tutorials

  • Revision slug: Mozilla/Add-ons/SDK/Tutorials
  • Revision title: Tutorials
  • Revision id: 509423
  • Created:
  • Creator: wbamberg
  • Is current revision? No
  • Comment

Revision Content

This page lists practical hands-on articles about how to accomplish specific tasks using the SDK.


Getting started

Installation
Download, install, and initialize the SDK on Windows, OS X and Linux.
Troubleshooting
Some pointers for fixing common problems and getting more help.
Getting started with cfx
The basic cfx commands you need to start creating add-ons.

Create user interfaces

Add a toolbar button
Attach a button to the Firefox Add-on toolbar.
Add a menu item to Firefox
Add items to Firefox's main menus.
Display a popup
Display a popup dialog implemented with HTML and JavaScript.
Add a context menu item
Add items to Firefox's context menu.

Interact with the browser

Open a web page
Open a web page in a new browser tab or window using the tabs module, and access its content.
Listen for page load
Use the tabs module to get notified when new web pages are loaded, and access their content.
Get the list of open tabs
Use the tabs module to iterate through the currently open tabs, and access their content.

Modify web pages

Modify web pages based on URL
Create filters for web pages based on their URL: whenever a web page whose URL matches the filter is loaded, execute a specified script in it.
Modify the active web page
Dynamically load a script into the currently active web page.

Development techniques

Logging
Log messages to the console for diagnostic purposes.
Creating third-party modules
Structure your add-on in separate modules to make it easier to develop, debug, and maintain. Create reusable packages containing your modules, so other add-on developers can use them too.
Unit testing
Writing and running unit tests using the SDK's test framework.
Chrome authority
Get access to the Components object, enabling your add-on to load and use any XPCOM object.
Writing Event Targets
Enable the objects you define to emit their own events.
Listen for load and unload
Get notifications when your add-on is loaded or unloaded by Firefox, and pass arguments into your add-on from the command line.
Using third-party modules
Install and use additional modules which don't ship with the SDK itself.
Localization
Writing localizable code.
Mobile development
Develop add-ons for Firefox Mobile on Android.

Putting it together

Annotator add-on
A walkthrough of a relatively complex add-on.

 

Revision Source

<p>This page lists practical hands-on articles about how to accomplish specific tasks using the SDK.</p>
<hr />
<h3 id="Getting_started"><a name="getting-started">Getting started</a></h3>
<div class="column-container">
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Installation">Installation </a></dt>
   <dd>
    Download, install, and initialize the SDK on Windows, OS X and Linux.</dd>
  </dl>
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Troubleshooting">Troubleshooting </a></dt>
   <dd>
    Some pointers for fixing common problems and getting more help.</dd>
  </dl>
 </div>
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Getting_started_with_cfx">Getting started with cfx </a></dt>
   <dd>
    The basic cfx commands you need to start creating add-ons.</dd>
  </dl>
 </div>
</div>
<hr />
<h3 id="Create_user_interfaces"><a name="create-user-interfaces">Create user interfaces</a></h3>
<div class="column-container">
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_toolbar_button">Add a toolbar button </a></dt>
   <dd>
    Attach a button to the Firefox Add-on toolbar.</dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">Add a menu item to Firefox </a></dt>
   <dd>
    Add items to Firefox's main menus.</dd>
  </dl>
 </div>
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Display_a_Popup">Display a popup </a></dt>
   <dd>
    Display a popup dialog implemented with HTML and JavaScript.</dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Add_a_Context_Menu_Item">Add a context menu item </a></dt>
   <dd>
    Add items to Firefox's context menu.</dd>
  </dl>
 </div>
</div>
<hr />
<h3 id="Interact_with_the_browser"><a name="interact-with-the-browser">Interact with the browser</a></h3>
<div class="column-container">
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Open_a_Web_Page">Open a web page </a></dt>
   <dd>
    Open a web page in a new browser tab or window using the tabs module, and access its content.</dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Listen_for_Page_Load">Listen for page load </a></dt>
   <dd>
    Use the tabs module to get notified when new web pages are loaded, and access their content.</dd>
  </dl>
 </div>
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/List_Open_Tabs">Get the list of open tabs </a></dt>
   <dd>
    Use the tabs module to iterate through the currently open tabs, and access their content.</dd>
  </dl>
 </div>
</div>
<hr />
<h3 id="Modify_web_pages"><a name="modify-web-pages">Modify web pages</a></h3>
<div class="column-container">
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">Modify web pages based on URL </a></dt>
   <dd>
    Create filters for web pages based on their URL: whenever a web page whose URL matches the filter is loaded, execute a specified script in it.</dd>
  </dl>
 </div>
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">Modify the active web page </a></dt>
   <dd>
    Dynamically load a script into the currently active web page.</dd>
  </dl>
 </div>
</div>
<hr />
<h3 id="Development_techniques"><a name="development-techniques">Development techniques</a></h3>
<div class="column-container">
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Logging">Logging </a></dt>
   <dd>
    Log messages to the console for diagnostic purposes.</dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Creating_third_party_modules">Creating third-party modules </a></dt>
   <dd>
    Structure your add-on in separate modules to make it easier to develop, debug, and maintain. Create reusable packages containing your modules, so other add-on developers can use them too.</dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Unit_testing">Unit testing </a></dt>
   <dd>
    Writing and running unit tests using the SDK's test framework.</dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Chrome_authority">Chrome authority </a></dt>
   <dd>
    Get access to the Components object, enabling your add-on to load and use any XPCOM object.</dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Writing_event_targets">Writing Event Targets </a></dt>
   <dd>
    Enable the objects you define to emit their own events.</dd>
  </dl>
 </div>
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Listening_for_load_and_unload">Listen for load and unload </a></dt>
   <dd>
    Get notifications when your add-on is loaded or unloaded by Firefox, and pass arguments into your add-on from the command line.</dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Using_third_party_modules">Using third-party modules </a></dt>
   <dd>
    Install and use additional modules which don't ship with the SDK itself.</dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/l10n">Localization </a></dt>
   <dd>
    Writing localizable code.</dd>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Mobile_development">Mobile development </a></dt>
   <dd>
    Develop add-ons for Firefox Mobile on Android.</dd>
  </dl>
 </div>
</div>
<hr />
<h3 id="Putting_it_together"><a name="putting-it-together">Putting it together</a></h3>
<div class="column-container">
 <div class="column-half">
  <dl>
   <dt>
    <a href="/en-US/Add-ons/SDK/Tutorials/Annotator">Annotator add-on </a></dt>
   <dd>
    A walkthrough of a relatively complex add-on.</dd>
  </dl>
 </div>
</div>
<p>&nbsp;</p>
Revert to this revision