天天看點
傳回

【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式

關于 chrome 擴充的文章，很久之前也寫過一篇。清除頁面廣告？身為前端，自己做一款簡易的chrome擴充吧。

本篇文章重在分享一些制作擴充的過程中比較重要的知識及難點。

什麼是 chrome 擴充程式

擴充程式是一些能夠修改或增強 Chrome 浏覽器功能的小程式。對于前端工程師而言，其最大的便利就是我們可以應用我們熟悉的 HTML、CSS 、 Javascript 等技術來制作擴充程式。

如下圖所示，這些圖示就是各種開發者提供的 chrome 擴充程式：

【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式

區分擴充與插件

很多人會誤稱擴充程式為插件，這裡有必要區分一下。

"擴充" 和 "插件"，其實都是軟體元件的一種形式，Chrome 隻不過是把兩種類型的元件分别給與了專有名稱，一個叫 "擴充"，另一個叫 "插件"。

  • 擴充（Extension）

指的是通過調用 Chrome 提供的 Chrome API 來擴充浏覽器功能的一種元件，工作在浏覽器層面，使用 HTML + Javascript 語言開發。比如著名的 Adblock plus。

  • 插件（Plug-in）

指的是通過調用 Webkit 核心 NPAPI 來擴充核心功能的一種元件，工作在核心層面，理論上可以用任何一種生成本地二進制程式的語言開發，比如 C/C++、Delphi 等。比如 Flash player 插件，就屬于這種類型。一般在網頁中用 

<object>

 或者 

<embed>

标簽聲明的部分，就要靠插件來渲染。

開發自己的擴充程式

OK，簡單了解完什麼是擴充程式後，下面我們來看看如何開發一款擴充程式。

當然，首先我們要搞清楚為什麼我們需要擴充程式，它有什麼作用呢？

就我而言，最近我開發了一款簡單的擴充程式 —— URLHelper 。你可以在 chrome 應用商店下載下傳到它：

【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式

開發它的原因是因為，在我們的業務開發中，開發過程經常需要面對超長的 URL，帶有 N 多個參數，它可能長這樣：

http://tv.video.qq.com/xxx/xxx/xxx/index?rootdomain=test.tv.video.qq.com&guid=066de07bdd33422f95b7ddaf993b2004&tvid=0930DCE900E081E142ED006B56025BA7&appver=3.1.0&bid=31001&appid=101161688&vipbid=38&fromvipbid=38&cid=qk97pyegxz8kdug&vid=&pid=&mid=&from=501&qua_info=PT%3DSNMAPP%26CHID%3D10009%26VN%3D3.1.0%26PR%3DVIDEO%26TVKPlatform%3D670603%26SMARKET%3D&type=0&listid=&matchid=&channelid=&source1=747&source2=709&penid=D21D81E4489E43422F842235B52DD&access=82E8E64DDD4A531B6FFA3E0967F76&kt_login=qq&vuserid=&vusession=&oauth_consumer_key=101161688&kt_userid=924400965&kt_license_account=SNM_0059858531&main_login=qq&kt_login_support=qq%2Cwx%2Cph&kt_boss_channel=tx_snm&ott_flag=2&sop=9&actid=&tvactid=&tv_params=policy_id%3D88&disable_update=&dp=&du=&viewid=&dv=&pageid=&ptag=&redirect_url=http%3A%2F%2Ftest.tv.video.qq.com%2Fktweb%2Fpay%2Fphone%2Fscan%3Frootdomain%3Dtest.tv.video.qq.com%26guid%3D066de07bdd33422f95b7ddaf993b2004%26tvid%3D0930DCE900E081E142ED006B56025BA7%26appver%3D3.1.0%26bid%3D31001%26appid%3D101161688%26vipbid%3D38%26fromvipbid%3D38%26cid%3Dqk97pyegxz8kdug%26vid%3D%26pid%3D%26mid%3D%26from%3D501%26qua_info%3DPT%253DSNMAPP%2526CHID%253D10009%2526VN%253D3.1.0%2526PR%253DVIDEO%2526TVKPlatform%253D670603%2526SMARKET%253D%26type%3D0%26listid%3D%26matchid%3D%26channelid%3D%26source1%3D747%26source2%3D709%26openid%3DD21D81E44801E9E43422F842235B52DD%26access_token%3D82E8E64DDD4EDA531B6FFA3E09676F76%26kt_login%3Dqq%26vuserid%3D%26vusession%3D%26oauth_consumer_key%3D101161688%26kt_userid%3D924400965%26kt_license_account%3DSNM_0059858531%26main_login%3Dqq%26kt_login_support%3Dqq%252Cwx%252Cph%26kt_boss_channel%3Dtx_snm%26ott_flag%3D2%26sop%3D9%26actid%3D%26tvactid%3D%26tv_params%3Dpolicy_id%253D88%26disable_update%3D%26dp%3D%26du%3D%26viewid%3D%26dv%3D%26pageid%3D%26ptag%3D%26opres%3D0&%24from=201

不是開玩笑，真實情況可能比這個還長。

【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式

因為調試的需要，經常要找到某一個特定的參數，擷取或者修改它的值。

讀者可以嘗試一下，貼到浏覽器中，找到 cid 參數，修改為另外一個值。如果沒有工具，這個過程是很痛苦的。一次還好，如果一天重複這個動作幾十次，就有必要考慮借助工具了。

基于這個出發點，我制作了 URLHelper 這個擴充，它的界面大概長這個樣子，可以非常友善的對 URL 參數進行删查改排序，修改參數重新整理頁面：

【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式

是以，擴充程式我覺得每個前端都可以開發，用于解決我們工作生活中在使用浏覽器遇到的各種問題，譬如有名的 ：

  • WEB 前端助手 提供的字元串編碼、JSON 格式化
  • PageSpeed 提供的頁面性能檢測等等
  • 二維碼生成器 将 URL 轉化成對應的二維碼

擴充程式架構

OK，接下來聊聊一些擴充程式開發相關的東西。

關于擴充程式的相關文檔，可以看看這些文章：

  • 建立 Chrome 擴充程式
  • 擴充開發文檔

首先，我覺得最重要的，是要了解整個擴充程式的基本架構，有幾個非常重要的檔案：

Content scripts -- 内容腳本

Content scripts 腳本是指能夠在浏覽器已經加載的頁面内部運作的 javascript 腳本。可以将 content script 看作是網頁的一部分，而不是它所在的擴充程式的一部分。

它可以實作的一些功能的例子及适用場景，大緻如下：

  • 在網頁中找出未連結的 URL，并将它們轉換為超連結
  • 查找特定的資訊或者 DOM 結構，增加字型大小，使文本更具有可讀性
  • 發現并處理 DOM 中的微格式資料

我們可以這樣了解它，在頁面加載完畢之後，我們的擴充程式會向這個頁面注入一個或者額多個腳本，這個腳本可以獲得浏覽器所通路的 web 頁面的詳細資訊。也就是我們可以利用這個腳本收集頁面上各種我們需要的資訊。

以我上面的 URLHelper 為例子，在這個擴充中，content script 的作用就是拿到頁面的 URL ，然後傳遞給擴充程式的 background 頁面或者 popup 頁面。

當然，如果你隻需要一個腳本程式每次注入頁面後擷取頁面相關的資訊，然後上報到自己的伺服器之類的功能，這個擴充程式隻需要這一個 Content scripts 就夠了。它不需要與其他界面或者腳本進行互動和資訊傳遞，擴充幫你做的就是自動注入這個腳本而需要你每次手動注入。

popup -- 彈窗頁面

popup 頁面也非常好了解，在 

manifest.json

 的定義裡它是 

browser_action

， 就是我們擴充程式的界面（彈窗頁），就是上面的那張截圖：

【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式

這個界面其實就是一個 Web 頁面，點開任意一個擴充頁面，右鍵都可以看到彈出檢查選項，點選這個選項，就會彈出一個開發者工具，我們就可以愉快的開始對這個頁面進行檢視 DOM 結構、檢視網絡狀态、 Debug 等任意操作了：

【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式

然後：

重點，這個 popup 頁面完全由我們控制，就像一個普通的 Web 頁面，我們可以利用 Chrome 的消息傳遞機制利用這個頁面和 Content scripts 進行互動，也就可以完成對頁面的某些控制。以我上面的 URLHelper 為例子，在這個擴充中，當我點選擴充程式界面中的重新整理頁面按鈕的時候，會從擴充界面的 DOM 上将修改後參數取出拼好，并且通過 Chrome 的消息傳遞機制 傳遞給 Content scripts，然

後 Content scripts 拿到新的參數，指派給目前浏覽器視窗頁面的 

document.location.href

，實作頁面的重新整理。

background -- 背景網頁

除了 popup 頁面之外，還有一個 background 背景網頁 。

chrome擴充程式将背景網頁分為兩種類型：

  • 持續運作的背景網頁
  • 事件頁面

是否持久存在是事件頁面與背景網頁之間的根本差別。（剛開始使用的時候可以了解為一個東西）

應用和擴充程式通常需要長時間運作的腳本來管理某些任務或狀态，這就是背景頁面的作用。事件頁面隻在需要時加載，當事件頁面不活動時就會解除安裝，以便釋放記憶體和其他系統資源，是以一般而言是推薦使用事件頁面。

它存在的目的在于，在擴充的整個生命周期内需要長時間管理一些任務或狀态。它的主要功能及适用場景，大緻如下：

  • 事件頁面監聽的某個事件觸發
  • 應用或擴充程式第一次安裝或者更新到新版本（為了注冊事件）
  • 内容腳本或其他擴充程式發送消息
  • 擴充程式中的其他視圖調用了 runtime.getBackgroundPage

以我上面的 URLHelper 為例子，在這個擴充中，我使用的是持續運作的背景網頁，當浏覽器頁面重新整理第一次注入 Content Script 時，會擷取到目前頁面 url ，然後發送消息并帶上 url 資訊告訴給 background 背景網頁， background 背景網頁收到消息後，再轉發給 popup 頁面。

擴充程式小結

一個擴充程式最重要的我覺得就是上述的三塊内容：

【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式

我們通過一個 

manifest.json

 的清單檔案來配置它們及一些額外資訊。關于 

manifest.json

 的詳細資訊，可以戳：manifest 。

接下來，我們的擴充要靈活地完成各種功能，最重要的就是互相間的通信！

資訊資料在内容腳本、彈窗頁面以及事件頁面之間傳遞是一個擴充程式最重要的部分。

擴充程式的消息傳遞

消息傳遞存在的必要性是因為内容腳本在網頁而不是擴充程式的環境中運作，是以它們通常需要某種方式與擴充程式的其餘部分通信。

擴充程式（彈窗頁面和背景頁面）和内容腳本間的通信使用消息傳遞的方式。兩邊均可以監聽另一邊發來的消息，并通過同樣的通道回應。消息可以包含任何有效的 JSON 對象。

使用 chrome.* API

消息傳遞，主要使用了 Chrome 浏覽器的内置 

chrome

 對象進行。打開浏覽器，試一下，chrome 對象其實包含了非常多的功能：

【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式

各種類型的消息傳遞都是通過這個 

chrome

 對象進行，分為：

  • 簡單的一次性請求
  • 長時間的連接配接
  • 跨擴充程式消息傳遞
  • 從網頁發送消息
  • 原生消息通信

當然，對于通常而言的普通擴充程式而言，簡單的一次性請求就足夠我們使用了，舉兩個例子。

假設我們的 

manifest.json

 簡單定義如下：

# manifest.json
{
    "name": "Url Helper",
    "version": "1.0.0",
    "author": "Coco",
    "manifest_version": 2,

    "browser_action": {
        "default_popup": "popup.html"
    },
    "background": {
        "scripts": ["background.js"]
    },
    "content_scripts": [
        {
            "js": ["contentScript.js"]
        }
    ]
}

從 Content Script 向 background 事件頁面 傳遞消息

  • Content Script ，即是注入頁面的腳本 
# contentScript.js

// 發送消息
chrome.runtime.sendMessage(
	{
		msg: '從 Content Script 向 事件頁面 傳遞消息',
		result: 1
	},
	function(response) {
		if (response && response.msg) {
			console.log(response.msg);
		}
	}
);
  • background 背景頁面 
#background.js

// 接收消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
    if (request.result) {
        sendResponse({
            farewell: "ok"
        });
    }
});

在發送端，我們可以使用 

runtime.sendMessage

 或 

tabs.sendMessage

 方法。這些方法分别允許您從内容腳本向擴充程式或者反過來發送可通過 JSON 序列化的消息，可選的 callback 參數允許您在需要的時候從另一邊處理回應。

而在接收端，我們需要設定一個 

runtime.onMessage

 事件監聽器來處理消息。

從 popup 彈窗頁面 向 Content Script 傳遞消息

再舉一個翻過來的例子，從 popup 彈窗頁面 向 Content Script 傳遞消息。

  • popup 彈窗頁面 
# popup.html 頁面内引入的 popup.js

let obj = {
    msg: '從 popup 彈窗頁面  向 Content Script 傳遞消息',
    result: 0
};

// 發送消息
chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
    chrome.tabs.sendMessage(tabs[0].id, obj, function(response) {
        console.log("Send Success");
    });
});
  • Content Script 
# contentScript.js

// 接收消息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {
	console.log(sender.tab ? "來自内容腳本：" + sender.tab.url : "來自擴充程式");

	if (request && !request.result) {
		console.log(result.msg);
	}
});

這裡有個問題需要注意，從 popup 彈窗頁面 向 Content Script 傳遞消息時，由于浏覽器可能同時打開多個 tab 頁，是以需要指定一下傳遞的頁面，指定發送至哪一個标簽頁。

使用 

chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {})

 則能正确選中目前打開的标簽頁。

其他更多的消息傳遞方式，可以戳這裡：消息傳遞。

将擴充程式打包上線釋出到 Chrome 應用商店

擴充程式開發好了，希望供他人下載下傳。那麼當然需要釋出到應用商店。流程大緻如下：

登入到 Chrome 開發者資訊中心。

首先，你需要有一個 Google 帳号，點選這裡，登入網上應用商店。

添加一個新項并以 zip 檔案的形式上傳檔案。

成功之後，将會登入到這個界面，： 

【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式

在這個界面我們選擇添加新内容即可 : 

【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式

注意，要打包成 

*.zip

 格式，并且在根目錄下有最重要的 

manifest.json

 檔案，像我上傳的整個目錄結構，就非常簡單：

【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式

首次釋出，需要支付 5 美刀

選擇檔案并且成功上傳之後，下一步非常重要。第一次釋出擴充程式，谷歌會收取 $5 開發者注冊費用，之後可以釋出 20 個擴充程式 。

【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式
【前端工具】Chrome 擴充程式的開發與釋出 -- 手把手教你開發擴充程式

這裡付款中國内地的銀行卡好像都不行，隻能選擇國外的 VISA 等儲蓄卡、信用卡進行支付，地區選擇美國即可。（尋找身邊有 VISA 卡的小夥伴幫忙支付即可）

付款完成，可以愉快的釋出了

OK，最後付款完成，就可以順利釋出了，稍等片刻，就可以搜尋到我們自己開發擴充程式了！

僅供開發使用

當然，有些同學無法通路谷歌商店，或者擴充程式做出來僅僅是團隊内部的一種工具，供私人使用。那麼可以直接在 chrome 浏覽器安裝安裝包。

  • 在 chrome 浏覽器中通路 chrome://extensions（或者單擊多功能框最右邊的按鈕：打開 Chrome 浏覽器菜單，并選擇更多工具 (L) 菜單下的擴充程式 (E)，進入相同的頁面）。
  • 確定右上角開發者模式複選框已選中，單擊加載已解壓的擴充程式 …，彈出檔案選擇對話框。
  • 浏覽至您的擴充程式檔案所在的目錄，并標明。
擴充目錄即是一個項目下的所有檔案，開發調試時同理安裝即可。

後記

其實開發一款 Chrome 擴充程式真的不難，而且非常有意思。感興趣但又怕麻煩的同學可以參考我這個小項目改改。Github -- URL Helper

好了，本文到此結束，希望對你有幫助 :)

如果還有什麼疑問或者建議，可以多多交流，原創文章，文筆有限，才疏學淺，文中若有不正之處，萬望告知。

Chrome擴充 urlhelper 谷歌插件 谷歌擴充程式 chrome擴充程式
上一篇: 集合(11)：靜态導入
下一篇: C#中，async關鍵字到底起什麼作用？

繼續閱讀