kevin_xiang的專欄,mail: [email protec
轉自:http://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html
寫在前面
我花了將近一個多月的時間斷斷續續寫下這篇博文,並精心寫下完整demo,寫部落格的辛苦大家懂的,所以轉載務必保留出處。本文所有涉及到的大部分程式碼均在這個demo裡面:https://github.com/liuxianan/chrome-plugin-demo ,大家可以直接下載下來執行。
另外,本文圖片較多,且圖片伺服器頻寬有限,右下角的目錄滾動監聽必須等到圖片全部載入完畢之後才會觸發,所以請耐心等待載入完畢。
本文目錄:
demo部分截圖:
前言
2.1. 什麼是Chrome外掛
嚴格來講,我們正在說的東西應該叫Chrome擴充套件(Chrome Extension
),真正意義上的Chrome外掛是更底層的瀏覽器功能擴充套件,可能需要對瀏覽器原始碼有一定掌握才有能力去開發。鑑於Chrome外掛的叫法已經習慣,本文也全部採用這種叫法,但讀者需深知本文所描述的Chrome外掛實際上指的是Chrome擴充套件。
Chrome外掛是一個用Web技術開發、用來增強瀏覽器功能的軟體,它其實就是一個由HTML、CSS、JS、圖片等資源組成的一個.crx字尾的壓縮包.
個人猜測crx
可能是Chrome Extension
如下3個字母的簡寫:
另外,其實不只是前端技術,Chrome外掛還可以配合C++編寫的dll動態連結庫實現一些更底層的功能(NPAPI),比如全螢幕截圖。
由於安全原因,Chrome瀏覽器42以上版本已經陸續不再支援NPAPI外掛,取而代之的是更安全的PPAPI。
2.2. 學習Chrome外掛開發有什麼意義
增強瀏覽器功能,輕鬆實現屬於自己的“定製版”瀏覽器,等等。
Chrome外掛提供了很多實用API供我們使用,包括但不限於:
- 書籤控制;
- 下載控制;
- 視窗控制;
- 標籤控制;
- 網路請求控制,各類事件監聽;
- 自定義原生選單;
- 完善的通訊機制;
- 等等;
2.3. 為什麼是Chrome外掛而不是Firefox外掛
- Chrome佔有率更高,更多人用;
- 開發更簡單;
- 應用場景更廣泛,Firefox外掛只能執行在Firefox上,而Chrome除了Chrome瀏覽器之外,還可以執行在所有webkit核心的國產瀏覽器,比如360極速瀏覽器、360安全瀏覽器、搜狗瀏覽器、QQ瀏覽器等等;
- 除此之外,Firefox瀏覽器也對Chrome外掛的執行提供了一定的支援;
開發與除錯
Chrome外掛沒有嚴格的專案結構要求,只要保證本目錄有一個manifest.json
即可,也不需要專門的IDE,普通的web開發工具即可。
從右上角選單->更多工具->擴充套件程式可以進入 外掛管理頁面,也可以直接在位址列輸入 chrome://extensions 訪問。
勾選開發者模式
即可以資料夾的形式直接載入外掛,否則只能安裝.crx
格式的檔案。Chrome要求外掛必須從它的Chrome應用商店安裝,其它任何網站下載的都無法直接安裝,所以,其實我們可以把crx
檔案解壓,然後通過開發者模式直接載入。
開發中,程式碼有任何改動都必須重新載入外掛,只需要在外掛管理頁按下Ctrl+R
即可,以防萬一最好還把頁面重新整理一下。
核心介紹
4.1. manifest.json
這是一個Chrome外掛最重要也是必不可少的檔案,用來配置所有和外掛相關的配置,必須放在根目錄。其中,manifest_version
、name
、version
3個是必不可少的,description
和icons
是推薦的。
下面給出的是一些常見的配置項,均有中文註釋,完整的配置文件請戳這裡。
{
// 清單檔案的版本,這個必須寫,而且必須是2
"manifest_version": 2,
// 外掛的名稱
"name": "demo",
// 外掛的版本
"version": "1.0.0",
// 外掛描述
"description": "簡單的Chrome擴充套件demo",
// 圖示,一般偷懶全部用一個尺寸的也沒問題
"icons":
{
"16": "img/icon.png",
"48": "img/icon.png",
"128": "img/icon.png"
},
// 會一直常駐的後臺JS或後臺頁面
"background":
{
// 2種指定方式,如果指定JS,那麼會自動生成一個背景頁
"page": "background.html"
//"scripts": ["js/background.js"]
},
// 瀏覽器右上角圖示設定,browser_action、page_action、app必須三選一
"browser_action":
{
"default_icon": "img/icon.png",
// 圖示懸停時的標題,可選
"default_title": "這是一個示例Chrome外掛",
"default_popup": "popup.html"
},
// 當某些特定頁面開啟才顯示的圖示
/*"page_action":
{
"default_icon": "img/icon.png",
"default_title": "我是pageAction",
"default_popup": "popup.html"
},*/
// 需要直接注入頁面的JS
"content_scripts":
[
{
//"matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多個JS按順序注入
"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
// JS的注入可以隨便一點,但是CSS的注意就要千萬小心了,因為一不小心就可能影響全域性樣式
"css": ["css/custom.css"],
// 程式碼注入的時間,可選值: "document_start", "document_end", or "document_idle",最後一個表示頁面空閒時,預設document_idle
"run_at": "document_start"
},
// 這裡僅僅是為了演示content-script可以配置多個規則
{
"matches": ["*://*/*.png", "*://*/*.jpg", "*://*/*.gif", "*://*/*.bmp"],
"js": ["js/show-image-content-size.js"]
}
],
// 許可權申請
"permissions":
[
"contextMenus", // 右鍵選單
"tabs", // 標籤
"notifications", // 通知
"webRequest", // web請求
"webRequestBlocking",
"storage", // 外掛本地儲存
"http://*/*", // 可以通過executeScript或者insertCSS訪問的網站
"https://*/*" // 可以通過executeScript或者insertCSS訪問的網站
],
// 普通頁面能夠直接訪問的外掛資源列表,如果不設定是無法直接訪問的
"web_accessible_resources": ["js/inject.js"],
// 外掛主頁,這個很重要,不要浪費了這個免費廣告位
"homepage_url": "https://www.baidu.com",
// 覆蓋瀏覽器預設頁面
"chrome_url_overrides":
{
// 覆蓋瀏覽器預設的新標籤頁
"newtab": "newtab.html"
},
// Chrome40以前的外掛配置頁寫法
"options_page": "options.html",
// Chrome40以後的外掛配置頁寫法,如果2個都寫,新版Chrome只認後面這一個
"options_ui":
{
"page": "options.html",
// 新增一些預設的樣式,推薦使用
"chrome_style": true
},
// 向地址欄註冊一個關鍵字以提供搜尋建議,只能設定一個關鍵字
"omnibox": { "keyword" : "go" },
// 預設語言
"default_locale": "zh_CN",
// devtools頁面入口,注意只能指向一個HTML檔案,不能是JS檔案
"devtools_page": "devtools.html"
}
4.2. content-scripts
所謂content-scripts,其實就是Chrome外掛中向頁面注入指令碼的一種形式(雖然名為script,其實還可以包括css的),藉助content-scripts
我們可以實現通過配置的方式輕鬆向指定頁面注入JS和CSS(如果需要動態注入,可以參考下文),最常見的比如:廣告遮蔽、頁面CSS定製,等等。
示例配置:
{
// 需要直接注入頁面的JS
"content_scripts":
[
{
//"matches": ["http://*/*", "https://*/*"],
// "<all_urls>" 表示匹配所有地址
"matches": ["<all_urls>"],
// 多個JS按順序注入
"js": ["js/jquery-1.8.3.js", "js/content-script.js"],
// JS的注入可以隨便一點,但是CSS的注意就要千萬小心了,因為一不小心就可能影響全域性樣式
"css": ["css/custom.css"],
// 程式碼注入的時間,可選值: "document_start", "document_end", or "document_idle",最後一個表示頁面空閒時,預設document_idle
"run_at": "document_start"
}
],
}
特別注意,如果沒有主動指定run_at
為document_start
(預設為document_idle
),下面這種程式碼是不會生效的:
document.addEventListener('DOMContentLoaded', function()
{
console.log('我被執行了!');
});
content-scripts
和原始頁面共享DOM,但是不共享JS,如要訪問頁面JS(例如某個JS變數),只能通過injected js
來實現。content-scripts
不能訪問絕大部分chrome.xxx.api
,除了下面這4種:
- chrome.extension(getURL , inIncognitoContext , lastError , onRequest , sendRequest)
- chrome.i18n
- chrome.runtime(connect , getManifest , getURL , id , onConnect , onMessage , sendMessage)
- chrome.storage
其實看到這裡不要悲觀,這些API絕大部分時候都夠用了,非要呼叫其它API的話,你還可以通過通訊來實現讓background來幫你呼叫(關於通訊,後文有詳細介紹)。
好了,Chrome外掛給我們提供了這麼強大的JS注入功能,剩下的就是發揮你的想象力去玩弄瀏覽器了。
4.3. background
後臺(姑且這麼翻譯吧),是一個常駐的頁面,它的生命週期是外掛中所有型別頁面中最長的,它隨著瀏覽器的開啟而開啟,隨著瀏覽器的關閉而關閉,所以通常把需要一直執行的、啟動就執行的、全域性的程式碼放在background裡面。
background的許可權非常高,幾乎可以呼叫所有的Chrome擴充套件API(除了devtools),而且它可以無限制跨域,也就是可以跨域訪問任何網站而無需要求對方設定CORS
。
經過測試,其實不止是background,所有的直接通過
chrome-extension://id/xx.html
這種方式開啟的網頁都可以無限制跨域。
配置中,background
可以通過page
指定一張網頁,也可以通過scripts
直接指定一個JS,Chrome會自動為這個JS生成一個預設的網頁:
{
// 會一直常駐的後臺JS或後臺頁面
"background":
{
// 2種指定方式,如果指定JS,那麼會自動生成一個背景頁
"page": "background.html"
//"scripts": ["js/background.js"]
},
}
需要特別說明的是,雖然你可以通過chrome-extension://xxx/background.html
直接開啟後臺頁,但是你開啟的後臺頁和真正一直在後臺執行的那個頁面不是同一個,換句話說,你可以開啟無數個background.html
,但是真正在後臺常駐的只有一個,而且這個你永遠看不到它的介面,只能除錯它的程式碼。
4.4. event-pages
這裡順帶介紹一下event-pages,它是一個什麼東西呢?鑑於background生命週期太長,長時間掛載後臺可能會影響效能,所以Google又弄一個event-pages
,在配置檔案上,它與background的唯一區別就是多了一個persistent
引數:
{
"background":
{
"scripts": ["event-page.js"],
"persistent": false
},
}
它的生命週期是:在被需要時載入,在空閒時被關閉,什麼叫被需要時呢?比如第一次安裝、外掛更新、有content-script向它傳送訊息,等等。
除了配置檔案的變化,程式碼上也有一些細微變化,個人這個簡單瞭解一下就行了,一般情況下background也不會很消耗效能的。
4.5. popup
popup
是點選browser_action
或者page_action
圖示時開啟的一個小視窗網頁,焦點離開網頁就立即關閉,一般用來做一些臨時性的互動。
popup
可以包含任意你想要的HTML內容,並且會自適應大小。可以通過default_popup
欄位來指定popup頁面,也可以呼叫setPopup()
方法。
配置方式:
{
"browser_action":
{
"default_icon": "img/icon.png",
// 圖示懸停時的標題,可選
"default_title": "這是一個示例Chrome外掛",
"default_popup": "popup.html"
}
}
需要特別注意的是,由於單擊圖示開啟popup,焦點離開又立即關閉,所以popup頁面的生命週期一般很短,需要長時間執行的程式碼千萬不要寫在popup裡面。
在許可權上,它和background非常類似,它們之間最大的不同是生命週期的不同,popup中可以直接通過chrome.extension.getBackgroundPage()
獲取background的window物件。
4.6. injected-script
這裡的injected-script
是我給它取的,指的是通過DOM操作的方式向頁面注入的一種JS。為什麼要把這種JS單獨拿出來討論呢?又或者說為什麼需要通過這種方式注入JS呢?
這是因為content-script
有一個很大的“缺陷”,也就是無法訪問頁面中的JS,雖然它可以操作DOM,但是DOM卻不能呼叫它,也就是無法在DOM中通過繫結事件的方式呼叫content-script
中的程式碼(包括直接寫onclick
和addEventListener
2種方式都不行),但是,“在頁面上新增一個按鈕並呼叫外掛的擴充套件API”是一個很常見的需求,那該怎麼辦呢?其實這就是本小節要講的。
在content-script
中通過DOM方式向頁面注入inject-script
程式碼示例:
// 向頁面注入JS
function injectCustomJs(jsPath)
{
jsPath = jsPath || 'js/inject.js';
var temp = document.createElement('script');
temp.setAttribute('type', 'text/javascript');
// 獲得的地址類似:chrome-extension://ihcokhadfjfchaeagdoclpnjdiokfakg/js/inject.js
temp.src = chrome.extension.getURL(jsPath);
temp.onload = function()
{
// 放在頁面不好看,執行完後移除掉
this.parentNode.removeChild(this);
};
document.head.appendChild(temp);
}
你以為這樣就行了?執行一下你會看到如下報錯:
Denying load of chrome-extension://efbllncjkjiijkppagepehoekjojdclc/js/inject.js. Resources must be listed in the web_accessible_resources manifest key in order to be loaded by pages outside the extension.
意思就是你想要在web中直接訪問外掛中的資源的話必須顯示宣告才行,配置檔案中增加如下:
{
// 普通頁面能夠直接訪問的外掛資源列表,如果不設定是無法直接訪問的
"web_accessible_resources": ["js/inject.js"],
}
至於inject-script
如何呼叫content-script
中的程式碼,後面我會在專門的一個訊息通訊章節詳細介紹。
4.7. homepage_url
開發者或者外掛主頁設定,一般會在如下2個地方顯示:
Chrome外掛的8種展示形式
5.1. browserAction(瀏覽器右上角)
通過配置browser_action
可以在瀏覽器的右上角增加一個圖示,一個browser_action
可以擁有一個圖示,一個tooltip
,一個badge
和一個popup
。
示例配置如下:
"browser_action":
{
"default_icon": "img/icon.png",
"default_title": "這是一個示例Chrome外掛",
"default_popup": "popup.html"
}
5.1.1. 圖示
browser_action
圖示推薦使用寬高都為19畫素的圖片,更大的圖示會被縮小,格式隨意,一般推薦png,可以通過manifest中default_icon
欄位配置,也可以呼叫setIcon()方法。
5.1.2. tooltip
修改browser_action
的manifest中default_title
欄位,或者呼叫setTitle()
方法。
5.1.3. badge
所謂badge
就是在圖示上顯示一些文字,可以用來更新一些小的擴充套件狀態提示資訊。因為badge空間有限,所以只支援4個以下的字元(英文4個,中文2個)。badge無法通過配置檔案來指定,必須通過程式碼實現,設定badge文字和顏色可以分別使用setBadgeText()
和setBadgeBackgroundColor()
。
chrome.browserAction.setBadgeText({text: 'new'});
chrome.browserAction.setBadgeBackgroundColor({color: [255, 0, 0, 255]});
效果:
5.2. pageAction(位址列右側)
所謂pageAction
,指的是隻有當某些特定頁面開啟才顯示的圖示,它和browserAction
最大的區別是一個始終都顯示,一個只在特定情況才顯示。
需要特別說明的是早些版本的Chrome是將pageAction放在位址列的最右邊,左鍵單擊彈出popup,右鍵單擊則彈出相關預設的選項選單:
而新版的Chrome更改了這一策略,pageAction和普通的browserAction一樣也是放在瀏覽器右上角,只不過沒有點亮時是灰色的,點亮了才是彩色的,灰色時無論左鍵還是右鍵單擊都是彈出選項:
具體是從哪一版本開始改的沒去仔細考究,反正知道v50.0的時候還是前者,v58.0的時候已改為後者。
調整之後的pageAction
我們可以簡單地把它看成是可以置灰的browserAction
。
- chrome.pageAction.show(tabId) 顯示圖示;
- chrome.pageAction.hide(tabId) 隱藏圖示;
示例(只有開啟百度才顯示圖示):
// manifest.json
{
"page_action":
{
"default_icon": "img/icon.png",
"default_title": "我是pageAction",
"default_popup": "popup.html"
},
"permissions": ["declarativeContent"]
}
// background.js
chrome.runtime.onInstalled.addListener(function(){
chrome.declarativeContent.onPageChanged.removeRules(undefined, function(){
chrome.declarativeContent.onPageChanged.addRules([
{
conditions: [
// 只有開啟百度才顯示pageAction
new chrome.declarativeContent.PageStateMatcher({pageUrl: {urlContains: 'baidu.com'}})
],
actions: [new chrome.declarativeContent.ShowPageAction()]
}
]);
});
});
效果圖:
5.3. 右鍵選單
通過開發Chrome外掛可以自定義瀏覽器的右鍵選單,主要是通過chrome.contextMenus
API實現,右鍵選單可以出現在不同的上下文,比如普通頁面、選中的文字、圖片、連結,等等,如果有同一個外掛裡面定義了多個選單,Chrome會自動組合放到以外掛名字命名的二級選單裡,如下:
5.3.1. 最簡單的右鍵選單示例
// manifest.json
{"permissions": ["contextMenus"]}
// background.js
chrome.contextMenus.create({
title: "測試右鍵選單",
onclick: function(){alert('您點選了右鍵選單!');}
});
效果:
5.3.2. 新增右鍵百度搜索
// manifest.json
{"permissions": ["contextMenus", "tabs"]}
// background.js
chrome.contextMenus.create({
title: '使用度娘搜尋:%s', // %s表示選中的文字
contexts: ['selection'], // 只有當選中文字時才會出現此右鍵選單
onclick: function(params)
{
// 注意不能使用location.href,因為location是屬於background的window物件
chrome.tabs.create({url: 'https://www.baidu.com/s?ie=utf-8&wd=' + encodeURI(params.selectionText)});
}
});
效果如下:
5.3.3. 語法說明
chrome.contextMenus.create({
type: 'normal', // 型別,可選:["normal", "checkbox", "radio", "separator"],預設 normal
title: '選單的名字', // 顯示的文字,除非為“separator”型別否則此引數必需,如果型別為“selection”,可以使用%s顯示選定的文字
contexts: ['page'], // 上下文環境,可選:["all", "page", "frame", "selection", "link", "editable", "image", "video", "audio"],預設page
onclick: function(){}, // 單擊時觸發的方法
parentId: 1, // 右鍵選單項的父選單項ID。指定父選單項將會使此選單項成為父選單項的子選單
documentUrlPatterns: 'https://*.baidu.com/*' // 只在某些頁面顯示此右鍵選單
});
// 刪除某一個選單項
chrome.contextMenus.remove(menuItemId);
// 刪除所有自定義右鍵選單
chrome.contextMenus.removeAll();
// 更新某一個選單項
chrome.contextMenus.update(menuItemId, updateProperties);
5.4. override(覆蓋特定頁面)
使用override
頁可以將Chrome預設的一些特定頁面替換掉,改為使用擴充套件提供的頁面。
擴充套件可以替代如下頁面:
- 歷史記錄:從工具選單上點選歷史記錄時訪問的頁面,或者從位址列直接輸入 chrome://history
- 新標籤頁:當建立新標籤的時候訪問的頁面,或者從位址列直接輸入 chrome://newtab
注意:
- 一個擴充套件只能替代一個頁面;
- 不能替代隱身視窗的新標籤頁;
- 網頁必須設定title,否則使用者可能會看到網頁的URL,造成困擾;
下面的截圖是預設的新標籤頁和被擴充套件替換掉的新標籤頁。
程式碼(注意,一個外掛只能替代一個預設頁,以下僅為演示):
"chrome_url_overrides":
{
"newtab": "newtab.html",
"history": "history.html",
"bookmarks": "bookmarks.html"
}
5.5. devtools(開發者工具)
5.5.1. 預熱
使用過vue的應該見過這種型別的外掛:
是的,Chrome允許外掛在開發者工具(devtools)上動手腳,主要表現在:
- 自定義一個和多個和
Elements
、Console
、Sources
等同級別的面板; - 自定義側邊欄(sidebar),目前只能自定義
Elements
面板的側邊欄;
先來看2張簡單的demo截圖,自定義面板(判斷當前頁面是否使用了jQuery):
自定義側邊欄(獲取當前頁面所有圖片):
5.5.2. devtools擴充套件介紹
來一張官方圖片:
每開啟一個開發者工具視窗,都會建立devtools頁面的例項,F12視窗關閉,頁面也隨著關閉,所以devtools頁面的生命週期和devtools視窗是一致的。devtools頁面可以訪問一組特有的DevTools API
以及有限的擴充套件API,這組特有的DevTools API
只有devtools頁面才可以訪問,background都無權訪問,這些API包括:
chrome.devtools.panels
:面板相關;chrome.devtools.inspectedWindow
:獲取被審查視窗的有關資訊;chrome.devtools.network
:獲取有關網路請求的資訊;
大部分擴充套件API都無法直接被DevTools
頁面呼叫,但它可以像content-script
一樣直接呼叫chrome.extension
和chrome.runtime
API,同時它也可以像content-script
一樣使用Message互動的方式與background頁面進行通訊。
5.5.3. 例項:建立一個devtools擴充套件
首先,要針對開發者工具開發外掛,需要在清單檔案宣告如下:
{
// 只能指向一個HTML檔案,不能是JS檔案
"devtools_page": "devtools.html"
}
這個devtools.html
裡面一般什麼都沒有,就引入一個js:
<!DOCTYPE html>
<html>
<head></head>
<body>
<script type="text/javascript" src="js/devtools.js"></script>
</body>
</html>
可以看出來,其實真正程式碼是devtools.js
,html檔案是“多餘”的,所以這裡覺得有點坑,devtools_page
幹嘛不允許直接指定JS呢?
再來看devtools.js的程式碼:
// 建立自定義面板,同一個外掛可以建立多個自定義面板
// 幾個引數依次為:panel標題、圖示(其實設定了也沒地方顯示)、要載入的頁面、載入成功後的回撥
chrome.devtools.panels.create('MyPanel', 'img/icon.png', 'mypanel.html', function(panel)
{
console.log('自定義面板建立成功!'); // 注意這個log一般看不到
});
// 建立自定義側邊欄
chrome.devtools.panels.elements.createSidebarPane("Images", function(sidebar)
{
// sidebar.setPage('../sidebar.html'); // 指定載入某個頁面
sidebar.setExpression('document.querySelectorAll("img")', 'All Images'); // 通過表示式來指定
//sidebar.setObject({aaa: 111, bbb: 'Hello World!'}); // 直接設定顯示某個物件
});
setPage時的效果:
以下截圖示例的程式碼:
// 檢測jQuery
document.getElementById('check_jquery').addEventListener('click', function()
{
// 訪問被檢查的頁面DOM需要使用inspectedWindow
// 簡單例子:檢測被檢查頁面是否使用了jQuery
chrome.devtools.inspectedWindow.eval("jQuery.fn.jquery", function(result, isException)
{
var html = '';
if (isException) html = '當前頁面沒有使用jQuery。';
else html = '當前頁面使用了jQuery,版本為:'+result;
alert(html);
});
});
// 開啟某個資源
document.getElementById('open_resource').addEventListener('click', function()
{
chrome.devtools.inspectedWindow.eval("window.location.href", function(result, isException)
{
chrome.devtools.panels.openResource(result, 20, function()
{
console.log('資源開啟成功!');
});
});
});
// 審查元素
document.getElementById('test_inspect').addEventListener('click', function()
{
chrome.devtools.inspectedWindow.eval("inspect(document.images[0])", function(result, isException){});
});
// 獲取所有資源
document.getElementById('get_all_resources').addEventListener('click', function()
{
chrome.devtools.inspectedWindow.getResources(function(resources)
{
alert(JSON.stringify(resources));
});
});
5.5.4. 除錯技巧
修改了devtools頁面的程式碼時,需要先在 chrome://extensions 頁面按下Ctrl+R
重新載入外掛,然後關閉再開啟開發者工具即可,無需重新整理頁面(而且只重新整理頁面不重新整理開發者工具的話是不會生效的)。
由於devtools本身就是開發者工具頁面,所以幾乎沒有方法可以直接除錯它,直接用 chrome-extension://extid/devtools.html"
的方式開啟頁面肯定報錯,因為不支援相關特殊API,只能先自己寫一些方法遮蔽這些錯誤,除錯通了再放開。
5.6. option(選項頁)
所謂options
頁,就是外掛的設定頁面,有2個入口,一個是右鍵圖示有一個“選項”選單,還有一個在外掛管理頁面:
在Chrome40以前,options頁面和其它普通頁面沒什麼區別,Chrome40以後則有了一些變化。
{
// Chrome40以前的外掛配置頁寫法
"options_page": "options.html",
}
這個頁面裡面的內容就隨你自己發揮了,配置之後在外掛管理頁就會看到一個選項
按鈕入口,點進去就是開啟一個網頁,沒啥好講的。
效果:
{
"options_ui":
{
"page": "options.html",
// 新增一些預設的樣式,推薦使用
"chrome_style": true
},
}
options.html
的程式碼我們沒有任何改動,只是配置檔案改了,之後效果如下:
看起來是不是高大上了?
幾點注意:
- 為了相容,建議2種都寫,如果都寫了,Chrome40以後會預設讀取新版的方式;
- 新版options中不能使用alert;
- 資料儲存建議用chrome.storage,因為會隨使用者自動同步;
5.7. omnibox
omnibox
是向用戶提供搜尋建議的一種方式。先來看個gif
圖以便了解一下這東西到底是個什麼鬼:
註冊某個關鍵字以觸發外掛自己的搜尋建議介面,然後可以任意發揮了。
首先,配置檔案如下:
{
// 向地址欄註冊一個關鍵字以提供搜尋建議,只能設定一個關鍵字
"omnibox": { "keyword" : "go" },
}
然後background.js
中註冊監聽事件:
// omnibox 演示
chrome.omnibox.onInputChanged.addListener((text, suggest) => {
console.log('inputChanged: ' + text);
if(!text) return;
if(text == '美女') {
suggest([
{content: '中國' + text, description: '你要找“中國美女”嗎?'},
{content: '日本' + text, description: '你要找“日本美女”嗎?'},
{content: '泰國' + text, description: '你要找“泰國美女或人妖”嗎?'},
{content: '韓國' + text, description: '你要找“韓國美女”嗎?'}
]);
}
else if(text == '微博') {
suggest([
{content: '新浪' + text, description: '新浪' + text},
{content: '騰訊' + text, description: '騰訊' + text},
{content: '搜狐' + text, description: '搜尋' + text},
]);
}
else {
suggest([
{content: '百度搜索 ' + text, description: '百度搜索 ' + text},
{content: '谷歌搜尋 ' + text, description: '谷歌搜尋 ' + text},
]);
}
});
// 當用戶接收關鍵字建議時觸發
chrome.omnibox.onInputEntered.addListener((text) => {
console.log('inputEntered: ' + text);
if(!text) return;
var href = '';
if(text.endsWith('美女')) href = 'http://image.baidu.com/search/index?tn=baiduimage&ie=utf-8&word=' + text;
else if(text.startsWith('百度搜索')) href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text.replace('百度搜索 ', '');
else if(text.startsWith('谷歌搜尋')) href = 'https://www.google.com.tw/search?q=' + text.replace('谷歌搜尋 ', '');
else href = 'https://www.baidu.com/s?ie=UTF-8&wd=' + text;
openUrlCurrentTab(href);
});
// 獲取當前選項卡ID
function getCurrentTabId(callback)
{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
{
if(callback) callback(tabs.length ? tabs[0].id: null);
});
}
// 當前標籤開啟某個連結
function openUrlCurrentTab(url)
{
getCurrentTabId(tabId => {
chrome.tabs.update(tabId, {url: url});
})
}
5.8. 桌面通知
Chrome提供了一個chrome.notifications
API以便外掛推送桌面通知,暫未找到chrome.notifications
和HTML5自帶的Notification
的顯著區別及優勢。
在後臺JS中,無論是使用chrome.notifications
還是Notification
都不需要申請許可權(HTML5方式需要申請許可權),直接使用即可。
最簡單的通知:
程式碼:
chrome.notifications.create(null, {
type: 'basic',
iconUrl: 'img/icon.png',
title: '這是標題',
message: '您剛才點選了自定義右鍵選單!'
});
通知的樣式可以很豐富:
這個沒有深入研究,有需要的可以去看官方文件。
5種類型的JS對比
Chrome外掛的JS主要可以分為這5類:injected script
、content-script
、popup js
、background js
和devtools js
,
6.1. 許可權對比
JS種類 | 可訪問的API | DOM訪問情況 | JS訪問情況 | 直接跨域 |
---|---|---|---|---|
injected script | 和普通JS無任何差別,不能訪問任何擴充套件API | 可以訪問 | 可以訪問 | 不可以 |
content script | 只能訪問 extension、runtime等部分API | 可以訪問 | 不可以 | 不可以 |
popup js | 可訪問絕大部分API,除了devtools系列 | 不可直接訪問 | 不可以 | 可以 |
background js | 可訪問絕大部分API,除了devtools系列 | 不可直接訪問 | 不可以 | 可以 |
devtools js | 只能訪問 devtools、extension、runtime等部分API | 可以 | 可以 | 不可以 |
6.2. 除錯方式對比
JS型別 | 除錯方式 | 圖片說明 |
---|---|---|
injected script | 直接普通的F12即可 | 懶得截圖 |
content-script | 開啟Console,如圖切換 | |
popup-js | popup頁面右鍵審查元素 | |
background | 外掛管理頁點選背景頁即可 | |
devtools-js | 暫未找到有效方法 | - |
訊息通訊
前面我們介紹了Chrome外掛中存在的5種JS,那麼它們之間如何互相通訊呢?下面先來系統概況一下,然後再分類細說。需要知道的是,popup和background其實幾乎可以視為一種東西,因為它們可訪問的API都一樣、通訊機制一樣、都可以跨域。
7.1. 互相通訊概覽
注:-
表示不存在或者無意義,或者待驗證。
injected-script | content-script | popup-js | background-js | |
---|---|---|---|---|
injected-script | - | window.postMessage | - | - |
content-script | window.postMessage | - | chrome.runtime.sendMessage chrome.runtime.connect | chrome.runtime.sendMessage chrome.runtime.connect |
popup-js | - | chrome.tabs.sendMessage chrome.tabs.connect | - | chrome.extension. getBackgroundPage() |
background-js | - | chrome.tabs.sendMessage chrome.tabs.connect | chrome.extension.getViews | - |
devtools-js | chrome.devtools. inspectedWindow.eval | - | chrome.runtime.sendMessage | chrome.runtime.sendMessage |
7.2. 通訊詳細介紹
7.2.1. popup和background
popup可以直接呼叫background中的JS方法,也可以直接訪問background的DOM:
// background.js
function test()
{
alert('我是background!');
}
// popup.js
var bg = chrome.extension.getBackgroundPage();
bg.test(); // 訪問bg的函式
alert(bg.document.body.innerHTML); // 訪問bg的DOM
小插曲,今天碰到一個情況,發現popup無法獲取background的任何方法,找了半天才發現是因為background的js報錯了,而你如果不主動檢視background的js的話,是看不到錯誤資訊的,特此提醒。
至於background
訪問popup
如下(前提是popup
已經開啟):
var views = chrome.extension.getViews({type:'popup'});
if(views.length > 0) {
console.log(views[0].location.href);
}
7.2.2. popup或者bg向content主動傳送訊息
background.js或者popup.js:
function sendMessageToContentScript(message, callback)
{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
{
chrome.tabs.sendMessage(tabs[0].id, message, function(response)
{
if(callback) callback(response);
});
});
}
sendMessageToContentScript({cmd:'test', value:'你好,我是popup!'}, function(response)
{
console.log('來自content的回覆:'+response);
});
content-script.js
接收:
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
// console.log(sender.tab ?"from a content script:" + sender.tab.url :"from the extension");
if(request.cmd == 'test') alert(request.value);
sendResponse('我收到了你的訊息!');
});
雙方通訊直接傳送的都是JSON物件,不是JSON字串,所以無需解析,很方便(當然也可以直接傳送字串)。
網上有些老程式碼中用的是
chrome.extension.onMessage
,沒有完全查清二者的區別(貌似是別名),但是建議統一使用chrome.runtime.onMessage
。
7.2.3. content-script主動發訊息給後臺
content-script.js:
chrome.runtime.sendMessage({greeting: '你好,我是content-script呀,我主動發訊息給後臺!'}, function(response) {
console.log('收到來自後臺的回覆:' + response);
});
background.js 或者 popup.js:
// 監聽來自content-script的訊息
chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
{
console.log('收到來自content-script的訊息:');
console.log(request, sender, sendResponse);
sendResponse('我是後臺,我已收到你的訊息:' + JSON.stringify(request));
});
注意事項:
- content_scripts向
popup
主動發訊息的前提是popup必須開啟!否則需要利用background作中轉; - 如果background和popup同時監聽,那麼它們都可以同時收到訊息,但是隻有一個可以sendResponse,一個先發送了,那麼另外一個再發送就無效;
7.2.4. injected script和content-script
content-script
和頁面內的指令碼(injected-script
自然也屬於頁面內的指令碼)之間唯一共享的東西就是頁面的DOM元素,有2種方法可以實現二者通訊:
- 可以通過
window.postMessage
和window.addEventListener
來實現二者訊息通訊; - 通過自定義DOM事件來實現;
第一種方法(推薦):
injected-script
中:
window.postMessage({"test": '你好!'}, '*');
content script中:
window.addEventListener("message", function(e)
{
console.log(e.data);
}, false);
第二種方法:
injected-script
中:
var customEvent = document.createEvent('Event');
customEvent.initEvent('myCustomEvent', true, true);
function fireCustomEvent(data) {
hiddenDiv = document.getElementById('myCustomEventDiv');
hiddenDiv.innerText = data
hiddenDiv.dispatchEvent(customEvent);
}
fireCustomEvent('你好,我是普通JS!');
content-script.js
中:
var hiddenDiv = document.getElementById('myCustomEventDiv');
if(!hiddenDiv) {
hiddenDiv = document.createElement('div');
hiddenDiv.style.display = 'none';
document.body.appendChild(hiddenDiv);
}
hiddenDiv.addEventListener('myCustomEvent', function() {
var eventData = document.getElementById('myCustomEventDiv').innerText;
console.log('收到自定義事件訊息:' + eventData);
});
7.3. 長連線和短連線
其實上面已經涉及到了,這裡再單獨說明一下。Chrome外掛中有2種通訊方式,一個是短連線(chrome.tabs.sendMessage
和chrome.runtime.sendMessage
),一個是長連線(chrome.tabs.connect
和chrome.runtime.connect
)。
短連線的話就是擠牙膏一樣,我傳送一下,你收到了再回復一下,如果對方不回覆,你只能重新發,而長連線類似WebSocket
會一直建立連線,雙方可以隨時互發訊息。
短連線上面已經有程式碼示例了,這裡只講一下長連線。
popup.js:
getCurrentTabId((tabId) => {
var port = chrome.tabs.connect(tabId, {name: 'test-connect'});
port.postMessage({question: '你是誰啊?'});
port.onMessage.addListener(function(msg) {
alert('收到訊息:'+msg.answer);
if(msg.answer && msg.answer.startsWith('我是'))
{
port.postMessage({question: '哦,原來是你啊!'});
}
});
});
content-script.js:
// 監聽長連線
chrome.runtime.onConnect.addListener(function(port) {
console.log(port);
if(port.name == 'test-connect') {
port.onMessage.addListener(function(msg) {
console.log('收到長連線訊息:', msg);
if(msg.question == '你是誰啊?') port.postMessage({answer: '我是你爸!'});
});
}
});
其它補充
8.1. 動態注入或執行JS
雖然在background
和popup
中無法直接訪問頁面DOM,但是可以通過chrome.tabs.executeScript
來執行指令碼,從而實現訪問web頁面的DOM(注意,這種方式也不能直接訪問頁面JS)。
示例manifest.json
配置:
{
"name": "動態JS注入演示",
...
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
...
}
JS:
// 動態執行JS程式碼
chrome.tabs.executeScript(tabId, {code: 'document.body.style.backgroundColor="red"'});
// 動態執行JS檔案
chrome.tabs.executeScript(tabId, {file: 'some-script.js'});
8.2. 動態注入CSS
示例manifest.json
配置:
{
"name": "動態CSS注入演示",
...
"permissions": [
"tabs", "http://*/*", "https://*/*"
],
...
}
JS程式碼:
// 動態執行CSS程式碼,TODO,這裡有待驗證
chrome.tabs.insertCSS(tabId, {code: 'xxx'});
// 動態執行CSS檔案
chrome.tabs.insertCSS(tabId, {file: 'some-style.css'});
8.3. 獲取當前視窗ID
chrome.windows.getCurrent(function(currentWindow)
{
console.log('當前視窗ID:' + currentWindow.id);
});
8.4. 獲取當前標籤頁ID
一般有2種方法:
// 獲取當前選項卡ID
function getCurrentTabId(callback)
{
chrome.tabs.query({active: true, currentWindow: true}, function(tabs)
{
if(callback) callback(tabs.length ? tabs[0].id: null);
});
}
獲取當前選項卡id的另一種方法,大部分時候都類似,只有少部分時候會不一樣(例如當視窗最小化時)
// 獲取當前選項卡ID
function getCurrentTabId2()
{
chrome.windows.getCurrent(function(currentWindow)
{
chrome.tabs.query({active: true, windowId: currentWindow.id}, function(tabs)
{
if(callback) callback(tabs.length ? tabs[0].id: null);
});
});
}
8.5. 本地儲存
本地儲存建議用chrome.storage
而不是普通的localStorage
,區別有好幾點,個人認為最重要的2點區別是:
chrome.storage
是針對外掛全域性的,即使你在background
中儲存的資料,在content-script
也能獲取到;chrome.storage.sync
可以跟隨當前登入使用者自動同步,這臺電腦修改的設定會自動同步到其它電腦,很方便,如果沒有登入或者未聯網則先儲存到本地,等登入了再同步至網路;
需要宣告storage
許可權,有chrome.storage.sync
和chrome.storage.local
2種方式可供選擇,使用示例如下:
// 讀取資料,第一個引數是指定要讀取的key以及設定預設值
chrome.storage.sync.get({color: 'red', age: 18}, function(items) {
console.log(items.color, items.age);
});
// 儲存資料
chrome.storage.sync.set({color: 'blue'}, function() {
console.log('儲存成功!');
});
8.6. webRequest
通過webRequest系列API可以對HTTP請求進行任性地修改、定製,這裡通過beforeRequest
來簡單演示一下它的冰山一角:
//manifest.json
{
// 許可權申請
"permissions":
[
"webRequest", // web請求
"webRequestBlocking", // 阻塞式web請求
"storage", // 外掛本地儲存
"http://*/*", // 可以通過executeScript或者insertCSS訪問的網站
"https://*/*" // 可以通過executeScript或者insertCSS訪問的網站
],
}
// background.js
// 是否顯示圖片
var showImage;
chrome.storage.sync.get({showImage: true}, function(items) {
showImage = items.showImage;
});
// web請求監聽,最後一個引數表示阻塞式,需單獨宣告許可權:webRequestBlocking
chrome.webRequest.onBeforeRequest.addListener(details => {
// cancel 表示取消本次請求
if(!showImage && details.type == 'image') return {cancel: true};
// 簡單的音視訊檢測
// 大部分網站視訊的type並不是media,且視訊做了防下載處理,所以這裡僅僅是為了演示效果,無實際意義
if(details.type == 'media') {
chrome.notifications.create(null, {
type: 'basic',
iconUrl: 'img/icon.png',
title: '檢測到音視訊',
message: '音視訊地址:' + details.url,
});
}
}, {urls: ["<all_urls>"]}, ["blocking"]);
8.7. 國際化
外掛根目錄新建一個名為_locales
的資料夾,再在下面新建一些語言的資料夾,如en
、zh_CN
、zh_TW
,然後再在每個資料夾放入一個messages.json
,同時必須在清單檔案中設定default_locale
。
_locales\en\messages.json
內容:
{
"pluginDesc": {"message": "A simple chrome extension demo"},
"helloWorld": {"message": "Hello World!"}
}
_locales\zh_CN\messages.json
內容:
{
"pluginDesc": {"message": "一個簡單的Chrome外掛demo"},
"helloWorld": {"message": "你好啊,世界!"}
}
在manifest.json
和CSS
檔案中通過__MSG_messagename__
引入,如:
{
"description": "__MSG_pluginDesc__",
// 預設語言
"default_locale": "zh_CN",
}
JS中則直接chrome.i18n.getMessage("helloWorld")
。
測試時,通過給chrome建立一個不同的快捷方式chrome.exe --lang=en
來切換語言,如:
英文效果:
中文效果:
8.8. API總結
比較常用用的一些API系列:
- chrome.tabs
- chrome.runtime
- chrome.webRequest
- chrome.window
- chrome.storage
- chrome.contextMenus
- chrome.devtools
- chrome.extension
經驗總結
9.1. 檢視已安裝外掛路徑
已安裝的外掛原始碼路徑:C:\Users\使用者名稱\AppData\Local\Google\Chrome\User Data\Default\Extensions
,每一個外掛被放在以外掛ID為名的資料夾裡面,想要學習某個外掛的某個功能是如何實現的,看人家的原始碼是最好的方法了:
如何檢視某個外掛的ID?進入 chrome://extensions ,然後勾線開發者模式即可看到了。
9.2. 特別注意background的報錯
很多時候你發現你的程式碼會莫名其妙的失效,找來找去又找不到原因,這時開啟background的控制檯才發現原來某個地方寫錯了導致程式碼沒生效,正式由於background報錯的隱蔽性(需要主動開啟對應的控制檯才能看到錯誤),所以特別注意這點。
9.3. 如何讓popup頁面不關閉
在對popup頁面審查元素的時候popup會被強制開啟無法關閉,只有控制檯關閉了才可以關閉popup,原因很簡單:如果popup關閉了控制檯就沒用了。這種方法在某些情況下很實用!
9.4. 不支援內聯JavaScript的執行
也就是不支援將js直接寫在html中,比如:
<input id="btn" type="button" value="收藏" onclick="test()"/>
報錯如下:
Refused to execute inline event handler because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
解決方法就是用JS繫結事件:
$('#btn').on('click', function(){alert('測試')});
另外,對於A標籤,這樣寫href="javascript:;"
然後用JS繫結事件雖然控制檯會報錯,但是不受影響,當然強迫症患者受不了的話只能寫成href="#"
了。
如果這樣寫:
<a href="javascript:;" id="get_secret">請求secret</a>
報錯如下:
Refused to execute JavaScript URL because it violates the following Content Security Policy directive: "script-src 'self' blob: filesystem: chrome-extension-resource:". Either the 'unsafe-inline' keyword, a hash ('sha256-...'), or a nonce ('nonce-...') is required to enable inline execution.
9.5. 注入CSS的時候必須小心
由於通過content_scripts
注入的CSS優先順序非常高,幾乎僅次於瀏覽器預設樣式,稍不注意可能就會影響一些網站的展示效果,所以儘量不要寫一些影響全域性的樣式。
之所以強調這個,是因為這個帶來的問題非常隱蔽,不太容易找到,可能你正在寫某個網頁,昨天樣式還是好好的,怎麼今天就突然不行了?然後你辛辛苦苦找來找去,找了半天才發現竟然是因為外掛裡面的一個樣式影響的!
打包與釋出
打包的話直接在外掛管理頁有一個打包按鈕:
然後會生成一個.crx
檔案,要釋出到Google應用商店的話需要先登入你的Google賬號,然後花5個$註冊為開發者,本人太窮,就懶得親自驗證了,有釋出需求的自己去整吧。
參考
11.1. 官方資料
推薦檢視官方文件,雖然是英文,但是全且新,國內的中文資料都比較舊(注意以下全部需要FQ):
11.2. 第三方資料
部分中文資料,不是特別推薦:
附圖
附圖:Chrome高清png格式logo:
【轉載文章務必保留出處和署名,謝謝!】
--------------------- 本文來自 UU_Yang 的CSDN 部落格 ,全文地址請點選:https://blog.csdn.net/shellching/article/details/78224230?utm_source=copy