recursal/MDN huggingface dataset:
Firefox 20 for developers
=========================

Firefox 20 正式版发布于 2013 年 4 月 2 日。

Web 开发者需要注意的变化
--------------

### HTML

* 实现了`<a>`和`<area>`元素上的`download`属性 (Firefox bug 676619).
* 全局属性 (en-US) `dir` (en-US) 的值开始支持 `auto` (Firefox bug 548206).
### JavaScript

* 实现了`Weakmap.prototype.clear()`方法 (Firefox bug 814562).
* 实现了`Math.imul()`方法，可以进行 C 风格的 32 位整数乘法运算。还不属于 harmony (EcmaScript 6) 提案，所以是非标准的 (Firefox bug 808148).
* Web apps using draggable text with Kinetic 3.x are working, even when using the Cairo canvas backend. (Firefox bug 835064)
* E4X 规范中的for each...in语句被废弃，请使用 ES6 中的for...of语句代替 (Firefox bug 804834).
### CSS

* CSS Flexbox (en-US)默认开启，不需要设置 about:config.
* 实现了 CSS Masking specification 中的 `mask-type` 属性（Firefox bug 793617）。
### DOM

* `HTMLMediaElement`支持可`playbackRate`属性 (both read and write), with pitch correction. Pitch correction can be controlled using the property `mozPreservesPitch` (Firefox bug 495040).
* CSSOM: 实现了新的`CSSGroupingRule`和`CSSConditionRule` (Firefox bug 814907).
* CSSOM:`CSSRule`上的常量 CSSRule.MOZ\_KEYFRAME\_RULE 和 CSSRule.MOZ\_KEYFRAMES\_RULE 去掉前缀成为了 CSSRule.KEYFRAME\_RULE 和 CSSRule.KEYFRAMES\_RULE.带前缀的版本仍暂时保留让开发者过度他们的代码Firefox bug 816431).
* CSSOM: 现在可以设置 `CSSMediaRule` 上的 `conditionText` 属性的值（Firefox bug 815021）。
* `DOMParser`上的 `parseFromStream` 和 `parseFromBuffer` 方法在 web 页面上被禁用.(Firefox bug 816410).
* `XMLSerializer`上的`serializeToStream`方法在 web 页面上被禁用.(Firefox bug 816410).
* `TextDecoder`和`TextEncoder`接口可以在 Worker 中使用 (Firefox bug 795542).
* 实现了 `CSS.supports()` 方法（Firefox bug 779917）。
* 实现了`UndoManager`(Firefox bug 617532).
附加组件和 Mozilla 开发者需要注意的变化
------------------------

* 移除了 nsIDOMParserJS 接口Firefox bug 816410.使用nsIDOMParser来代替。
参见
--

* Firefox 20 Aurora Release Notes
* Site Compatibility for Firefox 20
### 更早版本

* Firefox 19 for developers
* Firefox 18 for developers
* Firefox 17 for developers (en-US)
* Firefox 16 for developers (en-US)
* Firefox 15 for developers (en-US)
* Firefox 14 for developers
* Firefox 13 for developers (en-US)
* Firefox 12 for developers (en-US)
* Firefox 11 for developers (en-US)
* Firefox 10 for developers (en-US)
* Firefox 9 for developers (en-US)
* Firefox 8 for developers (en-US)
* Firefox 7 for developers (en-US)
* Firefox 6 for developers (en-US)
* Firefox 5 for developers (en-US)
* Firefox 4 for developers (en-US)
* Firefox 3.6 for developers (en-US)
* Firefox 3.5 for developers (en-US)
* Firefox 3 for developers
* Firefox 2 for developers (en-US)
* Firefox 1.5 for developers (en-US)
Firefox 24 for developers
=========================

Web 开发者需要注意的变化
--------------

### Developer Tools

### HTML

### JavaScript

* 箭头函数不再默认处于严格模式，除非显式使用 `"use strict"`。（Firefox bug 852762）
### DOM

### MathML

参见
--

* Firefox 24 Aurora Notes
* Firefox 24 网站兼容性
### 更早版本

* Firefox 23 for developers (en-US)
* Firefox 22 for developers
* Firefox 21 for developers
* Firefox 20 for developers
* Firefox 19 for developers
* Firefox 18 for developers
* Firefox 17 for developers (en-US)
* Firefox 16 for developers (en-US)
* Firefox 15 for developers (en-US)
* Firefox 14 for developers
* Firefox 13 for developers (en-US)
* Firefox 12 for developers (en-US)
* Firefox 11 for developers (en-US)
* Firefox 10 for developers (en-US)
* Firefox 9 for developers (en-US)
* Firefox 8 for developers (en-US)
* Firefox 7 for developers (en-US)
* Firefox 6 for developers (en-US)
* Firefox 5 for developers (en-US)
* Firefox 4 for developers (en-US)
* Firefox 3.6 for developers (en-US)
* Firefox 3.5 for developers (en-US)
* Firefox 3 for developers
* Firefox 2 for developers (en-US)
* Firefox 1.5 for developers (en-US)
Firefox 26 for developers
=========================

Web 开发者需要注意的变化
--------------

### CSS

* `text-decoration-line` 属性仍然带有前缀，不过现在它把 `'blink'` 也看看成了它的合法属性值，虽然并不会真正的让内容产生闪烁效果 (Firefox bug 812995).
* 非标准的 `-moz-text-blink` 属性已被删除 (Firefox bug 812995).
* 实现了 CSS Image Values Level 4 中的 `image-orientation` 属性，比起 Level 3, Level 4 增加了对 `from-image` 关键字和 EXIF 的支持。
* 支持了 `position:sticky`，需要开启 `layout.css.sticky.enabled` 选项（Firefox bug 886646）。
### HTML

*No change.*

### JavaScript

* 实现了 ES6 中的 `Math`: `Math.fround()` 方法 (Firefox bug 900125).
### Interfaces/APIs/DOM

* `DOMImplementation.createDocument` 方法的第三个参数 `doctype` 成为可选参数（Firefox bug 909859）。
* 实现了新的 `element.classList` 规范，可以同时添加或删除多个类名，比如 `element.classList.add("x", "y", "z")`（Firefox bug 814014）。
* 实现了 `URL()` 构造函数 (Firefox bug 887364).
* The properties `URLUtils.origin`, `URLUtils.password`, and `URLUtils.username` are now available to all interfaces implementing `URLUtils`: `URL`, `Location`, `HTMLAnchorElement` (en-US), and `HTMLAreaElement` (Firefox bug 887364).
* The `URL` interface is now accessible from Web Workers (Firefox bug 887364).
* IndexedDB can now be used as a "optimistic" storage area so it doesn't require any prompts and data is stored in a pool with LRU eviction policy, in short temporary storage (Firefox bug 785884).
* Path of the persistent storage has been changed from <profile>/indexedDB to <profile>/storage/persistent (on b2g from /data/local/indexedDB to /data/local/storage/persistent).
### MathML

* Inconsistent renderings of `<mmultiscripts> (en-US)`, `<msub>`, `<msup>` and `<msubsup>` have been unified and the error handling of these elements has been improved (Firefox bug 827713).
### SVG

*No change.*

参见
--

* Firefox 26 网站兼容性
### 更早版本

* Firefox 25 for developers
* Firefox 24 for developers
* Firefox 23 for developers (en-US)
* Firefox 22 for developers
* Firefox 21 for developers
* Firefox 20 for developers
* Firefox 19 for developers
* Firefox 18 for developers
* Firefox 17 for developers (en-US)
* Firefox 16 for developers (en-US)
* Firefox 15 for developers (en-US)
* Firefox 14 for developers
* Firefox 13 for developers (en-US)
* Firefox 12 for developers (en-US)
* Firefox 11 for developers (en-US)
* Firefox 10 for developers (en-US)
* Firefox 9 for developers (en-US)
* Firefox 8 for developers (en-US)
* Firefox 7 for developers (en-US)
* Firefox 6 for developers (en-US)
* Firefox 5 for developers (en-US)
* Firefox 4 for developers (en-US)
* Firefox 3.6 for developers (en-US)
* Firefox 3.5 for developers (en-US)
* Firefox 3 for developers
* Firefox 2 for developers (en-US)
* Firefox 1.5 for developers (en-US)
Firefox 59 for developers
=========================

本文提供了有关 Firefox 59 中会影响开发人员的更改的信息。Firefox 59 已于 2018 年 3 月 13 日发布。

Web 开发者应该注意的变化
--------------

### 开发工具

* 网络监视器 响应标签现在显示一个 已渲染网页的预览 — 如果响应是一个 HTML 的话 (Firefox bug 1353319).
* 存储探查器显示的 Cookie 信息 (见 Cookies) 现在包括一列 *“同站”* 显示每个 cookie 的同站状态 (Firefox bug 1298370)。
* 标尺 工具 现在包含了一个 readout 来显示当前视角的维度 (Firefox bug 1402633)。
* 在响应式设计模式, 你现在可以使用光标键设置屏幕尺寸 (Firefox bug 1421663)。详见 Setting screen size 。
* The *Raw headers* display in the Network Monitor *Headers* tab now includes the response's status code (Firefox bug 1419401).
### HTML

* 实现了`<textarea>` 元素的 `autocomplete` 属性。这使得你可以启用或禁用元素的表单自动填写。
### CSS

*无变化。*

### SVG

*无变化。*

### JavaScript

*无变化。*

### APIs

#### 新增 API

* 在 nightly 中默认启用 Custom element v1（Firefox bug 1406825）。

#### DOM

*无变化。*

#### DOM 事件

* 实现了 `EventTarget.EventTarget()` 构造函数 (Firefox bug 1379688).

#### 多媒体 和 WebRTC

*无变化。*

#### Canvas 和 WebGL

*无变化。*

### HTTP

*无变化。*

### 安全

* 顶部导航 URI `data://` 已经被屏蔽了 Firefox bug 1401895.
* 修改了 `X-Frame-Options` 报头的 `SAMEORIGIN` 指令，现在它不仅会检查顶级 IFrame 是否来自同一来源 , 也会检查它的祖先。 (Firefox bug 725490).
### 插件

*无变化。*

### 其他

*无变化。*

Web 平台的删减
---------

### HTML

*无变化。*

### CSS

*无变化。*

### APIs

* 不标准的方法 `Event.getPreventDefault()` 已经被移除了。请使用 `Event.defaultPrevented` 来决定在`Event`中是否要调用`preventDefault()` 。
* 专用属性 `Navigator.mozNotification` 和 `DesktopNotification` 接口已被移除 , 推荐使用标准的 Notifications API (Firefox bug 952453).
* 专用方法 `window.external.addSearchEngine()`已被移除 (Firefox bug 862147)。欲了解更多细节，参见 `Window.sidebar` (en-US) 。
### SVG

*无变化。*

Mozilla 和附加组件开发者应该注意的变化
-----------------------

### WebExtensions

*无变化。*

参见
--

* Firefox 59 的站点兼容性
历史版本
----

* Firefox 58 for developers (en-US)
* Firefox 57 for developers (en-US)
* Firefox 56 for developers (en-US)
* Firefox 55 for developers (en-US)
* Firefox 54 for developers (en-US)
* Firefox 53 for developers (en-US)
* Firefox 52 for developers (en-US)
* Firefox 51 for developers (en-US)
* Firefox 50 for developers (en-US)
* Firefox 49 for developers (en-US)
* Firefox 48 for developers (en-US)
* Firefox 47 for developers (en-US)
* Firefox 46 for developers (en-US)
* Firefox 45 for developers (en-US)
* Firefox 44 for developers (en-US)
* Firefox 43 for developers (en-US)
* Firefox 42 for developers (en-US)
* Firefox 41 for developers
* Firefox 40 for developers (en-US)
* Firefox 39 for developers (en-US)
* Firefox 38 for developers (en-US)
* Firefox 37 for developers (en-US)
* Firefox 36 for developers (en-US)
* Firefox 35 for developers (en-US)
* Firefox 34 for developers (en-US)
* Firefox 33 for developers
* Firefox 32 for developers
* Firefox 31 for developers
* Firefox 30 for developers (en-US)
* Firefox 29 for developers (en-US)
* Firefox 28 for developers (en-US)
Firefox 27 for developers
=========================

Web 开发者需要注意的变化
--------------

### 开发者工具

* 可以在调试器中监控到 DOM 事件。
* 查看器可以直接编辑元素的 html 源码，不再需要安装额外的扩展。
* 可以在查看器中直接预览背景图片和颜色值。
* 可以输出 reflow 日志。

更多详情，请看这篇文章.

### CSS

* `CSS `cursor` 属性值中 -moz-grab` 和 `-moz-grabbing` 关键字脱前缀，成为 `grab` 和 `grabbing` (Firefox bug 880672).
### HTML

* 桌面浏览器上实现了`<input type = "color">`
### JavaScript

EcmaScript 6 (Harmony) 实现了：

* 展开运算符支持在函数调用时的实参左边位置使用 (Firefox bug 762363).
* 实现了多个数学函数 `Math.hypot()` (Firefox bug 896264).
### Interfaces/APIs/DOM

*No change.*

### MathML

*No change.*

### SVG

*No change.*

附加组件和 Mozilla 开发者需要注意的变化
------------------------

* 移除了 `downloads-indicator`, 你应该使用 `downloads-button` 元素来代替。
* Firefox 不再使用 `chrome://browser/skin/downloads/indicator.css` 样式。
参见
--

* Site Compatibility for Firefox 27
### 更早版本

* Firefox 26 for developers
* Firefox 25 for developers
* Firefox 24 for developers
* Firefox 23 for developers (en-US)
* Firefox 22 for developers
* Firefox 21 for developers
* Firefox 20 for developers
* Firefox 19 for developers
* Firefox 18 for developers
* Firefox 17 for developers (en-US)
* Firefox 16 for developers (en-US)
* Firefox 15 for developers (en-US)
* Firefox 14 for developers
* Firefox 13 for developers (en-US)
* Firefox 12 for developers (en-US)
* Firefox 11 for developers (en-US)
* Firefox 10 for developers (en-US)
* Firefox 9 for developers (en-US)
* Firefox 8 for developers (en-US)
* Firefox 7 for developers (en-US)
* Firefox 6 for developers (en-US)
* Firefox 5 for developers (en-US)
* Firefox 4 for developers (en-US)
* Firefox 3.6 for developers (en-US)
* Firefox 3.5 for developers (en-US)
* Firefox 3 for developers
* Firefox 2 for developers (en-US)
* Firefox 1.5 for developers (en-US)
Firefox 33 for developers
=========================

普通 Web 开发者应该注意的变化
-----------------

### Developer Tools

*No change.*

### CSS

* 实现了 @counter-style 规则（Firefox bug 966166）。
* **-moz-ethiopic-numeric** 去除前缀（Firefox bug 985825）。
* 支持了**disclosure-open/disclosure-closed** 计数器样式（Firefox bug 982355）。
### HTML

*No change.*

### JavaScript

* 移除了非标准的 `Number.toInteger()` 方法（Firefox bug 1022396）。
### Interfaces/APIs/DOM

*No change.*

### MathML

*No change.*

### SVG

*No change.*

### Audio/Video

*No change.*

Security
--------

*No change.*

附加组件 和 Mozilla 开发者应该注意的变化
-------------------------

*No change.*

参见
--

* Site Compatibility for Firefox 33
### 更早版本

* Firefox 32 for developers
* Firefox 31 for developers
* Firefox 30 for developers (en-US)
* Firefox 29 for developers (en-US)
* Firefox 28 for developers (en-US)
* Firefox 27 for developers
* Firefox 26 for developers
* Firefox 25 for developers
* Firefox 24 for developers
* Firefox 23 for developers (en-US)
* Firefox 22 for developers
* Firefox 21 for developers
* Firefox 20 for developers
* Firefox 19 for developers
* Firefox 18 for developers
* Firefox 17 for developers (en-US)
* Firefox 16 for developers (en-US)
* Firefox 15 for developers (en-US)
* Firefox 14 for developers
* Firefox 13 for developers (en-US)
* Firefox 12 for developers (en-US)
* Firefox 11 for developers (en-US)
* Firefox 10 for developers (en-US)
* Firefox 9 for developers (en-US)
* Firefox 8 for developers (en-US)
* Firefox 7 for developers (en-US)
* Firefox 6 for developers (en-US)
* Firefox 5 for developers (en-US)
* Firefox 4 for developers (en-US)
* Firefox 3.6 for developers (en-US)
* Firefox 3.5 for developers (en-US)
* Firefox 3 for developers
* Firefox 2 for developers (en-US)
* Firefox 1.5 for developers (en-US)
Gecko 1.9 Changes affecting websites
====================================

此页设法提供在 Gecko 1.8 和 Gecko 1.9 之间的变动概要，这些变动可能会影响某些网站的行为或网页渲染。

参见 Firefox 3 开发者参考

事件
--

### 捕获 load 事件监听

在 Gecko 1.8 中，不能在图片上设置 load 事件监听。在 Gecko 1.9 中，已在 Firefox bug 234455 中修复。但是在某些网站中，由于捕获 load 事件的事件监听器不正确而导致问题。参见 Firefox bug 335251 中的讨论。要修复这个问题，出错的页面不再需要设置事件监听器。

例如，如下：


```js
window.addEventListener("load", yourFunction, true);
```


应该更改为：


```js
window.addEventListener("load", yourFunction, false);
```


事件捕获如何工作的解释，参见 DOM Level 2 事件捕获

### preventBubble 已被移出

### 少许旧的事件 API 不再被支持

DOM
---

### WRONG\_DOCUMENT\_ERR

范围
--

### intersectsNode 已被移出

### compareNode 已被移出

HTML
----

### <object> 中的许多 bug 已经修复
联系我们
====

你可以从以下链接获得帮助，时刻关注关于附加组件的最新消息，并且给予我们反馈。

### 附加组件论坛

到附加组件交流论坛讨论附加组件的任何方面并获得帮助。

### 邮件列表

**dev-addons 邮件列表**已于 2020 年 12 月 1 日弃用。你可以查看 dev-addons 的存档找到过去关于 WebExtensions API 和 addons.mozilla.org 的讨论。

### 在线聊天

Matrix 是一个开放的轻量级协议，用于去中心化的实时通信。有关如何加入 Mozilla Matrix 频道的信息，请参阅 Mozilla Wiki 上的 Matrix 页面。

* Add-ons（扩展、主题和 WebExtensions API 的支持）
* AMO（有关 addons.mozilla.org 的讨论）
### 报告问题

#### 安全漏洞

如果你发现了一个附加组件的安全漏洞，即使该附加组件未托管在 Mozilla 站点上，也请通知我们。我们将与开发人员一起解决此问题。请向 Bugzilla 提交或向 amo-admins@mozilla.com 发送邮件以秘密地报告安全漏洞。

#### addons.mozilla.org (AMO) 的问题

如果你发现网站有问题，我们很乐意修复它。请提交错误报告，并尽可能详细地说明。
浏览器扩展
=====

扩展或者说是附加组件，拥有可以修改、增强浏览器的能力。用于 Firefox 的扩展，使用跨浏览器的 WebExtensions API 技术来构建。

用于构建 Firefox 扩展的技术在很大程度上与被基于 Chromium 内核的浏览器（例如谷歌 Chrome 浏览器，微软 Edge 浏览器，Opera 浏览器，Vivaldi 浏览器）所支持的扩展 API 所兼容。在大多数情况下，为基于 Chromium 内核浏览器而写的插件只需要少许修改就可以在 Firefox 中运行。

核心资源
----

指南

无论你是刚开始学习还是在寻找更加高级的建议，你可以从我们大量的教程和指南中学习扩展是如何工作的以及如何使用 WebExtensions API。

参考资料

获取全面的关于方法，属性，类型，事件等 WebExtensions APIs 的细节部分以及关于 manifest 键列表的全部细节。

Firefox 工作流

了解如何为 Firefox 构建、发布扩展：在扩展工作坊了解开发者工具，发布和移植的基本原理。


**备注：** 如果你有任何的想法、问题或者是需要帮助，可以在社区论坛和在 Matrix 上的附加组件房间联系到我们。

开始
--

 在构建你的第一个扩展之前，先去了解下扩展都可以做些什么。学习扩展剖析章节，对扩展开发、发布工作流和 Firefox 风格 (en-US)有一个大致的了解。在扩展示例中
 你会有一个全面的选择来进行更深入的探索，这些示例你都是可以正常运行在 Firefox 中的。

概念
--

从 JavaScript API 概览开始，到内容脚本,模式匹配,使用文件 (en-US),国际化,内容安全策略以及更加高阶的主题，例如原生通信,使用开发者工具 API,原生应用清单获取详尽的信息来加深对扩展的概念理解。

用户界面
----

利用这些示例代码来了解你可以在扩展中使用的所有用户界面组件。

如何做
---

你将会找到大量的教程来开始，根据你经常使用的范例，例如使用 Tabs API,在工具栏上增加一个按钮儿到更加高阶的主题，例如拦截 HTTP 请求，语境认同 (en-US)，

Firefox 工作流
-----------

当你已经准备好创建你的 Firefox 扩展或者是移植你的 Chrome 扩展时，前往扩展工作坊。它包含了以下细节：

* Firefox 工作流，例如在开发时临时安装扩展、调试、获取对的权限，等等。
* web-ext 开发者工具。
* 移植谷歌 Chrome 浏览器扩展，桌面程序与安卓的差异，等等。
* 预览发布，推广你的扩展，扩展生命周期的最佳实践。
参考资料
----

### JavaScript APIs

获取全面的关于方法，属性，类型，事件等 JavaScript APIs 的细节部分。在那儿你也可以获取到每个 API 与主流浏览器的兼容性的详尽细节。大多数的参考资料页面都包含使用这些 API 的代码示例和扩展示例的链接。

### Manifest 键列表

你可以从这里获取键列表详尽的细节，包括它们所有的属性和设置。以及关于每个键与主流浏览器的兼容性的详尽细节。
manifest.json 的浏览器兼容性
=====================

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

参见
--

* JavaScript API 的浏览器支持
API
===

WebExtension JavaScript API 可以在附加组件的后台脚本和附加组件定义的任何浏览器动作或页面动作中使用。这里的部分 API 也可以通过附加组件的内容脚本访问（见内容脚本指南列表）。

要使用更强大的 API，你需要在你的 manifest.json 中申请权限。

你可以使用 `browser` 命名空间访问这些 API。


```js
function logTabs(tabs) {
  console.log(tabs);
}

browser.tabs.query({ currentWindow: true }, logTabs);
```


许多 API 为异步，返回一个 `Promise`：


```js
function logCookie(c) {
  console.log(c);
}

function logError(e) {
  console.error(e);
}

var setCookie = browser.cookies.set({ url: "https://developer.mozilla.org/" });
setCookie.then(logCookie, logError);
```


请注意，这不同于 Google Chrome 的扩展系统，它使用 `chrome` 而非 `browser` 名字空间，并且对异步函数使用回调而不是 promises。为辅助移植，Firefox 实现的 WebExtensions 支持 `chrome` 和回调以及 `browser` 和 promises。Mozilla 也写了一个 polyfill 使使用 `browser` 和 promises 的代码能不经修改的在 Chrome 中使用：https://github.com/mozilla/webextension-polyfill。

微软 Edge 使用 `browser` 名字空间，但尚不支持基于 promise 的异步 API。目前在 Edge 中，异步 API 必须使用回调。

并非所有浏览器都支持这里的所有 API：详情见浏览器对 JavaScript API 的支持。

alarms在未来一个特定的时间运行的计划任务代码。这很像`setTimeout()` (en-US)和`setInterval()` (en-US)，不过这些函数仅可以按需使用而不能在后台页面工作。

bookmarks此WebExtensions `bookmarks` API 允许一个附加组件和浏览器的书签系统交互和操作。你可以用它给页面加书签，获取已有的书签，以及编辑，移除和管理书签。

browserAction添加按钮到浏览器的工具栏。

clipboardWebExtention 的 `clipboard` API 增加了一个将图像复制到剪贴板的函数。目前，这个 API 仅支持复制图像，但我们期望它未来支持复制文本和 HTML（译者注：原文如此，可能是指被支持复制富内容之后的标准剪贴板 API 取代）。

contentScripts使用此 API 以注册内容脚本。“注册内容脚本”意味着浏览器会将给定的内容脚本插入到每个与给定的 URL 模式相匹配的页面中。

contextMenus在浏览器菜单中添加条目。此 API 基于 Chrome 的“contextMenus”API 构建，该 API 可让 Chrome 扩展程序将项目添加到浏览器的上下文菜单中。 `browser.menus` API 为 Chrome 的 API 添加了一些功能，特别是可以将项目添加到浏览器的“工具”菜单以及上下文菜单中。在 Firefox 55 之前，这个 API 最初也被命名为`contextMenus`，并且这个名字被保留为别名，所以你可以使用`contextMenus`编写在 Firefox 和其他浏览器中工作的代码。你需要拥有“menus”（或别名" contextMenus "）权限来使用此 API。

cookies使用 WebExtensions 获取或设置 cookies, 并且在修改时能够获得通知。

downloads启用与浏览器的下载管理器交互的扩展。你可以使用这个 API 模块来下载文件、取消、暂停、恢复下载和在文件管理器中显示下载的文件。

find在网页中查找文本，并突出显示匹配项。

history使用 `history` API 与浏览器历史记录进行交互。

i18n国际化扩展的函数。你可以使用这些 api 从与扩展打包在一起的本地化文件中获取本地化字符串，查找浏览器的当前语言，并查找其 Accept-Language header头的值。

idle找出用户系统何时处于空闲，锁定或活动状态。

proxy使用 proxy API 来代理 web 请求。你可以使用 **``proxy.onRequest``** 事件监听器来拦截 web 请求，并且返回一个可以描述是否代理并且怎样代理它们的对象。

runtime该模块提供关于附加组件以及运行环境的信息。

storage使浏览器扩展能够储存及获取数据，以及监听储存的数据的变化。

tabs与浏览器标签系统进行交互。

webRequest为发出的 HTTP 请求在不同阶段添加事件监听器。事件监听器可以接收到请求的详细信息，也可以修改或取消请求。

windows与浏览器窗口互动。你可以使用此 API 获取有关已打开窗口的信息，以及打开、修改和关闭窗口。你也可以监听窗口的打开、关闭和其激活事件。
用户操作
====

一些 WebExtension API 执行的功能通常是由于用户操作而执行的。例如：

* 带有弹出窗口的浏览器操作会在用户单击时显示弹出窗口，但还有一个 `browserAction.openPopup` (en-US) API 允许扩展程序以编程方式打开弹出窗口。
* 如果扩展程序添加了侧边栏，用户通常通过浏览器内置的用户界面的某些部分（例如“视图/侧边栏”菜单）打开它。但还有一个 `sidebarAction.open` (en-US) API 允许扩展程序以编程方式打开其侧边栏。

为了遵循“没有意外”的原则，这类 API 只能从用户操作的处理器内部调用。用户操作包括以下内容：

* 点击扩展程序的浏览器操作或页面操作。
* 选择扩展定义的上下文菜单项。
* 激活扩展定义的键盘快捷键（仅从 Firefox 63 开始，被视为用户操作）。
* 点击与扩展程序捆绑在一起的页面中的按钮。

例如：


```js
function handleClick() {
  browser.sidebarAction.open();
}

browser.browserAction.onClicked.addListener(handleClick);
```


注意，普通网页中的用户操作不被视为用于此目的的用户操作。例如，如果用户单击普通网页中的按钮，并且内容脚本已为该按钮添加点击的处理器，并且在该处理器中向扩展的后台页面发送消息，那么后台页面的消息处理器不被视为正在处理用户操作。

此外，如果用户输入的处理器等待 promise，那么它作为用户输入处理器的状态将会丢失。例如：


```js
async function handleClick() {
  let result = await someAsyncFunction();

  // 这将失败，因为处理器丢失了其“用户操作处理器”状态
  browser.sidebarAction.open();
}

browser.browserAction.onClicked.addListener(handleClick);
```
扩展是什么？
======

**备注：** 如果你对浏览器扩展的基础概念已经熟悉，跳过这个部分去学习扩展文件是如何组织在一起的。然后，利用参考文档去构建你的扩展。访问扩展工作坊学习关于浏览器扩展工作流，测试，发布的更多内容。

扩展为浏览器添加了特性与功能。它通过我们所熟悉的 Web 技术-HTML，CSS 还有 JavaScript 来创建。扩展可以利用与 JavaScript 相同的网页 API，但是扩展也可以访问它自己专有的 JavaScript API。这意味着，和在网页里编码相比，在扩展中你可以做到更多的事情。以下是其中你可以做到的一些事情：

**提升或者补充网站功能**: 利用扩展来实现额外的浏览器内特性或者来自你网站的信息。允许用户搜集他们访问过的页面细节来提升你所提供的服务。

![Amazon 附加组件示例提供比价功能](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions/amazon_add_on.png)

示例：亚马逊助手，OneNote Web Clipper，Grammarly for Firefox

**让用户展现他们的个性**: 浏览器扩展可以操控网页的内容；例如，让用户在每个他们访问的页面上添加最喜欢的 logo 或者图片作为背景。扩展也可以让用户更新 Firefox 的界面，就像独立的主题扩展一样。

![My Web New Tab 附加组件展现蝙蝠侠主题](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions/myweb_new_tab_add_on.png)

示例：MyWeb New Tab, Tabliss, 和 VivaldiFox

**从网页中添加或者删除内容**: 你可能想要帮助用户从网页中阻止一些侵扰的广告，当网页中提到一个国家或者城市的时候提供旅游指南，或者重组页面的内容来提供一个连续的阅读体验。利用可以访问和更新一个页面里的 HTML 和 CSS 的能力，扩展可以帮助用户以他们想要的形式来查看网页。

![uBlock origin 附加组件示例和拦截跟踪器统计](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions/ublock_origin_add_on.png)

示例：uBlock Origin, Reader, 和 Toolbox for Google Play Store™

**添加工具和新的浏览特性**: 给任务面板添加新特性，或者从 URL 地址，超链接，或者页面文字生成二维码。有了灵活的界面选项和 WebExtensions APIs 的能力，你可以很容易的向浏览器添加新的特性。并且，你可以改善几乎任何网站的特性和功能，而不必是你自己的网站。

![二维码生成器附加组件示例](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions/qr_code_image_generator_add_on.png)

示例：Swimlanes for Trello and Tomato Clock

**游戏**: 通过离线游玩的特性或者探索新游戏的可能性来提供传统计算机游戏的功能；例如，把游戏性融入到每天的网页浏览中。

![](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions/asteroids_in_popup_add_on_.png)

示例：Asteroids in Popup, Solitaire Card Game New Tab, 和 2048 Prime.

**添加开发工具**: 你可以为你的业务提供网站开发工具或者开发一个有用的技术或者你想分享的网站开发方法。无论如何，你可以通过在开发者工具栏上添加一个新的标签来增强内置的 Firefox 开发者工具。

![axe 无障碍功能测试附加组件示例](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/What_are_WebExtensions/axe_developer_tools_add_on.png)

示例：Web Developer, Web React Developer Tools, 和 aXe Developer Tools

Firefox 扩展使用 WebExtensions APIs来构建，这是一种用以开发扩展的跨浏览器系统。在很大程度上，它与 Google Chrome 和 Opera 所支持的扩展 API 兼容。在大多数情况下，为这些浏览器所写的扩展只需要少量修改就可以在 Firefox 和 Microsoft Edge 上运行。这些 API 也完全兼容多进程 Firefox。

如果你有想法或者问题，或者在迁移旧的附加组件到 WebExtensions API时需要帮助，可以在 dev-addons 讨论版块或者 Matrix 上的 Add-ones room 与我们联系。

接下来呢？
-----

* 在你的第一个扩展中轻松地开发一个简单的扩展。
* 在扩展剖析中了解一个扩展的结构。
* 在示例扩展中尝试一些示例扩展。
Content Security Policy
=======================

使用 WebExtension API 开发的插件默认应用了内容安全策略 (Content Security Policy, 缩写 CSP)。这限制了可以加载的 <script> 和 <object> 的资源来源，并且禁止了潜在的不安全用法如 `eval()`.

这篇文章简单地解释了 CSP 是什么，默认的策略是什么，这对插件来说意味着什么，以及插件如何改变默认 CSP。

Content Security Policy（CSP）是一种避免网站意外执行包含有恶意的内容的机制。网站通过使用服务端发送的 HTTP 标头指定 CSP。CSP 主要关注指定各种内容的合法来源，如脚本和嵌入式插件。例如，网站可以使用它来告诉浏览器应该只执行来自网站自身的 JavaScript，而不应该执行其他来源的脚本。CSP 还可以指导浏览器禁止潜在危险行为，如 `eval()`的使用。

和网页一样，插件可以加载其他来源的内容。例如浏览器的弹出窗口可以指定为一个 HTML 文档，它同样可以包含不同来源的 JavaScript 和 CSS，就像一个普通的网页一样。


```html
<!doctype html>

<html>
  <head>
    <meta charset="utf-8" />
  </head>

  <body>
    <!--Some HTML content here-->

    <!--
 Include a third-party script.
 See also https://developer.mozilla.org/zh-CN/docs/Web/Security/Subresource\_Integrity.
 -->
    <script
 src="https://code.jquery.com/jquery-2.2.4.js"
 integrity="sha256-iT6Q9iMJYuQiMWNd9lDyBUStIq/8PuOW33aOqmvFpqI="
 crossorigin="anonymous"></script>

    <!-- Include my popup's own script-->
    <script src="popup.js"></script>
  </body>
</html>
```


和网站相比，插件可以访问特权 API，因此一旦它们被恶意代码破坏，风险就更大。因此：

* 插件默认运行在一个相当严格的安全策略下。参考 default content security policy.
* 插件的作者可以通过使用 manifest.json 中的 `content_security_policy` 关键词改变这种默认策略，但是允许的策略仍然有一定的限制。参考 `content_security_policy` (en-US).
默认内容安全策略
--------

对插件的默认内容安全策略如下：
```

"script-src 'self'; object-src 'self';"
```


这会被应用在任何没有明确在 manifest.json 中的`content_security_policy` (en-US) 项设置自己的内容安全策略的插件中。它有以下几种效果：

* 你只能将本地的 <script> 和 <object> 资源加载到插件中。
* 插件无法将字符串转换为 JavaScript 执行。
* 内联 JavaScript 不会被执行。
### script 和 object 资源的位置

在默认 CSP 下你只能加载相对插件来说本地的 <script> 和 <object> 资源。例如假设插件文档中存在这样一条语句：


```html
<script src="https://code.jquery.com/jquery-2.2.4.js"></script>
```


这不会加载请求的资源：它会安静地失败，并且你所期望看到的任何来自该资源的对象都不会出现。对于这种情况有两种解决办法：

* 下载该资源，打包进你的插件，然后引用它。
* 使用 `content_security_policy` (en-US) 允许你所需要的资源。
### eval() 和 friends

默认 CSP 下插件不被允许像 JavaScript 一样执行字符串。这意味着以下情况都被禁止：


```js
eval("console.log('some output');");
```



```js
window.setTimeout("alert('Hello World!');", 500);
```



```js
var f = new Function("console.log('foo');");
```

### 内联 JavaScript

默认 CSP 下内联 JavaScript 不被执行。这不仅不允许将 JavaScript 直接放在 `<script>` 标签中间，也不允许内联事件句柄。即以下内容被禁止：


```html
<script>
 console.log("foo");
</script>
```



```html
<div onclick="console.log('click')">Click me!</div>
```


如果你正在使用类似 `<body onload="main()">` 的代码在页面加载时运行你的脚本，请使用监听器监听DOMContentLoaded 或者 load 代替。