[zh-CN] sync Getting started part of web-ext (#14030)

Co-authored-by: Fina <[email protected]>
Co-authored-by: A1lo <[email protected]>

files/zh-cn/mozilla/add-ons/webextensions/anatomy_of_a_webextension/index.md

@@ -19,9 +19,9 @@ slug: Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension
 - [内容脚本](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#内容脚本): 扩展中包含的 JavaScript，你可以注入它们到网页中。
 - [网络可访问资源](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension#网络可访问资源): 使打包好的内容可用于网页与内容脚本中。
 
-![](webextension-anatomy.png)
+![Web 扩展的组件。manifest.JSON 是所有扩展里都必须存在的。它提供指向后台页面、内容脚本、浏览器动作、页面动作、选项页和 web 可访问资源的引用。后台页面由 HTML 和 JS 组成。内容脚本由 JS 和 CSS 组成。用户单击扩展图标能够触发浏览器动作和页面动作，由此产生的弹出窗口由 HTML、CSS 和 JS 组成。选项页由 HTML、CSS 和 JS 组成。](webextension-anatomy.png)
 
-浏览其他的详细信息请到 [manifest.json](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 。
+参见 [`manifest.json`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json) 参考页以了解详情。
 
 除了这些 manifest 中已经列举的项之外，扩展也可以携带额外的 [Extension pages](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/user_interface/Extension_pages) 和支持的文件。
 

files/zh-cn/mozilla/add-ons/webextensions/examples/index.md

@@ -5,18 +5,20 @@ slug: Mozilla/Add-ons/WebExtensions/Examples
 
 {{AddonSidebar}}
 
-为帮助了解如何开发扩展，我们维护了一个包含简单扩展示例的代码仓库在<https://github.com/mdn/webextensions-examples>. 本文描述了仓库代码中所使用的 WebExtension APIs。
+为帮助了解如何开发扩展，我们维护了一个包含简单扩展示例的代码仓库在 <https://github.com/mdn/webextensions-examples>。本文描述了仓库代码中所使用的 WebExtension API。
 
-这些示例工作在 Firefox Nightly 下：大部分示例在 Firefox 的早期版本中也能够运行，请检查扩展 manifest.json 文件中的 [strict_min_version](/zh-CN/Add-ons/WebExtensions/manifest.json/applications) 键。
+这些示例工作在 Firefox Nightly 下：大部分示例在 Firefox 的早期版本中也能够运行，请检查扩展 manifest.json 文件中的 [strict_min_version](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/browser_specific_settings) 键。
+
+> **警告：** 有些示例只能在特定的域或页面下运行。每个示例的限制都已在其自述文件中详述。默认情况下，这些示例都不能在浏览器的隐私浏览窗口中运行，参阅[隐私浏览下的扩展](https://support.mozilla.org/zh-CN/kb/隐私浏览窗口中的扩展#w_zai-yin-si-chuang-kou-zhong-kai-qi-huo-guan-bi-kuo-zhan)了解详情。
 
 如果你想尝试这些示例，有下面三个选择：
 
-1. 克隆代码库，通过 ["临时载入附加组件"](/zh-CN/Add-ons/WebExtensions/Temporary_Installation_in_Firefox) 功能直接从源文件夹中载入扩展组件。再重启浏览器前该扩展将一直存在。
-2. 克隆代码库，使用 [web-ext](/zh-CN/Add-ons/WebExtensions/Getting_started_with_web-ext) 命令行工具运行安装了扩展的 Firefox。
-3. 克隆代码库，进入 [build](https://github.com/mdn/webextensions-examples/tree/main/build) 文件夹。该文件夹包含所有示例的已构建、带签名版本。你可以在 Firefox 中打开（菜单栏->文件->打开文件）并且永久安装这些扩展。这些扩展和直接从 [addons.mozilla.org](https://addons.mozilla.org/en-US/firefox/) 安装的扩展别无二致。
+1. 克隆代码库，通过[“临时载入附加组件”](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/)功能直接从源文件夹中载入扩展组件。在重启浏览器前，该扩展将一直存在。
+2. 克隆代码库，使用 [`web-ext`](https://extensionworkshop.com/documentation/develop/getting-started-with-web-ext/) 命令行工具运行安装了扩展的 Firefox。
+3. 克隆代码库，在 Firefox 中使用**文件**>**打开文件**，在 [`build`](https://github.com/mdn/webextensions-examples/tree/main/build) 文件夹中找到这些例子。`build` 文件夹包含所有例子的构建和签名版本。这样就可以永久地安装这些例子了。
 
-> **警告：** 不要提交这些关于 WebExtension 例子的示例到 AMO (addons.mozilla.org) 上去，你无需为附加组件签名就能运行 WebExtension 的示例。只要按照上面的步骤来就可以了。
+> **警告：** 不要提交这些关于 WebExtension 例子的示例到 AMO（addons.mozilla.org）上去，你无需为附加组件签名就能运行 WebExtension 的示例。只要按照上面的步骤来就可以了。
 
-如果你想对代码仓库贡献，[给我们发送 pull request！](https://github.com/mdn/webextensions-examples/blob/master/CONTRIBUTING.md)
+如果你想对代码仓库贡献，[给我们发送 pull request！](https://github.com/mdn/webextensions-examples/blob/main/CONTRIBUTING.md)
 
 {{WebExtAllExamples}}

files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.md

@@ -11,25 +11,25 @@ slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
 
 **提升或者补充网站功能**: 利用扩展来实现额外的浏览器内特性或者来自你网站的信息。允许用户搜集他们访问过的页面细节来提升你所提供的服务。
 
-![](amazon_add_on.png)
+![Amazon 附加组件示例提供比价功能](amazon_add_on.png)
 
 示例：[亚马逊助手](https://addons.mozilla.org/zh-CN/firefox/addon/amazon-browser-bar/)，[OneNote Web Clipper](https://addons.mozilla.org/zh-CN/firefox/addon/onenote-clipper/)，[Grammarly for Firefox](https://addons.mozilla.org/zh-CN/firefox/addon/grammarly-1/)
 
 **让用户展现他们的个性**: 浏览器扩展可以操控网页的内容；例如，让用户在每个他们访问的页面上添加最喜欢的 logo 或者图片作为背景。扩展也可以让用户更新 Firefox 的界面，就像独立的[主题扩展](https://extensionworkshop.com/documentation/themes/)一样。
 
-![](myweb_new_tab_add_on.png)
+![My Web New Tab 附加组件展现蝙蝠侠主题](myweb_new_tab_add_on.png)
 
 示例：[MyWeb New Tab](https://addons.mozilla.org/zh-CN/firefox/addon/myweb-new-tab/), [Tabliss](https://addons.mozilla.org/zh-CN/firefox/addon/tabliss/), 和 [VivaldiFox](https://addons.mozilla.org/zh-CN/firefox/addon/vivaldifox/)
 
 **从网页中添加或者删除内容**: 你可能想要帮助用户从网页中阻止一些侵扰的广告，当网页中提到一个国家或者城市的时候提供旅游指南，或者重组页面的内容来提供一个连续的阅读体验。利用可以访问和更新一个页面里的 HTML 和 CSS 的能力，扩展可以帮助用户以他们想要的形式来查看网页。
 
-![](ublock_origin_add_on.png)
+![uBlock origin 附加组件示例和拦截跟踪器统计](ublock_origin_add_on.png)
 
 示例：[uBlock Origin](https://addons.mozilla.org/zh-CN/firefox/addon/ublock-origin/), [Reader](https://addons.mozilla.org/zh-CN/firefox/addon/reader/), 和 [Toolbox for Google Play Store™](https://addons.mozilla.org/zh-CN/firefox/addon/toolbox-google-play-store/)
 
 **添加工具和新的浏览特性**: 给任务面板添加新特性，或者从 URL 地址，超链接，或者页面文字生成二维码。有了灵活的界面选项和 [WebExtensions APIs](/zh-CN/docs/Mozilla/Add-ons/WebExtensions) 的能力，你可以很容易的向浏览器添加新的特性。并且，你可以改善几乎任何网站的特性和功能，而不必是你自己的网站。
 
-![](qr_code_image_generator_add_on.png)
+![二维码生成器附加组件示例](qr_code_image_generator_add_on.png)
 
 示例：[Swimlanes for Trello](https://addons.mozilla.org/zh-CN/firefox/addon/swimlanes-for-trello/) and [Tomato Clock](https://addons.mozilla.org/zh-CN/firefox/addon/tomato-clock/)
 
@@ -41,7 +41,7 @@ slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions
 
 **添加开发工具**: 你可以为你的业务提供网站开发工具或者开发一个有用的技术或者你想分享的网站开发方法。无论如何，你可以通过在开发者工具栏上添加一个新的标签来增强内置的 Firefox 开发者工具。
 
-![](axe_developer_tools_add_on.png)
+![axe 无障碍功能测试附加组件示例](axe_developer_tools_add_on.png)
 
 示例：[Web Developer](https://addons.mozilla.org/zh-CN/firefox/addon/web-developer/), [Web React Developer Tools](https://addons.mozilla.org/zh-CN/firefox/addon/react-devtools/), 和 [aXe Developer Tools](https://addons.mozilla.org/zh-CN/firefox/addon/axe-devtools/)
 

files/zh-cn/mozilla/add-ons/webextensions/what_next_/index.md

@@ -7,6 +7,8 @@ slug: Mozilla/Add-ons/WebExtensions/What_next_
 
 现在你可以将你对浏览器扩展的想法变成现实了。在开始这个过程之前 ，值得了解一些有助于使其顺利进行的事情。
 
+你可以在[扩展工坊](https://extensionworkshop.com)上找到更多本页讨论的相关内容，这是一个致力于帮助编写、测试、发布和分发 Firefox 扩展的网站。
+
 ## 你的开发环境
 
 你不需要任何特殊的开发或构建环境工具来创建浏览器扩展：只需要一个简单的文本编辑器就可以创建出很好的浏览器扩展。当然，你可能一直在做 web 开发，有一套你想去配置的开发工具和环境。如果是这样，你需要意识到一些事情。
@@ -47,5 +49,16 @@ slug: Mozilla/Add-ons/WebExtensions/What_next_
 
 - 更多关于浏览器扩展背后的基本概念，从如何[使用 JavaScript API](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/API) 的细节开始。
 - 可供浏览器扩展使用的[用户界面组件](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/user_interface)的指南。
+- 一系列关于如何在扩展中实现关键任务与运用 JavaScript API 的指南。
 - [JavaScript API](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs) 的完整参考指南。
 - [Manifest 键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json)的完整参考指南。
+
+你还能在扩展工坊找到创建 Firefox 扩展所需要了解的所有东西，包括：
+
+- [Firefox 扩展特性一览](https://extensionworkshop.com/#about)
+- [用于开发及测试的工具和工序的详细介绍](https://extensionworkshop.com/documentation/develop/)
+- [如何在 addons.mozilla.org 上发布你的扩展以及如何自行分发扩展](https://extensionworkshop.com/documentation/publish/)
+- [如何管理你发布的扩展](https://extensionworkshop.com/documentation/manage/)
+- [面向企业的开发与使用扩展的指南](https://extensionworkshop.com/documentation/enterprise/)
+- [如何为 Firefox 开发主题](https://extensionworkshop.com/documentation/themes/)
+- [Firefox 开发者社区的详细介绍](https://extensionworkshop.com/community/)

files/zh-cn/mozilla/add-ons/webextensions/your_first_webextension/index.md

@@ -6,6 +6,7 @@ slug: Mozilla/Add-ons/WebExtensions/Your_first_WebExtension
 {{AddonSidebar}}
 
 > **备注：** 如果你熟悉浏览器扩展的基本概念，你可以跳过这一章节，去阅读[如何把扩展文件组合在一起](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension)。然后，阅读[参考文档](/zh-CN/docs/Mozilla/Add-ons/WebExtensions#reference)以构建你的扩展。访问 [Firefox 扩展工作站](https://extensionworkshop.com/?utm_source=developer.mozilla.org&utm_medium=documentation&utm_campaign=your-first-extension)，了解有关 Firefox 扩展测试、发布等更多信息。
+
 在这篇文章中，我们将为 Firefox 创建一个扩展。这个扩展只是给从“`mozilla.org`”或其任意子域名加载的任何页面添加一个红色边框。
 
 该示例的源代码位于 GitHub：<https://github.com/mdn/webextensions-examples/tree/main/borderify>

files/zh-cn/mozilla/add-ons/webextensions/your_second_webextension/index.md

@@ -26,7 +26,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/Walkthrough
 
 你可以想象这样的扩展的整体结构：
 
-![](untitled-1.png)
+![manifest.json 文件包含了图标、浏览器动作、弹出式窗口和网络可访问资源。Javascript 脚本在 beastify.js 里调用被选动物的弹出资源。](untitled-1.png)
 
 这是一个非常简单的扩展，但也展示了 WebExtensions API 的许多基本概念：
 
@@ -60,8 +60,8 @@ cd beastify
   "name": "Beastify",
   "version": "1.0",
 
-  "description": "Adds a browser action icon to the toolbar. Click the button to choose a beast. The active tab's body content is then replaced with a picture of the chosen beast. See https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Examples#beastify",
-  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
+  "description": "在工具栏添加一个互动图标。点击按钮选择一个动物，然后当前活动的标签页的内容会被替换成被选择的动物的图片。参见 https://developer.mozilla.org/zh-CN/Add-ons/WebExtensions/Examples#beastify",
+  "homepage_url": "https://github.com/mdn/webextensions-examples/tree/main/beastify",
   "icons": {
     "48": "icons/beasts-48.png"
   },
@@ -81,7 +81,6 @@ cd beastify
     "beasts/turtle.jpg",
     "beasts/snake.jpg"
   ]
-
 }
 ```
 
@@ -95,15 +94,15 @@ cd beastify
   - **`default_title`** 是可选的，用于按钮的提示。
   - **`default_popup`** 在你想要当用户点击按钮时显示出一个弹出窗时使用。而在这里，我们需要，所以我们列入这个键并将其指向扩展中包括的一个 HTML 文件。
 
-- **`web_accessible_resources`** 列出了页面可访问的资源。例如由于当前插件使用动物图像替换了页面原有的图像，当前的动物图像要可以被页面访问。
+- [`web_accessible_resources`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json/web_accessible_resources) 列出了页面可访问的资源。例如由于当前插件使用动物图像替换了页面原有的图像，当前的动物图像要可以被页面访问。
 
 需要注意，所有路径是相对于 manifest.json。
 
 ### 图标
 
 插件应该有一个图标。这个图标被用于显示在附加组件管理器中（可以通过"about:addons"来访问）。当前插件中 manifest.json 指定了我们插件的图标位于"icons/beasts-48.png"。
 
-创建“icons”文件夹，并将图标命名为“beasts-48.png”。你可以使用我们例子中的[图标](https://raw.githubusercontent.com/mdn/webextensions-examples/master/beastify/icons/beasts-48.png)，它是从 [Aha-Soft’s Free Retina iconset](http://www.aha-soft.com/free-icons/free-retina-icon-set/) 截取的，使用需要遵循该网站的许可证。
+创建“icons”文件夹，并将图标命名为“beasts-48.png”。你可以使用我们例子中的[图标](https://raw.githubusercontent.com/mdn/webextensions-examples/main/beastify/icons/beasts-48.png)，它是从 [Aha-Soft’s Free Retina iconset](http://www.aha-soft.com/free-icons/free-retina-icon-set/) 截取的，使用需要遵循该网站的许可证。
 
 如果你使用自己的图标，它的尺寸应该是 48<math><semantics><mo>×</mo><annotation encoding="TeX">\times</annotation></semantics></math>48 像素的。同时，对于高分辨率的设备，可以提供 96<math><semantics><mo>×</mo><annotation encoding="TeX">\times</annotation></semantics></math>96 像素的图片。此时，manifest.json 应当这样配置：
 
@@ -118,7 +117,7 @@ cd beastify
 
 工具栏按钮也需要一个图标，并且我们的 manifest.json 承诺我们会为该工具栏在 "icons/beasts-32.png" 提供一个图标。
 
-将一个图标命名为为 "beasts-32.png"并保存到"icons"文件夹。你可以使用例子中的[图片](https://github.com/mdn/webextensions-examples/blob/master/beastify/icons/beasts-32.png)，它是取自 [IconBeast Lite 图标集](http://www.iconbeast.com/free)并按其[许可协议](http://www.iconbeast.com/faq/)授权使用。
+将一个图标命名为为 "beasts-32.png"并保存到"icons"文件夹。你可以使用例子中的[图片](https://github.com/mdn/webextensions-examples/blob/main/beastify/icons/beasts-32.png)，它是取自 [IconBeast Lite 图标集](http://www.iconbeast.com/free)并按其[许可协议](http://www.iconbeast.com/faq/)授权使用。
 
 如果你没有弹出窗，用户点击的事件会直接分派到你的插件中。如果你制作了弹出窗，用户点击会直接打开这个弹出窗，而不会被分派给插件。本例中我们需要弹出窗，因此我们现在开始写它。
 
@@ -402,7 +401,11 @@ content script 做的第一件事是检查全局变量 `window.hasRun`：如果
 
 创建"beasts"文件夹，之后将图片放入并命名。你可以从 [GitHub 仓库](https://github.com/mdn/webextensions-examples/tree/main/beastify/beasts)或这里下载图片：
 
-![](frog.jpg)![](snake.jpg)![](turtle.jpg)
+![一只棕色青蛙。](frog.jpg)
+
+![一条有白色条纹的翡翠树蚺。](snake.jpg)
+
+![一只巴西龟。](turtle.jpg)
 
 ## 测试
 
@@ -437,11 +440,11 @@ Firefox 45 开始，你可以临时从硬盘中安装扩展
 
 然后你应该已经看到扩展图标出现在了 Firefox 的工具条上：
 
-{{EmbedYouTube("sAM78GU4P34")}}
+![Firefox 工具栏上的 beastify 扩展图标](beastify_icon.png)
 
 打开一个网页，然后点击图标，选择一个动物，然后观察网页的变化
 
-{{EmbedYouTube("YMQXyAQSiE8")}}
+![被替换成乌龟图像的页面。](beastify_page.png)
 
 ## 用命令行开发
 
@@ -451,3 +454,12 @@ Firefox 45 开始，你可以临时从硬盘中安装扩展
 cd beastify
 web-ext run
 ```
+
+## 接下来做什么？
+
+你已经创建了一个更加高级的 Firefox Web 扩展，接下来可以：
+
+- [阅读扩展剖析](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension)
+- [浏览扩展示例](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Examples)
+- [学习如何开发、测试、发布你的扩展](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/What_next_)
+- [进一步学习](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/What_next_#继续你的学习经历)。