Chrome extensions

chrome擴展能夠當作一中小型的應用，用來改善使用chrome瀏覽器時的體驗。從實現角度看，就是一個.crx後綴命名的壓縮包，裏面包括但不限於HTML，JavaScript 和CSS文件。 對於功能比較多的擴展，也能夠是vue 或者 react框架打包後的產物。

修改瀏覽器主題，修改網頁上的樣式，獲取網絡信息，截圖下載等功能，利用擴展均可以完成。

基本項目結構

Manifest 文件

必須有manifest.json 配置文件，做爲擴展的入口，並且後面用到的全部腳本或組件，都須要在manifest中註冊。

//manifest.json
  {
  // Required
    "name": "Getting Started Example",
    "version": "1.0",
    "manifest_version": 2
  }

上面列出了必須字段，其中manifest_version版本從chrome 18 開始，須要固定寫成2，不帶任何引號。

background

在manifest.json中指定後臺腳本文件，用來監聽瀏覽器事件。

• script選項指定了須要註冊的js文件路徑。
• persistent通常設置爲false，惟一須要設置persistently爲true的時候，是當前擴展用到了chrome.webRequest APi去阻止或修改網絡請求。大部分狀況設置"persistent": false

// manifest.json
{
 ...
 
+ "background": {
+     "scripts": ["background.js"],
+     "persistent": false
+   },

}

而後在background.js 中初始化擴展。下面示例表示在安裝完成後，立刻更新存儲的color值。

// background.js
  chrome.runtime.onInstalled.addListener(function() {
    chrome.storage.sync.set({color: '#3aa757'}, function() {
      console.log("The color is green.");
    });
  });

permissions

權限許可，腳本中用到了那些api，對應的權限字段在這裏列出來，好比前面用到了storageAPI。

// manifest.json
{
...
+  "permissions": ["storage"],
}

在chrome開放者文檔中，每一個api都列出了Permissions字段。
。

也能夠是請求跨域接口的權限設置，好比

"permissions": [
    "https://\*.google.com/"
  ],

action

用戶接口，能夠是一個小型彈窗，提示框，右鍵菜單，自定義快捷鍵等。

好比設置page_action選項，只在指定頁面中被激活，其餘頁面中處於灰色不可點擊狀態，彈窗的內容對應popup.html頁面

// manifest.json
{
  ...
+    "page_action": {
+      "default_popup": "popup.html"
+    },
}

完整入門示例,能夠在chrome開發者網站上下載

其它文件

須要與manifest.json配置中，指定的路徑一致

安裝

1. 直接地址欄輸入chrome://extensions，或者點擊右上角菜單->More Tools（工具） -> Extensions（擴展程序）. 勾選Developer Mode（開發者模式），
2. 點擊Load Unpacked Extension（加載已解壓的擴展程序）。

練習過程當中，若是不清楚某些api用法，能夠在https://developer.chrome.com/... 這裏，搜索對應api編寫的簡單示例，更快上手。
在明確本身寫插件的需求後，先在chrome應用商店中用關鍵詞搜索一下是否有相應擴展。

經常使用chrome擴展

1.Infinity 新標籤頁 (Pro)

自定義新標籤頁，能夠選擇多種壁紙

2.沙拉查詞-聚合詞典劃詞翻譯

好用的翻譯插件，集合了多個詞典

3.JSONView

在地址欄中輸入接口地址，對返回的json格式數據格式化，

4.Proxy SwitchyOmega
代理轉發接口

5.掘金
推薦每日優質內容，不過跟Infinity擴展有衝突，默認顯示在新開標籤頁，

6.mage Downloader

截圖，能夠截整張網頁，能夠下載網頁中全部圖片，支持多種格式

7.Screencastify - Screen Video Recorder

屏幕錄製，能夠保存到Google Drive

8.簡悅 - SimpRead

進入沉浸式閱讀，體驗不錯

9.JavaScript Errors Notifier
捕獲頁面的JavaScript報錯，不用打開開發者工具

國內插件庫

https://www.chromebus.cn/
https://chrome.zzzmh.cn/#ext
https://pictureknow.com

參考文檔

https://developer.chrome.com/...