插件由不同的但相互聯系的組件組成。組件可以包括后台腳本、內容腳本、選項頁、UI元素和各種邏輯文件。這些組件是使用HTML、CSS和JavaScript，即Web開發技術創建的。插件的組件取決於其功能，並可能不需要所有組件。
創建清單文件
插件開發首先從清單文件開始。創建名為manifest.json並包含以下代碼的文件，或在此處下載該文件。
manifest.json
{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "manifest_version": 2 }
包含清單文件的目錄可以在瀏覽器開發人員模式下進行添加，具體如下。
1.在瀏覽器輸入chrome://extensions打開插件管理頁
插件管理頁也可以通過點擊Chrom菜單，在“更多工具”處懸停，選擇擴展程序。
2.通過單擊開發者模式旁邊的切換開關來棄用開發模式。
3.單機：“加載已解壓的擴展程序”，選擇插件目錄。
現在插件已經被安裝。因為清單文件中沒有指定個圖標，一個通用的插件圖標顯示在工具欄。
添加指令
盡管插件已經安裝，但它沒有指令。創建一個名為background.js的文件引入背景腳本，或者在這里下載，然后放到插件目錄中。
背景腳本，或者其它重要的組件都必須在清單文件中注冊。在清單文件中注冊一個背景腳本是為了告訴腳本哪些文件被引用，這些文件有什么作用。
background.js
{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "background": { "scripts": ["background.js"], "persistent": false }, "manifest_version": 2 }
插件現在知道它包含了一個非持久的后台腳本，並將掃描已注冊的文件以獲取需要監聽的事件。
這個插件安裝后需要持久變量的信息。首先在背景腳本中包含一個runtime.OnInstalled的監聽（插件安裝安裝后觸發事件）。包含OnInstalled監聽，這個插件將通過storage API設置一個值。他允許多個插件組件訪問並更新該值。
background.js
chrome.runtime.onInstalled.addListener(function() { chrome.storage.sync.set({color: '#3aa757'}, function() { console.log("The color is green."); }); });
大多數API，包含storage API，必須在擴展的清單文件中的“permissions”屬性下注冊才能使用他們。
manifest.json
{ "name": "Getting Started Example", "version": "1.0", "description": "Build an Extension!", "permissions": ["storage"], "background": { "scripts": ["background.js"], "persistent": false }, "manifest_version": 2 }
回到擴展管理頁面並單擊重新加載鏈接，一個新的藍色攔截的字段-背景頁出現了。
單機這個背景頁鏈接看到北京腳本的控制台日志，“The color is green.”
引入用戶界面
插件可以有許多UI組件，但是這需要一個彈出層。在目錄中添加popup.html文件來創建，或者在這里下載。這個插件使用一個按鈕來改變背景的顏色。
popup.html
<!DOCTYPE html> <html> <head> <style> button { height: 30px; width: 30px; outline: none; } </style> </head> <body> <button id="changeColor"></button> </body> </html>
同背景腳本一樣，這個文件需要在清單文件的page_action屬性下指定為彈出層。
manifest.js
{ "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的屬性中指定。在這里下載圖片並解壓放到插件目錄中。更新清單文件后插件就知道如何使用這些圖片了。
manifest.js
{ "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 }
如果在此階段中心加載插件，它將會包含一個灰色的圖標，但不會有任何功能變化。因為page_action是在清單文件中聲明的，所以插件需要告訴瀏覽器用戶何時可以與popup.html交互。
在背景腳本中的runtime.onInstalled監聽器事件中，使用declarativeContent API添加聲明規則。
background.js
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()] }]); }); });
插件需要在清單文件中聲明請求declarativeContent API的許可。
manifest.js
{ "name": "Getting Started Example", ... "permissions": ["declarativeContent", "storage"], ... }
當用戶導航到包含“developer.chrome.com”的URL時瀏覽器工具欄會展示全彩頁面圖標。當圖標有顏色時，用戶可以單擊圖標查看popup.html。
彈出層UI的最后一步是為按鈕添加顏色。在插件目錄下創建一個名為popup.js的文件，代碼如下，或者在這里下載。
popup.js
let changeColor = document.getElementById('changeColor');
chrome.storage.sync.get('color', function(data) {
changeColor.style.backgroundColor = data.color;
changeColor.setAttribute('value', data.color);
});
這段代碼重popup.html獲取按鈕，並從存儲中請求顏色值。然后將顏色應用到網頁背景色中。在popup.html中引用popup.js腳本標簽。
popup.html
<!DOCTYPE html> <html> ... <body> <button id="changeColor"></button> <script src="popup.js"></script> </body> </html>
重新加載插件來查看綠色按鈕。
彈層邏輯
插件現在知道了彈層會在用戶訪問developer.chrome.com時生效並顯示彩色的按鈕，但是需要進一步的UI交互邏輯。更新popup.js來包含下面的代碼。
popup.js
let changeColor = document.getElementById('changeColor');
...
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事件，該事件觸發一個以編程方式注入內容的腳本。這將使頁面的背景顏色與按鈕的顏色相同。使用編程注入方式允許用戶調用內容腳本，而不是自動將多余的代碼插入到web頁面中。
清單文件需要activeTab許可來允許插件臨時請求tabs API。這使擴展能夠調用tabs.executeScript。
manifest.json
{ "name": "Getting Started Example", ... "permissions": ["activeTab", "declarativeContent", "storage"], ... }
插件現在具有了完整功能！重新加載插件，刷新頁面，打開彈層點擊按鈕來設置綠色！然而，一些用戶想改變不同的背景顏色。
用戶選項
擴展現在只允許用戶將背景顏色更改為綠色。提供一個設置頁可以讓用戶更好的使用擴展功能，進一步提高定制化的瀏覽體驗。
首先在插件目錄下添加一個名為options.html的文件，代碼如下，可以在這里下載。
options.html
<!DOCTYPE html> <html> <head> <style> button { height: 30px; width: 30px; outline: none; margin: 10px; } </style> </head> <body> <div id="buttonDiv"> </div> <div> <p>Choose a different background color!</p> </div> </body> <script src="options.js"></script> </html>
然后在清單文件中注冊設置頁。
manifest.json
{ "name": "Getting Started Example", ... "options_page": "options.html", ... "manifest_version": 2 }
重新加載擴展后點擊詳細信息。
向下滾動詳細信息頁面並選擇擴展程序選項，目前內容使空白的。
最后一步是添加設置邏輯。在插件目錄中創建一個名為options.js的文件，代碼如下，或者在這里下載。
options.js
let page = document.getElementById('buttonDiv');
const kButtonColors = ['#3aa757', '#e8453c', '#f9bb2d', '#4688f1'];
function constructOptions(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事件的監聽器選項頁面上生成按鈕，提供了四個顏色選項。當用戶點擊一個按鈕，會更新全局存儲中的顏色值。因為擴展的所有文件都從全局存儲中提取顏色信息，所以不需要更新其他值。
原文：https://developer.chrome.com/extensions/getstarted （注：原文是谷歌官方英文文檔，可能會打不開）