整合营销服务商

电脑端+手机端+微信端=数据同步管理

免费咨询热线：

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插件（教程）

  1. 实现效果：


  2. 简单理解：chrome扩展程序就是一个web应用，小型网站，只不过是在chrome上多了个快捷方式
  3. 必备知识(初级即可)：
html
css
javascript
1
2
3
  1. 必备工具: 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

参数说明:

  1. name 插件名称
  2. version 插件的版本号
  3. manifest_version 指定清单文件格式的版本, 2就OK了
  4. description 插件描述
  5. icons 插件图标，PNG格式， 需准备三个图标文件:
  6. 16x16（扩展信息栏）
  7. 48x48（扩展管理页面）
  8. 128x128（用在安装过程中）
  9. 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 href="https://www.baidu.com/"><img src="images/baidu.ico" alt="">百度</a>
 <a href="https://www.google.com.hk/"><img src="images/google.ico" alt="">谷歌</a>
 <a href="https://cn.bing.com/"><img src="images/bing.ico" alt="">必应</a>
 <a href="https://www.sogou.com/"><img src="images/sogou.ico" alt="">搜狗</a>
 <a href="https://www.so.com/"><img src="images/so.ico" alt="">360</a>
 </div> 
 <div class="footer">
 <a href="https://www.pengshiyu.com/message.html">问题反馈</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 –> 更多工具 –> 扩展程序 -> 打开“开发者模式”

有两个方法：

  1. 加载已解压的扩展程序 -> 将文件夹chrome-search-tool 拖入就行（多用于调试，修改文件后刷新即可）
  2. 打包扩展程序 -> 选择打包扩展程序文件夹的路径 -> 生成crx扩展名的文件 -> 拖入chrome

学会编写简单插件之后，剩下的就是自己动手扩展，实现自己的小功能了

--------------------- 本文来自 彭世瑜 的CSDN 博客 ，全文地址请点击：https://blog.csdn.net/mouday/article/details/82885948?utm_source=copy


在线咨询
上一篇：HTML5表单（续）
下一篇：纯CSS实现水杯和心形两个复杂图标，让你轻松实现自己

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

推荐阅读
友情链接 乌兰县 富顺县 博罗县 庐山区 西沙群岛 汾西县 网站制作
Copyright © 2002-2019 雨点网络设计有限公司 版权所有   冀ICP备11025394号
联系电话：   E-mail：279303980@qq.com  
主营业务：技术文章网站建设、网站定制、技术文章营销型网站建设、技术文章网站优化、技术文章微商城制作、三级分销系统开发
电话沟通
在线客服