[zh-CN] sync Getting started

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)
+![The components of a web extension. The manifest.JSON must be present in all extensions. It provides pointers to background pages, content scripts, browser actions, page actions, options pages, and web accessible resources. Background pages consist of HTML and JS. Content scripts consist of JS and CSS. The user clicks on an icon to trigger browser actions and page actions and the resulting pop-up consists of HTML, CSS, and JS. Options pages consist of HTML, CSS, and 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

@@ -9,11 +9,12 @@ slug: Mozilla/Add-ons/WebExtensions/Examples
 
 这些示例工作在 Firefox Nightly 下：大部分示例在 Firefox 的早期版本中也能够运行，请检查扩展 manifest.json 文件中的 [strict_min_version](/zh-CN/Add-ons/WebExtensions/manifest.json/applications) 键。
 
+> **Warning:** Some examples work only on specific domains or pages. Details of any restrictions are provided in each example's readme file. None of the examples work in private browsing windows by default, see [Extensions in Private Browsing](https://support.mozilla.org/zh-CN/kb/extensions-private-browsing#w_enabling-or-disabling-extensions-in-private-windows) for details.
 如果你想尝试这些示例，有下面三个选择：
 
-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. 克隆代码库，进入 [`build`](https://github.com/mdn/webextensions-examples/tree/main/build) 文件夹。该文件夹包含所有示例的已构建、带签名版本。你可以在 Firefox 中打开（菜单栏->文件->打开文件）并且永久安装这些扩展。这些扩展和直接从 [addons.mozilla.org](https://addons.mozilla.org/zh-CN/firefox/) 安装的扩展别无二致。
 
 > **警告：** 不要提交这些关于 WebExtension 例子的示例到 AMO (addons.mozilla.org) 上去，你无需为附加组件签名就能运行 WebExtension 的示例。只要按照上面的步骤来就可以了。
 

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 add-on example providing price comparison features](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 add-on showing a Batman theme](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 add-on example with blocked tracker statistics](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 generator add-on example](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 accessibility testing addon example](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_
 
 现在你可以将你对浏览器扩展的想法变成现实了。在开始这个过程之前 ，值得了解一些有助于使其顺利进行的事情。
 
+You can find more about many of the things discussed on this page on [Extension Workshop](https://extensionworkshop.com), a website dedicated to helping you write, test, publish, and distribute extensions for 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)的指南。
+- A collection of how-to guides on achieving key tasks in your extensions or making use of the JavaScript APIs.
 - [JavaScript API](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs) 的完整参考指南。
 - [Manifest 键](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json)的完整参考指南。
+
+You'll also want to head on over to Extension Workshop where you'll find everything you need to know about creating extensions for Firefox, including:
+
+- [an overview of the Firefox extension features](https://extensionworkshop.com/#about)
+- [details of the tools and processes for developing and testing](https://extensionworkshop.com/documentation/develop/)
+- [how to publish your extension on addons.mozilla.org or distribute it yourself](https://extensionworkshop.com/documentation/publish/)
+- [how to manage your published extension](https://extensionworkshop.com/documentation/manage/)
+- [an enterprise guide for developing and using extensions](https://extensionworkshop.com/documentation/enterprise/)
+- [how to develop themes for Firefox](https://extensionworkshop.com/documentation/themes/)
+- [details about the Firefox developer communities](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)
+![The manifest.json file includes icons, browser actions, including popups, and web accessible resources. The choose beast javascript popup resource calls in the beastify script.](untitled-1.png)
 
 这是一个非常简单的扩展，但也展示了 WebExtensions API 的许多基本概念：
 
@@ -60,7 +60,7 @@ 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",
+  "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/zh-CN/Add-ons/WebExtensions/Examples#beastify",
   "homepage_url": "https://github.com/mdn/webextensions-examples/tree/master/beastify",
   "icons": {
     "48": "icons/beasts-48.png"
@@ -81,7 +81,6 @@ cd beastify
     "beasts/turtle.jpg",
     "beasts/snake.jpg"
   ]
-
 }
 ```
 
@@ -95,7 +94,7 @@ 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。
 
@@ -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)
+![A brown frog.](frog.jpg)
+
+![An emerald tree boa with white stripes.](snake.jpg)
+
+![A red-eared slider turtle.](turtle.jpg)
 
 ## 测试
 
@@ -437,11 +440,11 @@ Firefox 45 开始，你可以临时从硬盘中安装扩展
 
 然后你应该已经看到扩展图标出现在了 Firefox 的工具条上：
 
-{{EmbedYouTube("sAM78GU4P34")}}
+![The beastify icon in the Firefox toolbar](beastify_icon.png)
 
 打开一个网页，然后点击图标，选择一个动物，然后观察网页的变化
 
-{{EmbedYouTube("YMQXyAQSiE8")}}
+![A page replaced with the image of a turtle](beastify_page.png)
 
 ## 用命令行开发
 
@@ -451,3 +454,12 @@ Firefox 45 开始，你可以临时从硬盘中安装扩展
 cd beastify
 web-ext run
 ```
+
+## What's next?
+
+Now that you've created a more advanced WebExtension for Firefox:
+
+- [read about the anatomy of an extension](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension)
+- [explore the extension examples](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Examples)
+- [find out what you need to develop, test, and publish your extension](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/What_next_)
+- [take your learning further](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/What_next_#continue_your_learning_experience).