---
title: 教程
slug: Mozilla/Add-ons/SDK/Tutorials
tags:
  - 插件SDK
translation_of: Archive/Add-ons/Add-on_SDK/Tutorials
---
<p>{{LegacyAddonsNotice}}{{AddonSidebar}}</p>

<p>本文列出了许多关于如何通过SDK完成特定任务要求的实际动手的文章。</p>

<hr>
<h3 id="开发之旅"><a name="getting-started">开发之旅</a></h3>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/zh-CN/Add-ons/SDK/Tutorials/Installation">安装</a></dt>
 <dd>在Windows, OS X和Linux上下载，安装，初始化SDK工具。</dd>
</dl>

<dl>
 <dt><a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/Troubleshooting">常见问题</a></dt>
 <dd>解决常见问题的建议和获取更多帮助。</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/Getting_started">快速开始</a></dt>
 <dd>走马观花地使用SDK开发一个简单的扩展</dd>
</dl>
</div>
</div>

<hr>
<h3 id="创建用户交互界面"><a name="create-user-interfaces">创建用户交互界面</a></h3>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/Adding_a_Button_to_the_Toolbar">添加一个工具按钮</a></dt>
 <dd>添加一个按钮到火狐Add-on工具栏。</dd>
 <dt><a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">添加一个菜单选项到火狐</a></dt>
 <dd>添加多个菜单选项到火狐主菜单。</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/Display_a_Popup">显示一个弹出对话框</a></dt>
 <dd>通过HTML和JavaScript实现并显示一个弹窗对话框。</dd>
 <dt><a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/添加一个菜单项">添加一个上下文菜单</a></dt>
 <dd>添加一个上下文菜单(一般都是右键菜单)到火狐浏览器</dd>
</dl>
</div>
</div>

<hr>
<h3 id="与浏览器交互"><a name="interact-with-the-browser">与浏览器交互</a></h3>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/Open_a_Web_Page">打开Web页面</a></dt>
 <dd>在一个新的浏览器选项卡里打开一个Web页面或窗口使用tabs模块并获取内容。</dd>
 <dt><a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/Listen_for_Page_Load">监听页面加载</a></dt>
 <dd>当新页面载入时使用tabs模块得到通知并获取页面内容。</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/List_Open_Tabs">获取打开的选项卡(Tab)列表</a></dt>
 <dd>使用tabs模块遍历当前打开的tab，并获取其内容。</dd>
</dl>
</div>
</div>

<hr>
<h3 id="更改网页"><a name="modify-web-pages">更改网页</a></h3>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/Modifying_Web_Pages_Based_on_URL">更改网页通过URL</a></dt>
 <dd>基于URL过滤网页：当载入的页面的URL与过滤器匹配时执行特定的脚本。</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/zh-CN/Add-ons/SDK/Tutorials/Modifying_the_Page_Hosted_by_a_Tab">修改页面内容</a></dt>
 <dd>动态加载脚本到当前页面。</dd>
</dl>
</div>
</div>

<hr>
<h3 id="开发技术"><a name="development-techniques">开发技术</a></h3>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/zh-CN/Add-ons/SDK/Tutorials/日志">日志</a></dt>
 <dd>在终端中记录日志以便调试。</dd>
 <dt><a href="/zh-CN/Add-ons/SDK/Tutorials/Creating_reusable_modules">创建可复用的模块</a></dt>
 <dd>拆分扩展程序为多个分离的模块，可以使开发调试和维护更加简单。封装你的模块使其成为可复用的包，以便其他开发者可以再次使用。</dd>
 <dt><a href="/zh-CN/Add-ons/SDK/Tutorials/Unit_testing">单元测试</a></dt>
 <dd>使用SDK的测试框架书写和进行单元测试。</dd>
 <dt><a href="/zh-CN/Add-ons/SDK/Tutorials/Chrome_authority">Chrome授权 </a></dt>
 <dd>获得Components对象，使你的扩展程序能够加载和使用任何XPCOM对象。</dd>
 <dt><a href="/zh-CN/Add-ons/SDK/Tutorials/Creating_event_targets">创建事件目标</a></dt>
 <dd>使你定义的对象能够响应相关事件。</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="/zh-CN/Add-ons/SDK/Tutorials/Listening_for_load_and_unload">监听载入和卸载</a></dt>
 <dd>当你的扩展程序被加载和卸载时获得通知，并从终端传递参数给扩展程序。</dd>
 <dt><a href="/zh-CN/Add-ons/SDK/Tutorials/Add_a_Menu_Item_to_Firefox">使用第三方模块</a></dt>
 <dd>安装和使用与SDK无关额外的模块</dd>
 <dt><a href="/zh-CN/Add-ons/SDK/Tutorials/l10n">本地化</a></dt>
 <dd>书写本地化代码.</dd>
 <dt><a href="/zh-CN/Add-ons/SDK/Tutorials/Mobile_development">移动开发</a></dt>
 <dd>为Andriod上的火狐浏览器开发扩展程序。</dd>
 <dt><a href="/zh-CN/Add-ons/Add-on_Debugger">扩展调试</a></dt>
 <dd>调试扩展应用的JavaScript。</dd>
</dl>
</div>
</div>

<hr>
<h3 id="打包"><a name="putting-it-together">打包</a></h3>

<div class="column-container">
<div class="column-half">
<dl>
 <dt><a href="/zh-CN/docs/Mozilla/Add-ons/SDK/Tutorials/Annotator">扩展应用：Annotator</a></dt>
 <dd>一起开发一个相对复杂的扩展应用。</dd>
</dl>
</div>
</div>