Chrome插件從零開始開發指南（一）完成一個基礎示

Chrome插件從零開始開發指南（一）完成一個基礎示例工程

介

嗨，各位極客；在你的瀏覽器中裝上了多少插件呢？讓我猜猜：tampermonkey 油猴腳本，Chrono下載管理器，bilibilihelper，喔當然還有必不可少的 Adblock。有了解過這些插件是怎么運作的么？想要完成一個自己的插件么？快和我一起動手吧！

基礎知識

本文參考 Chrome Extensions V3版本開發指南，接下來我們簡單地介紹一下一個插件的組成，

Chrome 插件通常由以下幾部分組成：

manifest.json：插件的 meta 信息，包含插件的名稱、版本號、圖標、腳本文件名稱等信息，從這里你可以看到全部的參數。
popup：點擊插件觸發的彈框頁面，會創建一個獨立的瀏覽器頁面實例。
options：插件的擴展配置頁面，會創建一個獨立的瀏覽器頁面實例。
background.js：插件的后臺運行腳本，單獨地運行在一個瀏覽器實例中。

manifest.json 示例

{
  "manifest_version": 3,
  "name": "Chrome 插件開發 示例",
  "description": "這是一個 Chrome 開發示例工程",
  "version": "1.0",
  "permissions": [ // 插件需要的權限信息 依次為：數據存儲、訪問活躍的標簽頁、執行插入腳本
    "storage", "activeTab", "scripting"
  ],
  // 時間
  "action": {
    // 設置插件在插件區域的icon
    "default_icon": {
      "16": "readIcon.png",
      "32": "readIcon.png",
      "64": "readIcon.png",
      "128": "readIcon.png"
    },
    // 插件在插件區域被點擊時的彈出頁面
    "default_popup": "popup.html"
  },
  // 后臺運行腳本
  "background": {
    "service_worker": "background.js"
  },
  // 全局icon 會出現在配置頁面的icon中
  "icons": {
    "16": "bookIcon.png",
    "32": "bookIcon.png",
    "64": "bookIcon.png",
    "128": "bookIcon.png"
  },
  // 配置頁面
  "options_page": "options.html"
}

popup 事件

在插件區域點擊咱們插件后將觸發popup 事件，喚起 popup.html 頁面

option 事件

點擊右鍵插件中的選項按鈕，將觸發option 事件，喚起 options.html 頁面

background 事件

當插件被載入后，將后臺執行 background.js 腳本

開始動手

我們將按照官方示例完成一個示例工程，在這個工程中，我們將提供一個可以設置網頁背景顏色的小工具，并且在配置頁面提供多個顏色供用戶選擇。

那我們就開始吧！先創建一個文件夾，命名為 start，然后用編輯器打開文件夾，開始編碼啦，我使用的是vscode，當然任何編輯器都可以完成這項編碼。

創建 manifest.json 描述文件

創建一個 manifest.json 文件

{
  "manifest_version": 3,
  "name": "Chrome 插件開發 示例",
  "description": "這是一個 Chrome 開發示例工程",
  "version": "1.0",
  "permissions": [
    "storage", "activeTab", "scripting"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "icons": {
    "16": "icon.png",
    "32": "icon.png",
    "64": "icon.png",
    "128": "icon.png"
  },
}

找一張你喜歡的照片，命名為icon并添加到文件夾中，這里先沒有配置popup頁面和option頁面，不著急，一步步來。

Background Js 后臺執行程序

創建一個 background.js 文件

// 初始化一個顏色值
let color='#3aa757';

// 在chrome瀏覽器創建的時候，設置顏色初始值
chrome.runtime.onInstalled.addListener(()=> {
  // 需要注意的是，此時設置的持久對象的鍵名為 color 其值為 #3aa757
  chrome.storage.sync.set({ color });
  console.log('設置一個默認的顏色，默認顏色值為綠色 %cgreen', `color: ${color}`);
});

然后就可以嘗試一下插件的運行啦，進入插件頁面，先在右上角開啟開發者模式，然后點擊加載已解壓的擴展程序，找到你的 start 文件夾加載進來。

此時頁面上就會出現你的插件了，你會發現在有一個Service Worker視圖可以點擊，點擊查看一下

你就可以看到 background.js 成功運行并打印了日志

Popup 彈出頁面

接下來我們配置一個彈出頁面，創建 popup.html

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>插件彈出頁面</title>
    <link rel="stylesheet" href="button.css">
  </head>
  <body>
    <button id="changeColor"></button>
    <img url="icon.png"/>
    <!-- 引入js -->
    <script src="popup.js"></script>
  </body>
</html>

創建 popup.js

// 獲得 改變顏色的按鈕
let changeColor=document.getElementById("changeColor");

// 獲取當前已設置顏色
chrome.storage.sync.get("color", ({ color })=> {
  changeColor.style.backgroundColor=color;
});

// 創建按鈕點擊事件 觸發對當前激活的瀏覽器窗口中的當前激活的選項卡設置背景顏色
changeColor.addEventListener("click", async ()=> {
  let [tab]=await chrome.tabs.query({ active: true, currentWindow: true });
  
  // 注入執行js代碼
  chrome.scripting.executeScript({
    target: { tabId: tab.id },
    function: setPageBackgroundColor,
  });
});

// 注入執行的方法塊
// 設置body的背景顏色為目標顏色
function setPageBackgroundColor() {
  chrome.storage.sync.get("color", ({ color })=> {
    document.body.style.backgroundColor=color;
  });
}

創建 button.css

body {
  min-width: 357px;
  overflow-x: hidden;
}

img {
  margin: 5px;
  border: 2px solid black;
  vertical-align: middle;
  width: 75px;
  height: 75px;
}

button {
  height: 30px;
  width: 30px;
  outline: none;
  margin: 10px;
  border: none;
  border-radius: 2px;
}

button.current {
  box-shadow: 0 0 0 2px white,
              0 0 0 4px black;
}

喔當然，還要修改 manifest.json，添加上 popup.html的配置，還需要準備一張在插件區域展示的 popupIcon 照片。

{
  "manifest_version": 3,
  "name": "Chrome 插件開發 示例",
  ... 省略 ...
    "128": "icon.png"
  },
  "action": {
    "default_icon": {
      "16": "popupIcon.png",
      "32": "popupIcon.png",
      "64": "popupIcon.png",
      "128": "popupIcon.png"
    },
    "default_popup": "popup.html"
  }
}

然后在插件頁面刷新重新加載

這時候我們就可以點擊插件啦，按照1點擊插件，然后點擊2，觸發按鈕事件

bingo! 當前頁面的背景顏色變成綠色了。

似乎只有一個綠色不太合適，我們得為用戶提供更多的選擇，那就再做一個選項頁面，提供配置功能吧。

Option 選項配置頁面

創建 options.html

<!DOCTYPE html>
<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <title>插件選項配置頁面</title>
  <link rel="stylesheet" href="button.css">
</head>

<body>
  <div id="buttonDiv">
  </div>
  <div>
    <p>選擇一個新的背景顏色</p>
  </div>
  <script src="options.js"></script>
</body>

</html>

創建 options.js

// 獲取按鈕區域 div
let page=document.getElementById("buttonDiv");
// button.css 有一個 button current css 樣式，為選中的顏色添加出黑色邊框
let selectedClassName="current";
// 設置待選顏色按鈕
const presetButtonColors=["#3aa757", "#e8453c", "#f9bb2d", "#4688f1"];

// 創建按鈕事件 通過標記所選按鈕 保存顏色
function handleButtonClick(event) {
  // 從事件的父級中找到之前被選中的按鈕
  let current=event.target.parentElement.querySelector(
    `.${selectedClassName}`
  );
  // 從他的class列表中去掉選中狀態
  if (current && current !==event.target) {
    current.classList.remove(selectedClassName);
  }

  // 獲取按鈕攜帶的數據信息 也就是我們想要的顏色
  let color=event.target.dataset.color;
  // 添加選中狀態
  event.target.classList.add(selectedClassName);
  // 設置當前選中顏色
  chrome.storage.sync.set({ color });
}

// 按顏色列表依次添加按鈕到頁面
function constructOptions(buttonColors) {
  // 獲取當前已設置的顏色
  chrome.storage.sync.get("color", (data)=> {
    let currentColor=data.color;
    // 循環顏色列表
    for (let buttonColor of buttonColors) {
      // 創建按鈕 賦予按鈕顏色
      let button=document.createElement("button");
      button.dataset.color=buttonColor;
      button.style.backgroundColor=buttonColor;

      // 如果是當前已選中的按鈕，則設置
      if (buttonColor===currentColor) {
        button.classList.add(selectedClassName);
      }

      // 創建點擊事件
      button.addEventListener("click", handleButtonClick);
      // 添加回頁面上
      page.appendChild(button);
    }
  });
}

// js 被加載后 自執行初始化方法 創建按鈕
constructOptions(presetButtonColors);

然后再修改一次 manifest.json

{
  "manifest_version": 3,
  "name": "Chrome 插件開發 示例",
  ... 省略 ...
    "default_popup": "popup.html"
  },
  "options_page": "options.html"
}

然后再重載一次插件，bingo！右鍵我們的插件就多出選項頁面啦

點擊進入選項頁面，出現了我們在代碼中配置的四個顏色了，隨便點選其他三種顏色。

我們就可以驚喜的發現在popup頁面的按鈕顏色也發生了變化了。

小結

至此，我們的起步示例工程的開發就完成了。

在這次工程中，我們完成了配置基本信息、開發了popup 彈出頁面、option 配置頁面，并實現了多頁面間的數據共享功能，并了解到各個頁面間的通信都需要通過第三者進行處理，因為本質上每個頁面都是獨立的進程。

那我想提個小問題，如果我想在選項配置頁面選擇了顏色之后，然后再點擊到一個具體的選項卡中自動幫我修改背景顏色，應該怎么實現呢？

谷歌插件示例工程
https://github.com/GoogleChrome/chrome-extensions-samples
谷歌插件官方文檔
https://developer.chrome.com/docs/extensions/

索引擎快捷導航

使用方法：下載crx擴展名文件，拖入chrome應用管理界面即可

github地址：https://github.com/mouday/chrome-search-tool

編寫一個簡單的chrome插件（教程）

實現效果：

簡單理解：chrome擴展程序就是一個web應用，小型網站，只不過是在chrome上多了個快捷方式
必備知識(初級即可)：

html
css
javascript
1
2
3

必備工具: chrome瀏覽器（本次使用的版本是 69）

第一步：初始化項目

項目文件說明：

chrome-search-tool/
 ├── manifest.json # 配置文件
 ├── popup.html # 彈出窗口
 ├── icon.png # 擴展圖標
 └── images # 靜態資源文件(如images、css、js等)
1
2
3
4
5

第二步：編寫配置文件

manifest.json

{ 
 "name": "searchTool", 
 "manifest_version":2,
 "version": "0.0.1", 
 "description": "便于搜索的chrome插件",
 "browser_action": { 
 "default_icon": "icon.png" ,
 "default_title": "搜索集合工具",
 "default_popup": "popup.html"
 } 
}
1
2
3
4
5
6
7
8
9
10
11

參數說明:

name 插件名稱
version 插件的版本號
manifest_version 指定清單文件格式的版本, 2就OK了
description 插件描述
icons 插件圖標，PNG格式，需準備三個圖標文件:
16x16（擴展信息欄）
48x48（擴展管理頁面）
128x128（用在安裝過程中）
default_locale 國際化支持，支持何種語言的瀏覽器，雖然官方推薦，不過我沒用

第三步：編寫popup頁面

popup.html

<meta charset="utf8">
<base target="_blank" />
<style>
 .main{
 width: 100px;
 height: 200px;
 font-size: 18px;
 text-align: center;
 }
 a{
 text-decoration: none;
 }
 .title{
 width: 100%;
 font-size: 20px;
 background-color: #E8E8E8;
 }
 img{
 width: 18px;
 height: 18px;
 }
 .links{
 margin-top: 5px; 
 }
 .links a{
 width: 100%;
 display: block;
 margin: 4px 0;
 
 color: black;
 line-height: 25px;
 }
 .links a:hover{
 background-color: red;
 color: white;
 }
 .links img{
 line-height: 25px;
 }
 .footer a{
 font-size: 12px;
 color: grey;
 }
</style> 
<div class="main">
 <div class="title">搜索導航</div>
 <div class="links">
 <a ><img src="images/baidu.ico" alt="">百度</a>
 <a ><img src="images/google.ico" alt="">谷歌</a>
 <a ><img src="images/bing.ico" alt="">必應</a>
 <a ><img src="images/sogou.ico" alt="">搜狗</a>
 <a ><img src="images/so.ico" alt="">360</a>
 </div> 
 <div class="footer">
 <a >問題反饋</a>
 </div>
</div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61

其實就是html + css + javascript

備注：如果出現中文亂碼，記得在文件頂部加入<meta charset="utf8">，此方法和html編碼是一樣的，沒有什么特別之處

第四步：配置圖標

icon.png

可以百度圖片上找一張方塊圖片，最好找png格式的

對于簡單的尺寸大小的裁剪，可以到這個網址處理：http://www.gaitubao.com/

第五步：打包安裝擴展程序

打開Chrome –> 更多工具 –> 擴展程序 -> 打開“開發者模式”

有兩個方法：

加載已解壓的擴展程序 -> 將文件夾chrome-search-tool 拖入就行（多用于調試，修改文件后刷新即可）
打包擴展程序 -> 選擇打包擴展程序文件夾的路徑 -> 生成crx擴展名的文件 -> 拖入chrome

學會編寫簡單插件之后，剩下的就是自己動手擴展，實現自己的小功能了

--------------------- 本文來自彭世瑜的CSDN 博客，全文地址請點擊：https://blog.csdn.net/mouday/article/details/82885948?utm_source=copy

在線咨詢

上一篇：HTML5表單（續）
下一篇：純CSS實現水杯和心形兩個復雜圖標，讓你輕松實現自己

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商