手把手教你開發一個 chrome 擴展程序

什麼是 chrome 擴展程序

用來向您的瀏覽器添加新功能並個性化您的瀏覽體驗的小程序。

chrome 擴展程序是 HTML\JS\CSS\images 和其餘能夠在 web 頁面中使用的資源的壓縮包，能夠加強 chrome 瀏覽器功能或定製瀏覽體驗。

chrome 擴展程序本質上是網頁，可使用瀏覽器爲網頁提供的全部 API 。

擴展程序是如何加強 chrome 功能的

首先咱們來看下擴展程序的主要的幾個名詞

擴展程序主要名詞

• Manifest （清單文件）
• Background Script （後臺腳本）
• UI Elements （頁面元素）
• Content Script （內容腳本）
• Options Page

清單文件 manifest.json

擴展文件都會有一個 mainfest 清單文件 清單文件必需要命名爲 manifest.json ，爲瀏覽器提供擴展程序的相關信息，好比使用了哪些文件和該擴展程序可使用哪些功能。

一個基本的 mainfest 文件結構以下（用於一個瀏覽器按鈕，它將會訪問來自 google.com 的信息）

{
  "name": "My Extension",
  "version": "2.1",
  "description": "Gets information from Google.",
  "icons": {
    "128": "icon_16.png",
    "128": "icon_32.png",
    "128": "icon_48.png",
    "128": "icon_128.png"
  },
  "background": {
    "persistent": false,
    "scripts": ["background_script.js"]
  },
  "permissions": ["https://*.google.com/", "activeTab"],
  "browser_action": {
    "default_icon": "icon_16.png",
    "default_popup": "popup.html"
  }
}
複製代碼

後臺腳本 background script

後臺腳本是擴展程序的事件處理程序，其中包含擴展程序的事件監聽器，能夠在後臺運行，只在須要時才加載，在空閒時不加載。 特色：

• Javascript 文件老是運行在後臺.
• 有 Chrome 應用程序級別命令的訪問權限。
• 有使用全部 Chrome API 的權限

用戶頁面 UI Elements

用戶界面應該在不分散用戶注意力的前提下自定義或加強瀏覽體驗，不該該有過多的內容，儘量的少而精。。

擴展程序都有一個後臺網頁（ background.html）包含主要邏輯的不可見頁面，擴展程序也能夠包含其餘頁面，來展現擴展程序的用戶頁面。

許多擴展程序以 瀏覽器按鈕 或 頁面按鈕 的形式向 Google Chrome 瀏覽器增長用戶界面，每一個擴展程序最多能有一個瀏覽器按鈕或頁面按鈕。 當擴展程序與大部分網頁相關時選擇使用瀏覽器按鈕，當擴展程序的圖標顯示仍是消失取決於具體網頁時選擇使用頁面按鈕。

瀏覽器按鈕（browser_action）和頁面按鈕（page_action）的區別在於，瀏覽器按鈕常駐右上角工具欄，頁面按鈕能夠控制顯示仍是隱藏（置灰）。

擴展程序也有其餘的引入方式，好比右鍵菜單項，使用多功能框（ chrome 瀏覽器的地址欄）或者建立快捷鍵。

擴展程序的 UI 頁面，好比彈出框 popup，是包含 JavaScript 的普通 HTML 頁面（popup.html）。

使用頁面按鈕和彈出窗口（popup）的擴展程序可使用 declarative content API在後臺腳本（background.js）中設置規則，以供用戶肯定彈出窗口什麼時候可用。 知足條件後，後臺腳本會與彈出窗口進行通訊，以使用戶能夠點擊其圖標。

內容腳本 content script

若是擴展程序須要與用戶加載的網頁交互，那麼必須要使用內容腳本。內容腳本能夠修改網頁。

內容腳本中是一些 JS 代碼，在已加載到瀏覽器的頁面的上下文中執行，能夠讀取和修改瀏覽器訪問的網頁的 DOM。應該將內容腳本視爲已加載網頁的一部分，而不是擴展程序的一部分。

內容腳本能夠經過通訊並使用 存儲API 來與其父擴展進行通訊。

特色：

• 擁有一部分Api的使用權限（好比從backgorund監聽消息）
• 對於頁面Dom有完整的訪問權限，可是對於任何window級別的對象沒有訪問權限（好比全局變量），對於 frame 也沒有訪問權限；這是由於安全限制。
• Content scripts運行在介於插件和頁面之間，全局的window對象是和頁面/插件全局命名空間徹底不一樣的。

option page

就像擴展程序容許用戶自定義 Chrome 瀏覽器同樣，選項頁面也能夠自定義擴展程序。 選項可用於啓用功能，並容許用戶選擇與他們的需求相關的功能。

開發第一個 chrome 擴展程序

咱們作一個給制定頁面（developer.chrome.com）更換背景顏色的 chrome 擴展程序。

1. 建立文件結構

.
├── background.js
├── images
│   ├── get_started128.png
│   ├── get_started16.png
│   ├── get_started32.png
│   └── get_started48.png
├── manifest.json
├── popup.html
└── popup.js
複製代碼

2. 建立 mainfest 清單文件

擴展程序從清單文件開始，咱們統一命名爲 mainfest.json

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "manifest_version": 2
}
複製代碼

3. 在 chrome 中安裝

1. 打開擴展程序的管理頁面：chrome://extensions. 或者在右上角的菜單中找到更多工具的擴展程序
2. 打開開發者模式
3. 選擇加載已解壓的擴展程序，選中你剛建立的文件
4. 擴展程序就已經加載成功了，由於清單文件中沒有包含圖標，因此展現默認圖標

4.編寫後臺腳本

雖然擴展程序已經安裝了，可是什麼內容都尚未，咱們先來完成後臺腳本。 在 mainfest.json 中的 background 字段中添加腳本文件的文件名 background.js

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "manifest_version": 2
}
複製代碼

4.1 註冊監聽事件

擴展程序會掃描註冊文件中須要偵聽的重要事件。

在 background.js 文件中加入 runtime.onInstalled onInstalled 監聽器，而後使用 storage API 在全局存儲一個 color 變量

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });
});
複製代碼

4.2 註冊權限

由於咱們使用了 storage API ，因此必須在 mainfest.json 文件中註冊後才能使用

"permissions": ["storage"],
複製代碼

4.3 刷新

而後咱們在擴展程序的管理頁面點擊刷新按鈕就能夠從新載入擴展程序。

點擊查看視圖後面的 背景頁 連接，就能夠打開一個新的瀏覽器檢查頁面，控制檯有咱們剛剛 console 的 log The color is green. 這個就是上文提到的沒有頁面的後臺頁面。

5. 引入用戶界面

擴展程序能夠有不少種引入用戶頁面的方式，這裏咱們使用的是彈出窗 popup。 在 mainfest.json 中的 page_action 字段中添加 "default_popup" 字段和 default_icon 字段添加 icon（相對路徑引入，再也不贅述） 能夠提供要在 chrome 中使用的任意大小的圖標，而後 chrome 會選擇最接近的圖標並將其縮放爲適當的大小，以填充16個浸入空間。

可是，若是未提供確切的大小，則此縮放比例可能致使圖標丟失細節或顯得模糊。 icon 的能夠經過兩種方式設置，一種是靜態圖片，另外一種是 canvas。使用靜態圖片更加簡單，可是使用 canvas 能夠增長動效。

靜態圖片只要是 WebKit 能夠展現的圖片就能夠，能夠是 BMP, GIF, ICO, JPEG, PNG。可是對於未壓縮的擴展程序，只能是 PNG 的。

{
  "name": "Getting Started Example",
  "version": "1.0",
  "description": "Build an Extension!",
  "background": {
    "scripts": ["background.js"],
    "persistent": false
  },
  "page_action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "images/get_started16.png",
      "32": "images/get_started32.png",
      "48": "images/get_started48.png",
      "128": "images/get_started128.png"
    }
  },
  "manifest_version": 2
}
複製代碼

該 html 文件內容以下，最基礎的一個 html 文件，只包含一個 button 按鈕，咱們的目的是點擊這個按鈕，改變網頁的背景顏色。

<!DOCTYPE html>
<html>
  <head>
    <style> button { height: 30px; width: 30px; outline: none; } </style>
  </head>
  <body>
    <button id="changeColor"></button>
  </body>
</html>
複製代碼

6. 增長彈出框展現規則

而後咱們在 後臺腳本增長一條展現規則：在 host 等於 developer.chrome.com 時展現 popup 的頁面。由於使用了 declaractiveContent api，因此咱們還須要在腳本文件中註冊下權限。

聲明式內容 API 容許您根據網頁的 URL 和它的內容匹配的 CSS 選擇器來顯示您的擴展程序的頁面按鈕，而不須要擁有主機權限或插入內容腳本。

// Copyright 2018 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.
'use strict';
chrome.runtime.onInstalled.addListener(function() {
  chrome.storage.sync.set({color: '#3aa757'}, function() {
    console.log("The color is green.");
  });
  chrome.declarativeContent.onPageChanged.removeRules(undefined, function() {
    chrome.declarativeContent.onPageChanged.addRules([{
      conditions: [new chrome.declarativeContent.PageStateMatcher({
        pageUrl: {hostEquals: 'developer.chrome.com'},
      })
      ],
      actions: [new chrome.declarativeContent.ShowPageAction()]
    }]);
  });
});
複製代碼

從新加載後你會發展，只有在 developer.chrome.com host 該圖標是亮的，其餘 host 下是置灰的。

7. 獲取後臺腳本存儲的變量

最後一步，咱們獲取從後臺腳本文件中設置到 storage 中的 color 變量，更換 popup 中 button 的顏色，而後點擊 button ，更換當前頁面的背景顏色。

咱們須要建立一個 popup.js 而且在 popup.html 中引入。就和正常的網頁開發同樣的使用姿式。

'use strict';
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
  changeColor.style.backgroundColor = data.color;
  changeColor.setAttribute('value', data.color);
});
changeColor.onclick = function(element) {
  let color = element.target.value;
  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
    console.log('color', color);
    chrome.tabs.executeScript(
        tabs[0].id,
        {code: 'document.body.style.backgroundColor = "' + color + '";'});
  });
};
複製代碼

咱們使用了 chrome 的 tabs api，因此須要在 mainfest.json 中獲取 activeTab 的權限

至此，咱們已經完成了咱們第一個 chrome 擴展程序的開發。 在 developer.chrome.com/ 下，點擊右上角工具欄咱們建立的擴展程序，會有一個彈出框，其中只有一個綠色的按鈕，點擊按鈕，該網頁的背景顏色會變成綠色。