Skip to content

Commit

Permalink
Apply suggestions from code review
Browse files Browse the repository at this point in the history
Co-authored-by: Fina <[email protected]>
  • Loading branch information
uiolee and BSPR0002 committed Jul 4, 2023
1 parent 3d3f4bc commit 6cf0b89
Show file tree
Hide file tree
Showing 5 changed files with 30 additions and 30 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ 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#网络可访问资源): 使打包好的内容可用于网页与内容脚本中。

![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)
![Web 扩展的组件。manifest.JSON 是所有扩展里都必须存在的。它提供指向后台页面、内容脚本、浏览器动作、页面动作、选项页和网络可访问资源的指针。后台页面由 HTML JS 组成。内容脚本由 JS CSS 组成。用户单击扩展图标能够触发浏览器动作和页面动作,由此产生的弹出窗口由 HTMLCSS JS 组成。选项页由 HTMLCSS JS 组成。](webextension-anatomy.png)

浏览其他的详细信息请到 [`manifest.json`](/zh-CN/docs/Mozilla/Add-ons/WebExtensions/manifest.json)

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ 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.
> **警告:** 有些示例只能在特定的域名或页面下运行。每个示例的所有限制都已在其自述文件中详述。默认情况下,这些示例都不能在浏览器的隐私浏览窗口中运行,参阅[隐私浏览窗口中的扩展](https://support.mozilla.org/zh-CN/kb/extensions-private-browsing#w_enabling-or-disabling-extensions-in-private-windows)了解详情。
如果你想尝试这些示例,有下面三个选择:

1. 克隆代码库,通过 ["临时载入附加组件"](https://extensionworkshop.com/documentation/develop/temporary-installation-in-firefox/) 功能直接从源文件夹中载入扩展组件。再重启浏览器前该扩展将一直存在。
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -11,25 +11,25 @@ slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions

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

![Amazon add-on example providing price comparison features](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/)一样。

![My Web New Tab add-on showing a Batman theme](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 example with blocked tracker statistics](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 generator add-on example](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/)

Expand All @@ -41,7 +41,7 @@ slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions

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

![Axe accessibility testing addon example](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/)

Expand Down
20 changes: 10 additions & 10 deletions files/zh-cn/mozilla/add-ons/webextensions/what_next_/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@ 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.
你可以在[扩展工坊](https://extensionworkshop.com)上找到更多本页讨论的相关内容,这是一个致力于帮助编写、测试、发布和分发 Firefox 扩展的网站。

## 你的开发环境

Expand Down Expand Up @@ -49,16 +49,16 @@ You can find more about many of the things discussed on this page on [Extension

- 更多关于浏览器扩展背后的基本概念,从如何[使用 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 的指南。
- [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:
你还能在扩展工坊找到创建 Firefox 扩展所需要了解的所有东西,包括:

- [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/)
- [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/)
Original file line number Diff line number Diff line change
Expand Up @@ -26,7 +26,7 @@ original_slug: Mozilla/Add-ons/WebExtensions/Walkthrough

你可以想象这样的扩展的整体结构:

![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)
![manifest.json 文件包含了图标、浏览器动作、弹出式窗口和网络可访问资源。Javascript 脚本 按在 beastify.js 里调用被选动物的弹出资源。](untitled-1.png)

这是一个非常简单的扩展,但也展示了 WebExtensions API 的许多基本概念:

Expand Down Expand Up @@ -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/zh-CN/Add-ons/WebExtensions/Examples#beastify",
"description": "在工具栏添加一个互动图标。点击按钮选择一个动物,然后当前活动的标签页的内容会被替换成被选择的动物的图片。参见 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"
Expand Down Expand Up @@ -401,11 +401,11 @@ content script 做的第一件事是检查全局变量 `window.hasRun`:如果

创建"beasts"文件夹,之后将图片放入并命名。你可以从 [GitHub 仓库](https://github.com/mdn/webextensions-examples/tree/main/beastify/beasts)或这里下载图片:

![A brown frog.](frog.jpg)
![一只棕色青蛙。](frog.jpg)

![An emerald tree boa with white stripes.](snake.jpg)
![一条有白色条纹的翡翠树蚺。](snake.jpg)

![A red-eared slider turtle.](turtle.jpg)
![一只巴西龟。](turtle.jpg)

## 测试

Expand Down Expand Up @@ -440,11 +440,11 @@ Firefox 45 开始,你可以临时从硬盘中安装扩展

然后你应该已经看到扩展图标出现在了 Firefox 的工具条上:

![The beastify icon in the Firefox toolbar](beastify_icon.png)
![Firefox 工具栏上的 beastify 扩展图标](beastify_icon.png)

打开一个网页,然后点击图标,选择一个动物,然后观察网页的变化

![A page replaced with the image of a turtle](beastify_page.png)
![被替换成乌龟图像的页面。](beastify_page.png)

## 用命令行开发

Expand All @@ -455,11 +455,11 @@ cd beastify
web-ext run
```

## What's next?
## 接下来做什么?

Now that you've created a more advanced WebExtension for Firefox:
你已经创建了一个更加高级的 Firefox Web 扩展,接下来可以:

- [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).
- [阅读扩展剖析](/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_#continue_your_learning_experience).

0 comments on commit 6cf0b89

Please sign in to comment.