【譯】Chrome 擴展 : 擴展是什麼?

時間 2021-05-01

標籤 html git github web chrome json api 瀏覽器網絡 app 欄目 Chrome 简体版

原文原文鏈接

引子

按照 Chrome 擴展 : 歡迎中的引導，接觸到的相關介紹。html

原文：What are extensions?
版本：Last updated: Friday, March 12, 2021
源庫：developer.chrome.com GitHub
Origin
My GitHub

擴展是什麼?

本頁簡要介紹了 Chrome 擴展，並介紹瞭如何建立一個「Hello，World！」擴展。git

關於擴展

擴展是定製瀏覽體驗的小型軟件程序。它們容許用戶以多種方式定製 Chrome 的功能和行爲，例如：github

生產效率工具
豐富網頁內容
信息聚合
樂趣和遊戲

這些只是擴展能夠作的許多事情的幾個例子。在 Chrome 網絡商店中能夠看到成千上萬個不一樣的已發佈擴展現例。web

擴展是如何工做的？

擴展是基於諸如 HTML 、JavaScript 和 CSS 等 web 技術構建的。它們在單獨的沙盒執行環境中運行，並與 Chrome 瀏覽器交互。chrome

擴展容許你經過使用 API 修改瀏覽器行爲和訪問 web 內容來「擴展」瀏覽器。擴展經過終端 UI 和開發人員 API 進行操做：json

擴展用戶接口 ：這爲用戶管理其擴展提供了一致的方法。api

擴展 API ：擴展 API 容許擴展的代碼訪問瀏覽器自己的功能：激活選項卡、修改網絡請求等等。瀏覽器

要建立擴展，你須要組裝一些資源 -- 一個 manifest、JavaScript 和 HTML文件、圖像和其它資源 -- 這些資源組成了擴展。對於開發和測試，你可使用擴展開發人員模式將這些「未打包」加載到 Chrome 中。一旦你對擴展感到滿意，就能夠打包並分發給用戶。網絡

用戶如何得到擴展？

大多數 Chrome 用戶從 Chrome 網絡商店得到擴展。全球的開發者在 Chrome 網絡商店中發佈他們的擴展，在那裏擴展被審查並提供給終端用戶。app

你能夠經過 Chrome 開發人員儀表板分發擴展，並將其發佈到 Chrome 網絡商店。有關更多信息，請參閱 Chrome 網絡商店開發者文檔。

關於擴展原則的一個注意事項

Chrome 網絡商店上的擴展必須遵照 Chrome 網絡商店政策。在你開始時，請記住如下幾點：

擴展必須實現一個嚴格定義且易於理解的單一目的。一個單一的擴展能夠包括多個組件和一系列的功能，只要一切都有助於實現一個共同的目的。

用戶界面應該是儘量的小且能表達意圖。它們能夠是一個簡單的圖標，好比上面顯示的 AMP validator 擴展，也能夠是打開一個新窗口的表單，好比下面顯示的 Google Similar Pages 擴展。

Hello extensions

經過這個快速的 Hello extensions 示例，初步進入擴展。首先建立一個新目錄來存儲擴展名的文件，或者從示例頁下載它們。

接着，建立名爲 manifest.json 的文件，幷包含如下代碼：

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3
}

每一個擴展都須要一個 manifest ，儘管大多數擴展僅僅依靠 manifest 作不了多少事情。對於此快速開始，擴展在 action 字段下聲明瞭一個彈出文件和圖標：

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
+ "action": {
+   "default_popup": "hello.html",
+   "default_icon": "hello_extensions.png"
+ }
}

下載 hello_extensions.png 並建立一個名爲 hello.html 的文件。

<html>
  <body>
    <h1>Hello Extensions</h1>
  </body>
</html>

這個擴展在點擊圖標時，將顯示擴展 hello.html 。下一步是在 manifest.json 添加一個啓用鍵盤快捷鍵的命令。這一步頗有趣，但不是必須的：

{
  "name": "Hello Extensions",
  "description": "Base Level Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello_extensions.png"
  }
+ "commands": {
+   "_execute_action": {
+     "suggested_key": {
+       "default": "Ctrl+Shift+F",
+       "mac": "MacCtrl+Shift+F"
+     },
+     "description": "Opens hello.html"
+   }
+ }
}

最後一步就是在你本地設備上安裝擴展。