从 0 到 1 带你开发 Chrome 浏览器 Manifest V3 版本插件

`Chrome` 插件

一、什么是 `Chrome` 浏览器插件？

Chrome 浏览器插件可通过自定义界面、观察浏览器事件和修改网络来提升浏览体验。

二、`Chrome` 浏览器插件是如何构建的？

使用 Web 技术开构建 Chrome 插件：HTML、CSS、JS。

三、`Chrome` 浏览器插件可以做什么？

1. 设计界面

大多数扩展程序都需要某种类型的用户互动才能正常运行。扩展程序平台提供了多种方式来向扩展程序添加互动。这些方法包括从 Chrome 工具栏、侧边栏、上下文菜单等触发的弹出式窗口：

侧边栏（Side panel）
操作项（Action）
菜单项（Menus）

2. 控制浏览器

借助 Chrome 的扩展程序 API，可以改变浏览器的工作方式：

覆盖 Chrome 页面和设置项：Manifest.json 配置 chrome_settings_overrides
扩展开发者工具：Manifest.json 配置 devtools_page
显示通知：chrome.notifications API
管理历史记录：chrome.history API
控制标签页和窗口：chrome.tabs、chrome.tabGroups 和 chrome.windows 等 API
键盘快捷键：chrome.commands API
身份认证：chrome.identity API
管理插件：chrome.management API
提供建议：chrome.omnibox API
更新 Chrome 设置：chrome.proxy API
下载管理：chrome.downloads API
书签：chrome.bookmarks API
...

3. 控制网络

可以通过注入脚本、拦截网络请求以及使用 Web API 与网页进行交互，来控制和修改 Web：

注入 JS 和 CSS 文件
访问当前 Tab 页
控制 Web 请求
录音和屏幕截图
修改网站设置

四、`Chrome` 插件术语

1. 清单（`Manifest`）

Chrome 插件的清单是唯一且必须具有特定文件名的必需文件：manifest.json；

该文件列出了有关该扩展程序的结构和行为的重要信息。

1.1 示例展示

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "0.0.1",
  "description": "My Chrome Extension Description"
}

1.2 `manifest.json` 文件必需的字段

manifest_version：用于指定扩展程序使用的清单文件格式版本，目前是 3
name：插件名称，一般情况下 hover 插件图标展示的文案也是 name
version：插件版本

1.3 发布 `Chrome` 应用商店需要的字段

description：插件描述
icons：图标

image.png
name
version
description
icons

2. 操作项（`Action`）

控制扩展程序在 Chrome 浏览器工具栏中的图标。

2.1 示例

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "0.0.1",
  "description": "My Chrome Extension Description",
  "icons": {
    "16": "icons/icon_16.png",
    "32": "icons/icon_32.png",
    "48": "icons/icon_48.png",
    "128": "icons/icon_128.png"
  },
  "action": {
    "default_icon": "icons/icon.png",
    "default_title": "Popup Title",
    "default_popup": "popup.html"
  }
}

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    *{
      padding: 0;
      margin: 0;
    }
    div{
      width: 300px;
      height: 300px;
      text-align: center;
      line-height: 300px;
      background: gray;
    }
  </style>
</head>
<body>
  <div>popup html</div>
</body>
</html>

2.2 `Action` 字段

image.png

default_icon：工具栏展示的图片
default_title：hover 插件图标展示的文案
default_popup：点击图标弹出的页面

3. 背景（`Background - Service Worker`）

Service Worker 在后台运行并处理浏览器事件

在 V3 中使用 service worker 替换 background 页面

3.1 `Background` 在 `manifest V2 V3` 版本中的不同之处

V2 版本 background

{
  "background": {
    "scripts": [
      "backgroundContextMenus.js",
      "backgroundOauth.js"
    ],
    "persistent": false
  },
}

V3 版本 background

{
  "background": {
    "service_worker": "service_worker.js",
    "type": "module"
  }
}

3.2 示例

在上面的 Action 示例中添加以下代码

"background": {
  "service_worker": "service_worker.js"
}

激活 Service Worker

image.png

终止 Service Worker

image.png

3.3 终止 `Service Worker`

无操作 30 秒后。
单个请求的处理用时超过 5 分钟。
fetch 响应的传递时间超过 30 秒时。

3.4 `Service Worker DevTools`

点击 Chrome Service Worker 即可弹出 DevTools

image.png

4. 内容脚本（`Content scripts`）

在网页环境中运行 JavaScript 或 CSS。
通过 content_scripts 进行注册。

4.1 示例

在上面的 Service Worker 示例中添加以下代码

"content_scripts": [
  {
    "matches": ["https://lkcoffee.com/"],
    "js": ["content_scripts.js"]
  }
]

content_scripts.js 文件代码

console.log('this is content scripts')

4.2 页面注入

打开 https://lkcoffee.com/，并打开控制台

image.png

点击 content_scripts.js

image.png

五、开发 `Chrome` 插件

1. 新建项目并创建 `manifest.json` 文件

1.1 添加以下代码

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "0.0.1",
  "description": "My Chrome Extension Description"
}

1.2 在谷歌浏览器中打开管理扩展程序

第一种方式

image.png

第二种方式

image.png

第三种方式

浏览器输入：chrome://extensions/

1.3 点击【加载已解压的扩展程序】

image.png

选择刚刚创建的文件夹即可

image.png

1.4 可以看到扩展程序已经加载完成

image.png

包含名称、版本、描述、默认图标

1.5 固定插件

点击固定按钮，即可把插件固定在工具栏中

image.png

固定之后的样式

image.png

到了这一步，一个最最基础的插件已经完成了

2. 添加 `action` 中的 `popup html` 页面

以谷歌翻译模版为例

2.1 添加 `action icons`

创建 icons 文件夹，并添加图片

.
├── icons
│   └── icon.png
├── manifest.json

2.2 新建 `popup` 文件夹并创建 `index.html` 页面

2.2.1 同时创建 `index.css` 和 `index.js` 文件

目前的目录结构

.
├── icons
│   └── icon.png
├── manifest.json
└── popup
    ├── index.css
    ├── index.html
    └── index.js

2.2.2 填充 popup 代码

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <div class="plugin_search">
      <div class="plugin_search_bar">
          <input id="plugin_search_inp" />
          <input id="plugin_search_but" type="button" value="翻译" />
      </div>
      <div class="plugin_span">
          <span>翻译此页面</span>
      </div>
  </div>
  
  <div class="plugin_footer">
      <span>© 2015 Google -</span>
      <a target="_blank" href="https://google.com/">扩展程序选项</a>
      <a target="_blank" href="https://translate.google.com/?source=gtx">Google 翻译</a>
  </div>
</body>
<script src="./index.js"></script>
</html>

index.css

*{
  padding: 0;
  margin: 0;
  list-style: none;
  text-decoration: none;
}
.plugin_search{
  margin: 15px 30px 15px 30px;
}
.plugin_search_bar{
  margin: 8px 0 16px 0;
}
#plugin_search_inp{
  font-size: 14px;
  margin: 2px;
  height: 23px;
  width: 70%;
}
#plugin_search_but{
  box-shadow: none;
  background-color: #4d90fe;
  background-image: -webkit-linear-gradient(top,#4d90fe,#4787ed);
  border: 1px solid #3079ed;
  color: #fff;
  border-radius: 2px;
  cursor: default;
  font-size: 11px;
  font-weight: bold;
  text-align: center;
  white-space: nowrap;
  margin-right: 16px;
  height: 27px;
  line-height: 27px;
  width: 54px;
  outline: 0px;
  padding: 0 8px;
  box-sizing: content-box;
}
.plugin_span{
  color: #4285f4;
}
.plugin_footer{
  background-color: #f0f0f0;
  color: #636363;
  font-family: 'Roboto',sans-serif;
  font-size: 11px;
  margin-top: 9px;
  padding: 10px;
  text-align: center;
  width: 400px;
}
.plugin_footer a{
  color: #4285f4;
}

index.js

const plugin_search_but = document.getElementById('plugin_search_but')
const plugin_search_inp = document.getElementById('plugin_search_inp')
plugin_search_but.onclick = function () {
    alert('plugin_search_inp的值为：' + plugin_search_inp.value.trim())
}

2.3 `Manifest.json` 文件添加 `action` 字段

2.3.1 `Manifest.json` 文件内容

{
  "manifest_version": 3,
  "name": "My Chrome Extension",
  "version": "0.0.1",
  "description": "My Chrome Extension Description",
  "action": {
    "default_icon": "icons/icon.png",
    "default_title": "Popup Title",
    "default_popup": "popup/index.html"
  }
}

2.3.2 点击扩展程序刷新按钮

image.png

可以看到小图标已经展示出来了

image.png

2.3.3 `Hover` 图标展示 `default_title` 字段

image.png

2.3.4 点击图标

可以看到我们的 html 和 css 已经生效了

image.png

2.3.5 输入框输入，并点击翻译按钮

根据我们 index.js 文件中的代码，我们可以在输入框中输入文案，并点击翻译按钮

image.png

原来这就是惊喜

2.4 `Action popup` 控制台

点击图标，弹出 popup 页面，右键，会有【检查】选项，点击检查按钮

image.png

到了这一步，我们可以开发一个有点击动作的插件了

3. 添加 `background`（`service worker`）

3.1 如果我们在 `popup index.js` 中添加一个 `setInterval`，每隔几秒弹出一个 `alert`

setInterval(() => {
  alert('哈哈哈哈，我又出来了')
}, 3000)

保存代码之后，刷新插件，点击插件图标弹出 popup 页面，就会定时弹出 alert 框了

image.png

但是，当我们点击页面某处，把插件 popup 页面隐藏的时候，就会发现 alert 弹框不会再弹出了，只有在此展现 popup 页面的时候才会重新执行

那如果我想的是不展现 popup 的时候，也执行 alert 弹框，那就需要 background 了

3.2 新建 `background` 文件夹并创建 `service_worker.js` 文件

先把 popup index.js 中的 alert 删除
在 service_worker.js 中写入代码

setInterval(() => {
  alert('我是 background service worker 中弹出来的')
}, 3000)

.
├── background
│   └── service_worker.js
├── icons
│   └── icon.png
├── manifest.json
└── popup
    ├── index.css
    ├── index.html

3.3 `Manifest.json` 文件中添加 `background`

3.3.1 在上面 `action` 的基础上添加代码

"background": {
  "service_worker": "background/service_worker.js"
}

3.3.2 点击拓展程序刷新插件

发现会有错误出现

image.png

我们先点击检查视图后面的 Service Worker 弹出控制台

image.png
可以看出报错内容

这是因为 Service Workers 在插件中主要用于后台任务、推送通知等，而不是直接与用户交互。因此，alert 这类弹窗通常无法直接在 Service Worker 中使用。

image.png

我们点击【错误】按钮，你会发现，每隔三秒会刷新当前错误页面，是因为一直在执行 service_worker.js 中的代码

image.png

但是当 30s 之后，会发现不刷新了，这个时候我们点击返回，可以看到 service worker 已经被终止了

这个时候如果继续点击 service worker 则会继续触发当前程序

image.png

3.4 既然不能用 `alert`，那我们就换个 `notifications` 用一用

借助 chrome.notifications API，可以通过模板创建内容丰富的通知，并在系统任务栏中向用户显示这些通知。

3.4.1 修改 `service worker` 中的代码

setInterval(() => {
  chrome.notifications.create(
    {
      type: "basic",
      title: "Notifications Title",
      message: "Notifications message to display",
      iconUrl: "../icons/icon.png"
    },
    (notificationId) => {
      console.log('notificationId-->', notificationId)
    }
  );
}, 3000)

3.4.2 刷新插件

会发现还是会报错

说是 notifications 未定义

image.png

这个时候就涉及到 manifest.json 中的另一个字段了，权限（permissions）字段，使用 Chrome.XXX 的 API 绝大多数的时候都需要在 permissions 字段中添加，permissions 是一个 string[]

3.4.3 `manifest.json` 文件中添加 `permissions` 字段

添加如下代码

"permissions": [
  "notifications"
]

3.4.4 刷新插件，并点开 `service worker` 控制台

可以看到控制台中已经有通知的回调返回值了

image.png

那通知呢？

3.4.5 平台差异

平台差异：对于 Mac OS X 用户，通知的显示方式有所不同。用户看到的不是 Chrome 自己的通知，而是原生 Mac OS X 通知。

点开通知中心，即可看到通知

image.png

3.5 如果有多个 `JS` 需要引入怎么办？

如果还需要引入 module_1.js 和 module_2.js

3.5.1 `manifest.json` 中 `background` 字段添加 `type` 为 `module`

"background": {
  "service_worker": "background/service_worker.js",
  "type": "module"
},

3.5.2 在 `service_worker.js` 中 `import` 引入

import './module_1.js'
import './module_2.js'

3.5.3 刷新插件，打开 `Service worker` 控制台

每个 js 里面只是输出了一句话

image.png

到这一步，我们已经可以操作后台了

4. `Action（popup）` 和 `background（service worker）` 之间的通信

点击翻译的时候，发一条信息

image.png

4.1 先打印下 `popup.js` 中的 `Chrome` 数据

plugin_search_but.onclick = function () {
  // alert('plugin_search_inp的值为：' + plugin_search_inp.value.trim())
  console.log('chrome', chrome)
}

image.png

4.2 先把 `popup.js` 中的点击事件修改下

改成点击之后向 Service Worker 发送消息

plugin_search_but.onclick = function () {
  // alert('plugin_search_inp的值为：' + plugin_search_inp.value.trim())
  console.log('chrome', chrome)
  // 向 Service Worker 发送消息
  chrome.runtime.sendMessage({
    action: 'fromPopup',
    message: 'Hello from Popup!'
  });
}

4.3 只需要在 `service_worker.js` 中接收消息即可

把之前的代码注释/删除即可

chrome.runtime.onMessage.addListener(async (message, sender, sendResponse) => {
  if (message.action === 'fromPopup') {
    chrome.notifications.create(
      {
        type: "basic",
        title: "Notifications Title",
        message: "Notifications message to display",
        iconUrl: "../icons/icon.png"
      },
      (notificationId) => {
        console.log('notificationId-->', notificationId)
      }
    );
  }
});

4.4 刷新插件

点击图标，弹出 popup 页面，点击翻译按钮，点击消息中心

image.png

5. 内容脚本（`Content Script`）注入

如果需要在某个页面中注入脚本进去，那就用到了 content_scripts

更新 content script 之后需要刷新对应的页面

5.1 新建 `content` 文件夹，并创建 `index.js` 文件

写入代码

console.log('this is content js')
console.log('document', document)
console.log('location', location)
console.log('window', window)

.
├── background
│   ├── module_1.js
│   ├── module_2.js
│   └── service_worker.js
├── content
│   └── index.js
├── icons
│   └── icon.png
├── manifest.json
└── popup
    ├── index.css
    ├── index.html
    └── index.js

5.2 在 `manifest.json` 文件中添加 `content_scripts`

"content_scripts": [
  {
    "matches": ["https://lkcoffee.com/"],
    "js": ["content/index.js"]
  }
]

可以看出我们引入了 js 文件和匹配了域名

5.3 打开 https://lkcoffee.com/ 并打开控制台

image.png

5.4 在当前页面中插入面板框，并可拖拽

使用 jquery

在 content 中创建 index.css 和 jquery.js（可在 CDN 上下载）
在 index.css 上写入面板样式
在 index.js 上创建 dom 和监听鼠标事件
在 manifest.json 中引入

manifest.json 文件

"content_scripts": [
  {
    "matches": ["https://lkcoffee.com/"],
    "css": ["content/index.css"],
    "js": ["content/jquery.js", "content/index.js"]
  }
]

JS/CSS 注入多个时，按照数组顺序注入，所以如果 JS/CSS 有多个的话，需要注意引用关系。
index.css 文件

#cj_move_page{
  width: 400px; 
  user-select: none; 
  background: white; 
  border: 1px solid; 
  height: 400px; 
  position: fixed; 
  right: 0; 
  bottom: 0; 
  z-index: 1000001;
}
#cj_move_h3{
  text-align: center; 
  line-height: 40px; 
  cursor: move;
}

index.js 文件

console.log('this is content js')
console.log('document', document)
console.log('location', location)
console.log('window', window)

//创建页面函数
function createPage () {
  const page = $('<div id="cj_move_page"></div>')
  const h3 = $('<h3 id="cj_move_h3">my Plugin</h3>')
  page.append(h3)
  $('body').append(page)
  //拖拽
  drag(cj_move_h3)
}
createPage()

//拖拽
function drag(ele) {
  let oldX, oldY, newX, newY
  ele.onmousedown = function (e) {
    if (!cj_move_page.style.right && !cj_move_page.style.bottom) {
      cj_move_page.style.right = 0
      cj_move_page.style.bottom = 0
    }
    oldX = e.clientX
    oldY = e.clientY
    document.onmousemove = function (e) {
      newX = e.clientX
      newY = e.clientY
      cj_move_page.style.right = parseInt(cj_move_page.style.right) - newX + oldX + 'px'
      cj_move_page.style.bottom = parseInt(cj_move_page.style.bottom) - newY + oldY + 'px'
      oldX = newX
      oldY = newY
    }
    document.onmouseup = function () {
      document.onmousemove = null
      document.onmouseup = null
    }
  }
}

5.5 刷新 `Chrome` 插件，并刷新匹配的页面

可以看到右下角有个 content 页面

image.png

到这一步我们已经可以注入自己想要的东西了

6. `Content` 和 `background（Service Worker）`通信

如果我想在 content 中点击按钮来触发消息通知要怎么做呢？

6.1 在刚才的面板页面加一个 `button`，再加一个 `click` 事件

先打印下 Chrome 数据，看看有啥

//创建页面函数
function createPage () {
  const page = $('<div id="cj_move_page"></div>')
  const h3 = $('<h3 id="cj_move_h3">My Chrome Ext Content Page</h3>')
  const but1 = $('<button id="cj_but1">消息通知</button>')
  page.append(h3)
  page.append(but1)
  $('body').append(page)
  $('#cj_but1').click(async (e) => {
    console.log('e', e, chrome)
  })
  //拖拽
  drag(cj_move_h3)
}

6.2 刷新插件，点击 `button` 触发事件

image.png

可以看到 chrome 有个 runtime，里面有 sendMessage 可以发送消息，有 onMessage 可以接收消息

6.3 在 `content_scripts` 里面进行消息发送

把 click 事件改一下，加一个消息发送

$('#cj_but1').click(async (e) => {
  console.log('e', e, chrome)
  // 发送消息
  chrome.runtime.sendMessage({action: "fromContent"});
})

6.4 `Service_worker.js` 里面进行消息接收

和上面 action 和 service-worker 的通信一样，在一个 if 判断就行

if (message.action === 'fromContent') {
  chrome.notifications.create(
    {
      type: "basic",
      title: "Notifications Title",
      message: "Notifications message to display",
      iconUrl: "../icons/icon.png"
    },
    (notificationId) => {
      console.log('notificationId-->', notificationId)
    }
  );
}

6.5 刷新插件

刷新插件，点击按钮，查看消息通知

image.png

7. `Action（popup）` 和 `content` 通信

因为 content 是注入页面的脚本，所以和 content 通信，需要获取当前 tab 信息

就需要权限（permissions）

7.1 添加 `tab` 权限（`permissions`）

添加权限的方式有两种

permissions 中添加 tabs

"permissions": [
  "notifications",
  "tabs"
],

另一种是在主机权限（host_permissions）添加匹配的域名

"host_permissions": [
  "https://movie.douban.com/"
]

推荐使用第二种，这种符合权限最小化

7.2 获取 `tab` 数据

需要在 popup js 中获取 tab 数据

const [tab] = await chrome.tabs.query({
  url: ["https://movie.douban.com/*"],
  active: true,
  currentWindow: true
});
console.log('tab', tab)

tab 信息

image.png

7.3 `popup` 向 `content` 发送消息，`content` 接收消息

7.3.1 `popup` 中使用 `chrome.tabs.sendMessage` 发送消息，`content` 中使用 `chrome.runtime.onMessage.addListener` 接收消息

popup 代码

const plugin_search_but = document.getElementById('plugin_search_but')
const plugin_search_inp = document.getElementById('plugin_search_inp')
plugin_search_but.onclick = async function () {
  // alert
  // alert('plugin_search_inp的值为：' + plugin_search_inp.value.trim())
  // console.log('chrome', chrome)
  // 向 Service Worker 发送消息
  // chrome.runtime.sendMessage({
  //   action: 'fromPopup',
  //   message: 'Hello from Popup!'
  // });

  const [tab] = await chrome.tabs.query({
    url: ["https://movie.douban.com/*"],
    active: true,
    currentWindow: true
  });
  console.log('tab', tab)
  if (tab) {
    // 使用 chrome.tabs.sendMessage 发送消息
    chrome.tabs.sendMessage(tab.id, {
      action: 'fromPopup2Content'
    })
  }
}

content 监听代码

chrome.runtime.onMessage.addListener((e) => {
  console.log('e', e)
})

刷新插件，刷新页面，打开控制台，点击图标，弹出 popup，点击翻译按钮

image.png

7.3.2 `popup` 中使用 `chrome.tabs.connect` 发送消息，`content` 使用 `chrome.runtime.onConnect.addListener` 来接收消息

popup 代码

if (tab) {
  // 使用 chrome.tabs.sendMessage 发送消息
  // chrome.tabs.sendMessage(tab.id, {
  //   action: 'fromPopup2Content'
  // })

  const connect = chrome.tabs.connect(tab.id, {name: 'fromPopup2Content'});
  console.log('connect', connect)
  connect.postMessage('这里是弹出框页面，你是谁？')
  connect.onMessage.addListener((mess) => {
    console.log(mess)
  })
}

content 代码

// chrome.runtime.onMessage.addListener((e) => {
//   console.log('e', e)
// })


chrome.runtime.onConnect.addListener((res) => {
  console.log('contentjs中的 chrome.runtime.onConnect：',res)
  if (res.name === 'fromPopup2Content') {
    res.onMessage.addListener(mess => {
      console.log('contentjs中的 res.onMessage.addListener：', mess)
      res.postMessage('哈哈哈，我是contentjs')
    })
  }
})

刷新插件，刷新页面，打开控制台，点击图标，弹出 popup，点击翻译按钮

content 页面的日志

image.png

popup 页面的日志

image.png

8. `Fetch` 请求

V3 版本已经禁止使用 XMLHttpRequest，所有的请求走的都是 fetch

8.1 我们现在 `content_scripts` 中的 `matches` 中加入豆瓣域名（www.douban.com）

用于获取数据

*：通配符匹配

"content_scripts": [
  {
    "matches": ["https://lkcoffee.com/", "https://movie.douban.com/*"],
    "css": ["content/index.css"],
    "js": ["content/jquery.js", "content/index.js"]
  }
]

8.2 在刚才的 `index.js` 文件中加入按钮，点击的时候触发 `fetch` 请求

只更改了 createPage 函数，增加了 but2、but3 按钮和 click 事件

//创建页面函数
function createPage () {
  const page = $('<div id="cj_move_page"></div>')
  const h3 = $('<h3 id="cj_move_h3">My Chrome Ext Content Page</h3>')
  const but1 = $('<button id="cj_but1">消息通知</button>')
  const but2 = $('<button id="cj_but2">content 加载更多</button>')
  const but3 = $('<button id="cj_but3">service worker 加载</button>')
  page.append(h3)
  page.append(but1)
  page.append(but2)
  page.append(but3)
  $('body').append(page)
  // 消息通知按钮事件
  $('#cj_but1').click(async (e) => {
    console.log('e', e, chrome)
    chrome.runtime.sendMessage({action: "fromContent"});
  })
  // content 加载更多按钮事件
  $('#cj_but2').click(async (e) => {
    const response = await fetch("https://movie.douban.com/j/tv/recommend_groups")
    if (!response.ok) {
      throw new Error('Network response was not ok')
    }
    const allData = await response.json()
    console.log('content index allData', allData)
  })
  // service worker 加载按钮事件
  $('#cj_but3').click(async (e) => {
    console.log('e', e, chrome)
    chrome.runtime.sendMessage({action: "fromContentFetch"});
  })
  //拖拽
  drag(cj_move_h3)
}

8.3 `service_worker.js` 里面进行消息监听

if (message.action === 'fromContentFetch') {
  const response = await fetch("https://movie.douban.com/j/tv/recommend_groups")
  if (!response.ok) {
    throw new Error('Network response was not ok')
  }
  const allData = await response.json()
  console.log('service worker allData', allData)
}

8.4 刷新插件并刷新匹配的豆瓣域名页

image.png

8.5 点击按钮

打开页面控制台，点击【content 加载更多】

image.png

打开 service worker 控制台，点击【service worker 加载】

image.png

到这一步，我们已经可以进行接口请求了，整体的链路已经通了

9. `Cookie` 获取

web 开发少不了获取 cookie

使用 chrome.cookies API 查询和修改 Cookie，并在这些 Cookie 发生更改时收到通知。

这就需要在权限（permissions）里面添加 cookies 字段以及在主机权限（host_permissions）里面添加 host

9.1 `Manifest.json` 文件

"permissions": [
    "notifications",
    "cookies"
],
"host_permissions": [
    "https://*.douban.com/*",
    "https://*.lkcoffee.com/*"
]

9.2 `Popup` 页面获取 `cookies`

const cookies = await chrome.cookies.getAll({ domain:  '.lkcoffee.com'})
console.log('popup cookies--->', cookies)
const urlCookies = await chrome.cookies.getAll({ url: 'https://leaptest03.lkcoffee.com/' })
console.log("popup urlCookies", urlCookies);

9.3 `Service Worker` 获取 `cookies`

const cookies = await chrome.cookies.getAll({ domain:  '.lkcoffee.com'})
console.log('service worker cookies--->', cookies)

image.png

9.4 `Content` 获取 `cookies`

这个直接用 document.cookie 获取即可

六、打包 `Chrome` 插件

1. 不需要发布 `Chrome` 应用商店

直接压缩包就行，安装的时候加载已解压的扩展程序即可

2. 需要发布到 `Chrome` 应用商店

前往 Chrome 开发者信息中心。
登录开发者帐号。
点击添加新商品按钮。
依次点击选择文件 > ZIP 文件 > 上传。

image.png

gg

七、总结

到此基本上已经可以开发一个完整流程的 Chrome 插件了，但是这篇文章只是一个基础
Manifest.json 文件字段解析
权限列表（permissions）
匹配模式规则
Content 脚本动态注入
Chrome API
V2 迁移 V3 版本
...

引用

【Chrome-extensions】

人面猴
序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
沈念sama阅读 159,835评论 4赞 364
死咒
序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
沈念sama阅读 67,598评论 1赞 295
救了他两次的神仙让他今天三更去死
文/潘晓璐我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
开封第一讲书人阅读 109,569评论 0赞 244
道士缉凶录：失踪的卖姜人
文/不坏的土叔我叫张陵，是天一观的道长。经常有香客问我，道长，这世上最难降的妖魔是什么？我笑而不...
开封第一讲书人阅读 44,159评论 0赞 213
港岛之恋（遗憾婚礼）
正文为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
茶点故事阅读 52,533评论 3赞 287
恶毒庶女顶嫁案：这布局不是一般人想出来的
文/花漫我一把揭开白布。她就那样静静地躺着，像睡着了一般。火红的嫁衣衬着肌肤如雪。梳的纹丝不乱的头发上，一...
开封第一讲书人阅读 40,710评论 1赞 222
城市分裂传说
那天，我揣着相机与录音，去河边找鬼。笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。我是一名探鬼主播，决...
沈念sama阅读 31,923评论 2赞 313
双鸳鸯连环套：你想象不到人心有多黑
文/苍兰香墨我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
开封第一讲书人阅读 30,674评论 0赞 203
万荣杀人案实录
序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
沈念sama阅读 34,421评论 1赞 246
护林员之死
正文独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋以下内容为张勋视角年9月15日...
茶点故事阅读 30,622评论 2赞 245
白月光启示录
正文我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
茶点故事阅读 32,115评论 1赞 260
活死人
序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
沈念sama阅读 28,428评论 2赞 254
日本核电站爆炸内幕
正文年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
茶点故事阅读 33,114评论 3赞 238
男人毒药：我在死后第九天来索命
文/蒙蒙一、第九天我趴在偏房一处隐蔽的房顶上张望。院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
开封第一讲书人阅读 26,097评论 0赞 8
一桩弑父案，背后竟有这般阴谋
文/苍兰香墨我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。一阵脚步声响...
开封第一讲书人阅读 26,875评论 0赞 197
情欲美人皮
我被黑心中介骗来泰国打工，没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。一个月前我还...
沈念sama阅读 35,753评论 2赞 276
代替公主和亲
正文我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
茶点故事阅读 35,649评论 2赞 271

从 0 到 1 带你开发 Chrome 浏览器 Manifest V3 版本插件

Chrome 插件

一、什么是 Chrome 浏览器插件？

二、Chrome 浏览器插件是如何构建的？

三、Chrome 浏览器插件可以做什么？

1. 设计界面

2. 控制浏览器

3. 控制网络

四、Chrome 插件术语

1. 清单（Manifest）

1.1 示例展示

1.2 manifest.json 文件必需的字段

1.3 发布 Chrome 应用商店需要的字段

2. 操作项（Action）

2.1 示例

2.2 Action 字段

3. 背景（Background - Service Worker）

3.1 Background 在 manifest V2 V3 版本中的不同之处

3.2 示例

3.3 终止 Service Worker

3.4 Service Worker DevTools

4. 内容脚本（Content scripts）

4.1 示例

4.2 页面注入

五、开发 Chrome 插件

1. 新建项目并创建 manifest.json 文件

1.1 添加以下代码

1.2 在谷歌浏览器中打开管理扩展程序

1.3 点击【加载已解压的扩展程序】

1.4 可以看到扩展程序已经加载完成

1.5 固定插件

2. 添加 action 中的 popup html 页面

2.1 添加 action icons

2.2 新建 popup 文件夹并创建 index.html 页面

2.2.1 同时创建 index.css 和 index.js 文件

2.2.2 填充 popup 代码

2.3 Manifest.json 文件添加 action 字段

2.3.1 Manifest.json 文件内容

2.3.2 点击扩展程序刷新按钮

2.3.3 Hover 图标展示 default_title 字段

2.3.4 点击图标

2.3.5 输入框输入，并点击翻译按钮

2.4 Action popup 控制台

3. 添加 background（service worker）

3.1 如果我们在 popup index.js 中添加一个 setInterval，每隔几秒弹出一个 alert

3.2 新建 background 文件夹并创建 service_worker.js 文件

3.3 Manifest.json 文件中添加 background

3.3.1 在上面 action 的基础上添加代码

3.3.2 点击拓展程序刷新插件

3.4 既然不能用 alert，那我们就换个 notifications 用一用

3.4.1 修改 service worker 中的代码

3.4.2 刷新插件

3.4.3 manifest.json 文件中添加 permissions 字段

3.4.4 刷新插件，并点开 service worker 控制台

3.4.5 平台差异

3.5 如果有多个 JS 需要引入怎么办？

3.5.1 manifest.json 中 background 字段添加 type 为 module

3.5.2 在 service_worker.js 中 import 引入

3.5.3 刷新插件，打开 Service worker 控制台

4. Action（popup） 和 background（service worker） 之间的通信

4.1 先打印下 popup.js 中的 Chrome 数据

4.2 先把 popup.js 中的点击事件修改下

4.3 只需要在 service_worker.js 中接收消息即可

4.4 刷新插件

5. 内容脚本（Content Script）注入

5.1 新建 content 文件夹，并创建 index.js 文件

5.2 在 manifest.json 文件中添加 content_scripts

5.3 打开 https://lkcoffee.com/ 并打开控制台

5.4 在当前页面中插入面板框，并可拖拽

5.5 刷新 Chrome 插件，并刷新匹配的页面

6. Content 和 background（Service Worker）通信

6.1 在刚才的面板页面加一个 button，再加一个 click 事件

6.2 刷新插件，点击 button 触发事件

6.3 在 content_scripts 里面进行消息发送

6.4 Service_worker.js 里面进行消息接收

6.5 刷新插件

7. Action（popup） 和 content 通信

7.1 添加 tab 权限（permissions）

7.2 获取 tab 数据

7.3 popup 向 content 发送消息，content 接收消息

`Chrome` 插件

一、什么是 `Chrome` 浏览器插件？

二、`Chrome` 浏览器插件是如何构建的？

三、`Chrome` 浏览器插件可以做什么？

四、`Chrome` 插件术语

1. 清单（`Manifest`）

1.2 `manifest.json` 文件必需的字段

1.3 发布 `Chrome` 应用商店需要的字段

2. 操作项（`Action`）

2.2 `Action` 字段

3. 背景（`Background - Service Worker`）

3.1 `Background` 在 `manifest V2 V3` 版本中的不同之处

3.3 终止 `Service Worker`

3.4 `Service Worker DevTools`

4. 内容脚本（`Content scripts`）

五、开发 `Chrome` 插件

1. 新建项目并创建 `manifest.json` 文件

2. 添加 `action` 中的 `popup html` 页面

2.1 添加 `action icons`

2.2 新建 `popup` 文件夹并创建 `index.html` 页面

2.2.1 同时创建 `index.css` 和 `index.js` 文件

2.3 `Manifest.json` 文件添加 `action` 字段

2.3.1 `Manifest.json` 文件内容

2.3.3 `Hover` 图标展示 `default_title` 字段

2.4 `Action popup` 控制台

3. 添加 `background`（`service worker`）

3.1 如果我们在 `popup index.js` 中添加一个 `setInterval`，每隔几秒弹出一个 `alert`

3.2 新建 `background` 文件夹并创建 `service_worker.js` 文件

3.3 `Manifest.json` 文件中添加 `background`

3.3.1 在上面 `action` 的基础上添加代码

3.4 既然不能用 `alert`，那我们就换个 `notifications` 用一用

3.4.1 修改 `service worker` 中的代码

3.4.3 `manifest.json` 文件中添加 `permissions` 字段

3.4.4 刷新插件，并点开 `service worker` 控制台

3.5 如果有多个 `JS` 需要引入怎么办？

3.5.1 `manifest.json` 中 `background` 字段添加 `type` 为 `module`

3.5.2 在 `service_worker.js` 中 `import` 引入

3.5.3 刷新插件，打开 `Service worker` 控制台

4. `Action（popup）` 和 `background（service worker）` 之间的通信

4.1 先打印下 `popup.js` 中的 `Chrome` 数据

4.2 先把 `popup.js` 中的点击事件修改下

4.3 只需要在 `service_worker.js` 中接收消息即可

5. 内容脚本（`Content Script`）注入

5.1 新建 `content` 文件夹，并创建 `index.js` 文件

5.2 在 `manifest.json` 文件中添加 `content_scripts`

5.5 刷新 `Chrome` 插件，并刷新匹配的页面

6. `Content` 和 `background（Service Worker）`通信

6.1 在刚才的面板页面加一个 `button`，再加一个 `click` 事件

6.2 刷新插件，点击 `button` 触发事件

6.3 在 `content_scripts` 里面进行消息发送

6.4 `Service_worker.js` 里面进行消息接收

7. `Action（popup）` 和 `content` 通信

7.1 添加 `tab` 权限（`permissions`）

7.2 获取 `tab` 数据

7.3 `popup` 向 `content` 发送消息，`content` 接收消息

7.3.1 `popup` 中使用 `chrome.tabs.sendMessage` 发送消息，`content` 中使用 `chrome.runtime.onMessage.addListener` 接收消息

7.3.2 `popup` 中使用 `chrome.tabs.connect` 发送消息，`content` 使用 `chrome.runtime.onConnect.addListener` 来接收消息

8. `Fetch` 请求

8.1 我们现在 `content_scripts` 中的 `matches` 中加入豆瓣域名（www.douban.com）

8.2 在刚才的 `index.js` 文件中加入按钮，点击的时候触发 `fetch` 请求

8.3 `service_worker.js` 里面进行消息监听

9. `Cookie` 获取

9.1 `Manifest.json` 文件

9.2 `Popup` 页面获取 `cookies`

9.3 `Service Worker` 获取 `cookies`

9.4 `Content` 获取 `cookies`

六、打包 `Chrome` 插件

1. 不需要发布 `Chrome` 应用商店

2. 需要发布到 `Chrome` 应用商店