Chrome插件從零開(kāi)始開(kāi)發(fā)指南（一）完成一個(gè)基礎(chǔ)示

Chrome插件從零開(kāi)始開(kāi)發(fā)指南（一）完成一個(gè)基礎(chǔ)示例工程

介

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

基礎(chǔ)知識(shí)

本文參考 Chrome Extensions V3版本開(kāi)發(fā)指南，接下來(lái)我們簡(jiǎn)單地介紹一下一個(gè)插件的組成，

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

manifest.json：插件的 meta 信息，包含插件的名稱、版本號(hào)、圖標(biāo)、腳本文件名稱等信息，從這里你可以看到全部的參數(shù)。
popup：點(diǎn)擊插件觸發(fā)的彈框頁(yè)面，會(huì)創(chuàng)建一個(gè)獨(dú)立的瀏覽器頁(yè)面實(shí)例。
options：插件的擴(kuò)展配置頁(yè)面，會(huì)創(chuàng)建一個(gè)獨(dú)立的瀏覽器頁(yè)面實(shí)例。
background.js：插件的后臺(tái)運(yùn)行腳本，單獨(dú)地運(yùn)行在一個(gè)瀏覽器實(shí)例中。

manifest.json 示例

{
  "manifest_version": 3,
  "name": "Chrome 插件開(kāi)發(fā) 示例",
  "description": "這是一個(gè) Chrome 開(kāi)發(fā)示例工程",
  "version": "1.0",
  "permissions": [ // 插件需要的權(quán)限信息 依次為：數(shù)據(jù)存儲(chǔ)、訪問(wèn)活躍的標(biāo)簽頁(yè)、執(zhí)行插入腳本
    "storage", "activeTab", "scripting"
  ],
  // 時(shí)間
  "action": {
    // 設(shè)置插件在插件區(qū)域的icon
    "default_icon": {
      "16": "readIcon.png",
      "32": "readIcon.png",
      "64": "readIcon.png",
      "128": "readIcon.png"
    },
    // 插件在插件區(qū)域被點(diǎn)擊時(shí)的彈出頁(yè)面
    "default_popup": "popup.html"
  },
  // 后臺(tái)運(yùn)行腳本
  "background": {
    "service_worker": "background.js"
  },
  // 全局icon 會(huì)出現(xiàn)在配置頁(yè)面的icon中
  "icons": {
    "16": "bookIcon.png",
    "32": "bookIcon.png",
    "64": "bookIcon.png",
    "128": "bookIcon.png"
  },
  // 配置頁(yè)面
  "options_page": "options.html"
}

popup 事件

在插件區(qū)域點(diǎn)擊咱們插件后將觸發(fā)popup 事件，喚起 popup.html 頁(yè)面

option 事件

點(diǎn)擊右鍵插件中的選項(xiàng)按鈕，將觸發(fā)option 事件，喚起 options.html 頁(yè)面

background 事件

當(dāng)插件被載入后，將后臺(tái)執(zhí)行 background.js 腳本

開(kāi)始動(dòng)手

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

那我們就開(kāi)始吧！先創(chuàng)建一個(gè)文件夾，命名為 start，然后用編輯器打開(kāi)文件夾，開(kāi)始編碼啦，我使用的是vscode，當(dāng)然任何編輯器都可以完成這項(xiàng)編碼。

創(chuàng)建 manifest.json 描述文件

創(chuàng)建一個(gè) manifest.json 文件

{
  "manifest_version": 3,
  "name": "Chrome 插件開(kāi)發(fā) 示例",
  "description": "這是一個(gè) Chrome 開(kāi)發(fā)示例工程",
  "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并添加到文件夾中，這里先沒(méi)有配置popup頁(yè)面和option頁(yè)面，不著急，一步步來(lái)。

Background Js 后臺(tái)執(zhí)行程序

創(chuàng)建一個(gè) background.js 文件

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

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

然后就可以嘗試一下插件的運(yùn)行啦，進(jìn)入插件頁(yè)面，先在右上角開(kāi)啟開(kāi)發(fā)者模式，然后點(diǎn)擊加載已解壓的擴(kuò)展程序，找到你的 start 文件夾加載進(jìn)來(lái)。

此時(shí)頁(yè)面上就會(huì)出現(xiàn)你的插件了，你會(huì)發(fā)現(xiàn)在有一個(gè)Service Worker視圖可以點(diǎn)擊，點(diǎn)擊查看一下

你就可以看到 background.js 成功運(yùn)行并打印了日志

Popup 彈出頁(yè)面

接下來(lái)我們配置一個(gè)彈出頁(yè)面，創(chuàng)建 popup.html

<!doctype html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>插件彈出頁(yè)面</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>

創(chuàng)建 popup.js

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

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

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

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

創(chuàng)建 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;
}

喔當(dāng)然，還要修改 manifest.json，添加上 popup.html的配置，還需要準(zhǔn)備一張?jiān)诓寮^(qū)域展示的 popupIcon 照片。

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

然后在插件頁(yè)面刷新重新加載

這時(shí)候我們就可以點(diǎn)擊插件啦，按照1點(diǎn)擊插件，然后點(diǎn)擊2，觸發(fā)按鈕事件

bingo! 當(dāng)前頁(yè)面的背景顏色變成綠色了。

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

Option 選項(xiàng)配置頁(yè)面

創(chuàng)建 options.html

<!DOCTYPE html>
<html>

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

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

</html>

創(chuàng)建 options.js

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

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

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

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

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

      // 創(chuàng)建點(diǎn)擊事件
      button.addEventListener("click", handleButtonClick);
      // 添加回頁(yè)面上
      page.appendChild(button);
    }
  });
}

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

然后再修改一次 manifest.json

{
  "manifest_version": 3,
  "name": "Chrome 插件開(kāi)發(fā) 示例",
  ... 省略 ...
    "default_popup": "popup.html"
  },
  "options_page": "options.html"
}

然后再重載一次插件，bingo！右鍵我們的插件就多出選項(xiàng)頁(yè)面啦

點(diǎn)擊進(jìn)入選項(xiàng)頁(yè)面，出現(xiàn)了我們?cè)诖a中配置的四個(gè)顏色了，隨便點(diǎn)選其他三種顏色。

我們就可以驚喜的發(fā)現(xiàn)在popup頁(yè)面的按鈕顏色也發(fā)生了變化了。

小結(jié)

至此，我們的起步示例工程的開(kāi)發(fā)就完成了。

在這次工程中，我們完成了配置基本信息、開(kāi)發(fā)了popup 彈出頁(yè)面、option 配置頁(yè)面，并實(shí)現(xiàn)了多頁(yè)面間的數(shù)據(jù)共享功能，并了解到各個(gè)頁(yè)面間的通信都需要通過(guò)第三者進(jìn)行處理，因?yàn)楸举|(zhì)上每個(gè)頁(yè)面都是獨(dú)立的進(jìn)程。

那我想提個(gè)小問(wèn)題，如果我想在選項(xiàng)配置頁(yè)面選擇了顏色之后，然后再點(diǎn)擊到一個(gè)具體的選項(xiàng)卡中自動(dòng)幫我修改背景顏色，應(yīng)該怎么實(shí)現(xiàn)呢？

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

索引擎快捷導(dǎo)航

使用方法：下載crx擴(kuò)展名文件，拖入chrome應(yīng)用管理界面即可

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

編寫(xiě)一個(gè)簡(jiǎn)單的chrome插件（教程）

實(shí)現(xiàn)效果：

簡(jiǎn)單理解：chrome擴(kuò)展程序就是一個(gè)web應(yīng)用，小型網(wǎng)站，只不過(guò)是在chrome上多了個(gè)快捷方式
必備知識(shí)(初級(jí)即可)：

html
css
javascript
1
2
3

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

第一步：初始化項(xiàng)目

項(xiàng)目文件說(shuō)明：

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

第二步：編寫(xiě)配置文件

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

參數(shù)說(shuō)明:

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

第三步：編寫(xiě)popup頁(yè)面

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">搜索導(dǎo)航</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="">必應(yīng)</a>
 <a ><img src="images/sogou.ico" alt="">搜狗</a>
 <a ><img src="images/so.ico" alt="">360</a>
 </div> 
 <div class="footer">
 <a >問(wèn)題反饋</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

其實(shí)就是html + css + javascript

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

第四步：配置圖標(biāo)

icon.png

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

對(duì)于簡(jiǎn)單的尺寸大小的裁剪，可以到這個(gè)網(wǎng)址處理：http://www.gaitubao.com/

第五步：打包安裝擴(kuò)展程序

打開(kāi)Chrome –> 更多工具 –> 擴(kuò)展程序 -> 打開(kāi)“開(kāi)發(fā)者模式”

有兩個(gè)方法：

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

學(xué)會(huì)編寫(xiě)簡(jiǎn)單插件之后，剩下的就是自己動(dòng)手?jǐn)U展，實(shí)現(xiàn)自己的小功能了

--------------------- 本文來(lái)自彭世瑜的CSDN 博客，全文地址請(qǐng)點(diǎn)擊：https://blog.csdn.net/mouday/article/details/82885948?utm_source=copy

在線咨詢

上一篇：HTML5表單（續(xù)）
下一篇：純CSS實(shí)現(xiàn)水杯和心形兩個(gè)復(fù)雜圖標(biāo)，讓你輕松實(shí)現(xiàn)自己

您的項(xiàng)目需求

*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營(yíng)銷服務(wù)商