Chrome 擴展(插件)開發(fā)官方入門教程
譯自：https://developer.chrome.com/extensions/getstarted
入門教程
擴展由不同但相互聯(lián)系的組件組成。組件可以包括后臺腳本，內容腳本，選項頁，交互頁面 和各種邏輯文件。擴展組件是使用 Web 開發(fā)技術創(chuàng)建的：HTML，CSS 和 JavaScript。擴展的組件各有其功能，并且是可選的。
本教程將構建一個擴展，允許用戶更改 developer.chrome.com 上任何頁面的背景顏色。我們將使用許多核心組件來介紹它們之間的關系。
首先，創(chuàng)建一個新目錄來保存擴展名的文件。
創(chuàng)建 Manifest
擴展始于 manifest ，我們先創(chuàng)建一個 manifest.json 文件，包含如下代碼。
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"manifest_version": 2
}
包含 manifest 文件的目錄可在開發(fā)人員模式下以其當前狀態(tài)添加為擴展。
在瀏覽器地址欄中輸入 chrome://extensions, 打開擴展管理頁面。
也可以通過單擊 Chrome 菜單，將鼠標懸停在更多工具上，然后選擇擴展程序來打開擴展程序管理頁面。
通過單擊開發(fā)人員模式旁邊的切換開關啟用開發(fā)人員模式。
單擊加載已解壓的擴展程序按鈕，然后選擇擴展目錄。
該擴展程序已成功安裝。由于 manifest 中未包含任何圖標，因此將為擴展名創(chuàng)建通用工具欄圖標。
增加指令
盡管已安裝完擴展，但還沒有程序邏輯。通過創(chuàng)建名為 background.js 的文件并將其放置在擴展目錄中，來引入后臺腳本。
后臺腳本和許多其他重要組件一樣必須在 manifest 中注冊。在 manifest 中注冊后臺腳本會告訴擴展要引用哪個文件，以及該文件的行為。
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
現(xiàn)在，該擴展程序知道它包含一個非持久性后臺腳本，并將掃描注冊文件中需要監(jiān)聽的重要事件。
該插件監(jiān)聽被安裝后，來自持久化變量的消息。首先在后臺腳本中包含一個 runtime.onInstalled 的監(jiān)聽事件。在 onInstalled 監(jiān)聽器內部，擴展使用 storage API 設置一個值。這將允許多個擴展組件訪問該值并進行更新。
chrome.storage.sync.set({color:'#3aa757'},function(){
console.log("The color is green.");
});
});
大部分 API，包括 storage api，必須被注冊在 manifest 的 permissions 字段中給插件使用。
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"manifest_version": 2
}
進到擴展管理頁面，然后單擊重新加載。能看到一個帶有藍色鏈接（背景頁）的新字段 查看視圖。
點擊鏈接，查看后臺腳本的 console.log。顯示 "The color is green."
引入交互界面
擴展可以有多種形式的用戶界面，這次我們使用 popup 彈窗。創(chuàng)建一個名為 popup.html 的文件并將其添加到該目錄。該擴展程序通過點擊按鈕來更改背景顏色。
<html>
<head>
<style>
button{
height: 30px;
width: 30px;
outline: none;
}
style>
head>
<body>
<buttonid="changeColor">button>
body>
html>
與后臺腳本一樣，需要在 page_action 下的 manifest 中將此文件指定為 popup 彈出窗口。
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"background": {
"scripts": ["background.js"],
"persistent": false
},
"page_action": {
"default_popup": "popup.html"
},
"manifest_version": 2
}
工具欄圖標的名稱也包含在 page_action 的 default_icons 字段下。在此處下載 images 文件夾，將其解壓縮，放置在擴展程序的目錄中。更新 manifest，以便讓擴展程序知道如何使用圖像。
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"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
}
擴展程序也會在擴展程序管理頁面上顯示圖像，權限警告和網(wǎng)站圖標。這些圖像在 manifest 的 icons 下指定。
"name": "Getting Started Example",
"version": "1.0",
"description": "Build an Extension!",
"permissions": ["storage"],
"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"
}
},
"icons": {
"16": "images/get_started16.png",
"32": "images/get_started32.png",
"48": "images/get_started48.png",
"128": "images/get_started128.png"
},
"manifest_version": 2
}
如果在此階段重新加載擴展，它將包含一個灰度圖標，但不會有任何功能差異。因為 page_action 在 manifest 已聲明，因此由擴展決定何時告訴瀏覽器用戶可與 popup.html 進行交互。
在 runtime.onInstalled 偵聽器事件中，使用 declarativeContent API 將聲明的規(guī)則添加到后臺腳本中。
chrome.storage.sync.set({color:'#3aa757'},function(){
console.log('The color is green.');
});
chrome.declarativeContent.onPageChanged.removeRules(undefined,function(){
chrome.declarativeContent.onPageChanged.addRules([{
conditions:[newchrome.declarativeContent.PageStateMatcher({
pageUrl:{hostEquals:'developer.chrome.com'},
})
],
actions:[newchrome.declarativeContent.ShowPageAction()]
}]);
});
});
此擴展需要 declarativeContent api 的權限。
"name": "Getting Started Example",
...
"permissions": ["declarativeContent", "storage"],
...
}
現(xiàn)在，當用戶訪問到包含 developer.chrome.com 的 URL 時，瀏覽器將在工具欄中顯示一個全彩頁面操作圖標。當該圖標為全彩時，用戶可以單擊它以查看popup.html。
彈出界面的最后一步是為按鈕添加顏色。使用以下代碼創(chuàng)建一個名為 popup.js的文件并將其添加到擴展目錄。
chrome.storage.sync.get('color',function(data){
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
此代碼從 popup.html 獲取按鈕，并從存儲中拿到顏色值。然后，它將此顏色用作按鈕的背景。將 popup.js script 標簽包含到 popup.html 中。
...
<body>
<buttonid="changeColor">button>
<scriptsrc="popup.js">script>
body>html>
重新加載擴展以查看綠色按鈕。
邏輯層
現(xiàn)在，該擴展程序知道該彈出窗口應對 developer.chrome.com 上的用戶可用，并顯示一個彩色按鈕，但需要邏輯來進行進一步的用戶交互。更新 popup.js 以包含以下代碼。
...
changeColor.onclick=function(element){
let color = element.target.value;
chrome.tabs.query({active:true, currentWindow:true},function(tabs){
chrome.tabs.executeScript(
tabs[0].id,
{code:'document.body.style.backgroundColor = "'+ color +'";'});
});
};
更新的代碼在按鈕上添加了 onclick 事件，該事件執(zhí)行以代碼方式注入的內容腳本。將頁面的背景色變成與按鈕相同的顏色。使用代碼注入可以允許用戶調用內容腳本，而不用將不需要的代碼自動插入到網(wǎng)頁中。
manifest 將需要 activeTab 權限，以允許擴展程序臨時訪問 tabs API。這使擴展程序可以調用 tabs.executeScript。
"name": "Getting Started Example",
...
"permissions": ["activeTab", "declarativeContent", "storage"],
...
}
該擴展程序現(xiàn)在可以正常使用了！重新加載擴展程序，刷新此頁面，打開彈出窗口，然后單擊按鈕將其變?yōu)榫G色！但是，某些用戶可能希望將背景更改為其他顏色。
給用戶選項
該擴展程序當前僅允許用戶將背景更改為綠色。包含一個選項頁面使用戶可以更好地控制擴展功能，從而進一步自定義其瀏覽體驗。
首先在目錄中創(chuàng)建一個名為 options.html 的文件，并包含以下代碼。
<html>
<head>
<style>
button{
height: 30px;
width: 30px;
outline: none;
margin: 10px;
}
style>
head>
<body>
<divid="buttonDiv">
div>
<div>
<p>Choose a different background color!p>
div>
body>
<scriptsrc="options.js">script>
html>
然后在 manifest 的 options_page 中注冊。
"name": "Getting Started Example",
...
"options_page": "options.html",
...
"manifest_version": 2
}
重新加載擴展程序，點擊詳情
向下滾動詳細信息頁面，然后選擇擴展選項以查看選項頁面，盡管當前該頁面將顯示為空白。
最后一步是添加選項邏輯。使用以下代碼在擴展目錄中創(chuàng)建一個名為 options.js 的文件。
const kButtonColors =['#3aa757','#e8453c','#f9bb2d','#4688f1'];
functionconstructOptions(kButtonColors){
for(let item of kButtonColors){
let button = document.createElement('button');
button.style.backgroundColor = item;
button.addEventListener('click',function(){
chrome.storage.sync.set({color: item},function(){
console.log('color is '+ item);
})
});
page.appendChild(button);
}
}
constructOptions(kButtonColors);
提供了四個顏色選項，然后使用 onclick 事件監(jiān)聽器將它們生成為選項頁面上的按鈕。用戶單擊按鈕時，它將更新擴展程序全局存儲中的顏色值。由于所有擴展名文件都從全局存儲中提取顏色信息，因此無需更新其他值。下一步
恭喜你！該目錄現(xiàn)在包含一個功能齊全的 Chrome 擴展程序，盡管比較簡單。
官方文檔中文版翻譯:
https://dev.crxhome.org