diff options
author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
---|---|---|
committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.html | |
parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip |
initial commit
Diffstat (limited to 'files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.html')
-rw-r--r-- | files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.html | 61 |
1 files changed, 61 insertions, 0 deletions
diff --git a/files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.html b/files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.html new file mode 100644 index 0000000000..d327d3bd6a --- /dev/null +++ b/files/zh-cn/mozilla/add-ons/webextensions/what_are_webextensions/index.html @@ -0,0 +1,61 @@ +--- +title: 扩展是什么? +slug: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +tags: + - Add-ons + - WebExtensions + - 拓展 + - 附加组件 +translation_of: Mozilla/Add-ons/WebExtensions/What_are_WebExtensions +--- +<div>{{AddonSidebar}}</div> + +<p>扩展为浏览器添加特性与功能。它通过熟悉的 web 技术——HTML,CSS 还有 JavaScript 来创建。扩展可以利用网页上的 JavaScript 使用同一批 API,但扩展也可以访问扩展自己专用的 JavaScript API。这意味着,和在网页里编码相比,在扩展中,可以做到更加多的事情。以下是其中一些你可以做的事情的示例:</p> + +<p><strong>提升或补充网站功能:</strong>用扩展来实现额外的浏览器内的特性或者来自于你网站的信息。它允许用户搜集他们访问过的页面细节来提升你所提供的服务。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15808/Amazon_add_on.png"></p> + +<p>示例: <a href="https://addons.mozilla.org/zh-CN/firefox/addon/amazon-browser-bar/">亚马逊助手</a>, <a href="https://addons.mozilla.org/zh-CN/firefox/addon/onenote-clipper/">OneNote Web Clipper</a>, 和 <a href="https://addons.mozilla.org/zh-CN/firefox/addon/grammarly-1/">Grammarly for Firefox</a></p> + +<p><strong>让用户展现他们的个性:</strong>浏览器扩展可以操控网页的内容;例如,让用户在每个页面上添加他们最喜欢的徽标或者图片。扩展也可以让用户更新火狐浏览器的界面,就像独立的<a href="https://developer.mozilla.org/en-US/Add-ons/Themes/Theme_concepts">主题扩展</a>一样。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15809/MyWeb_New_Tab_add_on.png" style="height: 398px; width: 540px;"></p> + +<p>示例: <a href="https://addons.mozilla.org/zh-CN/firefox/addon/myweb-new-tab/">MyWeb New Tab</a>, <a href="https://addons.mozilla.org/zh-CN/firefox/addon/tabliss/">Tabliss</a>, 和 <a href="https://addons.mozilla.org/zh-CN/firefox/addon/vivaldifox/">VivaldiFox</a></p> + +<p><strong>从网页中添加或删除内容:</strong>你可能想要帮助用户从网页中阻止一些侵扰的广告,当网页中提到一个国家或者城市时提供旅游指南,或者重组页面内容来提供一个统一的阅读体验。有了可以访问和更新一个页面里的 HTML 和 CSS的能力,扩展可以帮助用户以他们想要的形式来查看网页。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15807/ublock_origin_add_on.png" style="height: 480px; width: 640px;"></p> + +<p>示例: <a href="https://addons.mozilla.org/zh-CN/firefox/addon/ublock-origin/">uBlock Origin</a>, <a href="https://addons.mozilla.org/zh-CN/firefox/addon/reader/">Reader</a>, 和 <a href="https://addons.mozilla.org/zh-CN/firefox/addon/toolbox-google-play-store/">Toolbox for Google Play Store™</a></p> + +<p><strong>添加工具和新的浏览特性:</strong>给任务面板添加新特性,或者从URL地址,超链接,或者页面文字生成二维码。有了灵活的界面选择和 <a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions">WebExtensions APIs</a> 你可以轻松的添加新的特性到浏览器。并且,你可以提升几乎任何网站的特性或者功能,不必是你自己的网站。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15806/QR_Code_Image_Generator_add_on.png"></p> + +<p>示例: <a href="https://addons.mozilla.org/zh-CN/firefox/addon/swimlanes-for-trello/">Swimlanes for Trello</a> 和 <a href="https://addons.mozilla.org/zh-CN/firefox/addon/tomato-clock/">Tomato Clock</a></p> + +<p><strong>游戏:</strong>通过线下游戏的特性,或者探索新游戏的可能性来提供传统计算机游戏功能;例如,把游戏合并入每天网页浏览中。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15805/Asteroids_in_Popup_add_on%20.png" style="height: 438px; width: 700px;"></p> + +<p>示例:<a href="https://addons.mozilla.org/zh-CN/firefox/addon/solitaire-card-game-new-tab/">Solitaire Card Game New Tab</a>, 和 <a href="https://addons.mozilla.org/zh-CN/firefox/addon/2048-prime/">2048 Prime</a>.</p> + +<p><strong>添加开发工具:</strong>你可以提供网站开发工具给你的公司或者开发一个有用的技术或者你想分享的网站开发技术。无论哪种方式,你可以通过对开发者工具栏添加一个新的标齐那也来提升内置的 Firefox 开发者工具。</p> + +<p><img alt="" src="https://mdn.mozillademos.org/files/15804/aXe_Developer_Tools_add_on.png" style="height: 261px; width: 700px;"></p> + +<p>示例: <a href="https://addons.mozilla.org/zh-CN/firefox/addon/web-developer/">Web Developer</a>, <a href="https://addons.mozilla.org/zh-CN/firefox/addon/react-devtools/">Web React Developer Tools</a>, 和 <a href="https://addons.mozilla.org/zh-CN/firefox/addon/axe-devtools/">aXe Developer Tools</a></p> + +<p>Firefox 扩展使用 WebExtensions API,一种跨浏览器的扩展开发系统,构建而成。 在很大程度上,它与 Google Chrome 和 Opera 所支持的<a class="external-icon external" href="https://developer.chrome.com/extensions">扩展 API</a> 兼容。 在大多数情况下,为这些浏览器所写的扩展只需<a href="/zh-CN/Add-ons/WebExtensions/Porting_from_Google_Chrome">少量修改</a>便可在 FireFox 和 Microsoft Edge 上运行。这些 API 也完全兼容<a href="/zh-CN/Firefox/Multiprocess_Firefox">多线程 Firefox</a>。</p> + +<p>如果你有想法或问题,或者在使用 WebExtensions API 迁移旧式附加组件时需要帮助,您可以在 <a class="external-icon external" href="https://mail.mozilla.org/listinfo/dev-addons">dev-addons 邮件列表</a>或者<a class="external-icon external" href="https://wiki.mozilla.org/Matrix">Matrix</a> 上的 <a href="https://chat.mozilla.org/#/room/#addons:mozilla.org">Add-ons room</a> 与我们联系。</p> + +<h2 id="接下来呢?">接下来呢?</h2> + +<ul> + <li>在<a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Your_first_WebExtension">你的第一个扩展</a>中开始开发一个简单的扩展。</li> + <li>在<a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Anatomy_of_a_WebExtension">解析一个扩展</a>中了解扩展的结构。</li> + <li>在<a href="/zh-CN/docs/Mozilla/Add-ons/WebExtensions/Examples">扩展示例</a>中尝试一些示例扩展。</li> +</ul> |