专栏名称: 全栈前端精选

内容为王，精选为则。从前端到全栈，定期分享前端、客户端、Node、面试、职场感悟等相关高质量文章。小白的大神养成记，你我共勉！

写html页面没意思，来挑战chrome插件开发

全栈前端精选 · 公众号 · · 2024-07-08 15:34

主要观点总结

文章介绍了谷歌浏览器插件开发的过程，包括开发工具、技术栈、文件结构、权限配置、API使用以及示例源码的获取。同时，还涵盖了插件在浏览器中的功能实现，如工具栏按钮的添加、网页内容的修改、用户输入的捕获、与后台服务器的通信等。此外，还介绍了插件开发中的关键文件如manifest.json，以及如何使用插件API进行浏览器功能和数据的访问。最后，提供了插件开发涉及的一些要点，包括公众号后台回复获取项目源码，以及开发谷歌浏览器插件时最重要的文件manifest.json。

关键观点总结

关键观点1: 谷歌浏览器插件开发过程

文章介绍了谷歌浏览器插件开发的过程，包括开发工具、技术栈、文件结构、权限配置、API使用以及示例源码的获取。

关键观点2: 插件在浏览器中的功能实现

插件可以实现各种功能，如添加新的工具栏按钮、修改网页内容、捕获用户输入、与后台服务器进行通信等。

关键观点3: 关键文件与API使用

文章详细说明了开发谷歌浏览器插件时最重要的文件manifest.json，以及如何使用插件API进行浏览器功能和数据的访问。

关键观点4: 插件开发涉及要点

文章提供了插件开发涉及的一些要点，包括公众号后台回复获取项目源码，以及开发谷歌浏览器插件时最重要的文件manifest.json。

正文

关注公众号全栈前端精选，回复“1”

加入我们一起学习，天天进步

谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行的扩展程序，可以为用户提供额外的功能和定制化的体验。 谷歌浏览器插件通常由HTML、CSS和JavaScript组成，非常利于前端开发者。 开发者可以利用这些技术在浏览器中添加新的功能、修改现有功能或者与网页进行交互。

要开发谷歌浏览器插件，开发者通常需要创建一个包含*清单文件（manifest.json）、背景脚本（background script）、内容脚本（content script）*等文件的项目结构。清单文件是插件的配置文件，包含插件的名称、版本、描述、权限以及其他相关信息。背景脚本用于处理插件的后台逻辑，而内容脚本则用于在网页中执行JavaScript代码。

谷歌浏览器插件可以实现各种功能，例如添加新的工具栏按钮、修改网页内容、捕获用户输入、与后台服务器进行通信等。开发者可以通过谷歌浏览器插件API来访问浏览器的各种功能和数据，实现各种定制化的需求。插件开发涉及的要点：

基础配置

开发谷歌浏览器插件，最重要的文件 manifest.json

{
  "name": "Getting Started Example",  // 插件名称
  "description": "Build an Extension!", // 插件描述
  "version": "1.0", // 版本
  "manifest_version": 3, // 指定插件版本，这个很重要，指定什么版本就用什么样的api，不能用错了
  "background": {
    "service_worker": "background.js" // 指定background脚本的路径
  },
  "action": {
    "default_popup": "popup.html", // 指定popup的路径
    "default_icon": {  // 指定popup的图标，不同尺寸
      "16": "/images/icon16.png",
      "32": "/images/icon32.png",
      "48": "/images/icon48.png",
      "128": "/images/icon128.png"
    }
  },
  "icons": { // 指定插件的图标，不同尺寸
    "16": "/images/icon16.png",
    "32": "/images/icon32.png",
    "48": "/images/icon48.png",
    "128": "/images/icon128.png"
  },
  "permissions": [],// 指定应该在脚本中注入那些变量方法，后文再详细说
  "options_page": "options.html",
  "content_scripts": [ // 指定content脚本配置
    {
      "js": [ "content.js"], // content脚本路径
      "css":[ "content.css" ],// content的css
      "matches": [""] // 对匹配到的tab起作用。all_urls就是全部都起作用
    }
  ]
}

name: 插件名称

manifest_version：对应chrome API插件版本,浏览器插件采用的版本，目前共2种版本，是2和最新版3

version：本插件的版本，和发布相关
action：点击图标时，设置一些交互

16、32、48、128
default_icon：展示图标
default_popup：popup.html，一个弹窗页面
default_title：显示的标题

permissions：拥有的权限

tabs：监听浏览器tab切换事件

options_ui
background：

service_worker：设置打开独立页面

官方实例 ^[1]

官方教程 ^[2]

打开pop弹窗页面

设置action的default_popup属性

{
  "name": "Hello world",
  "description": "show 'hello world'!",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "/images/icon16.png",
      "32": "/images/icon32.png",
      "48": "/images/icon48.png",
      "128": "/images/icon128.png"
    }
  },
  "permissions":["tabs", "storage", "activeTab", "idle"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [
    {
      "js": [ "content.js"],
      "css":[ "content.css" ],
      "matches": [""]
    }
  ]
}

创建popup.html

html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>显示出hello worldtitle>
    <link rel="stylesheet" type="text/css" href="popup.css">
  head>

  <body>
    <h1>显示出hello worldh1>
    <button id="clickBtn">点击按钮button>
    <script src="popup.js">script>
  body>
html>

文件可以通过链接引入css、js。

body {
    width: 600px;
    height: 300px;
}
h1 {
    background-color: antiquewhite;
    font-weight: 100;
}

console.log(document.getElementById('clickBtn'));
document.getElementById('clickBtn').addEventListener('click', function () {
  console.log('clicked');
});

点击插件图标

点击图标可以看到如下的popup的页面。

调试popup.js的方法

通过弹窗，在弹窗内部点击右键，选择审查内容
通过插件图标，进行点击鼠标右键，选择审查弹出内容

通过background打开独立页面

基于 background 的 service_worker API可以打开一个独立后台运行脚本。此脚本会随着插件安装，初始化执行一次，然后一直在后台运行。可以用来存储浏览器的全局状态数据。background脚本是长时间运行在后台，随着浏览器打开就运行，直到浏览器关闭而结束运行。通常把需要一直运行的、启动就运行的、全局公用的数据放到background脚本。

chrome.action.onClicked.addListener(function () {
  chrome.tabs.create({
    url: chrome.runtime.getURL('newPage.html')
  });
});

为了打开独立页面，需要修改 manifest.json

{
  "name": "newPage",
  "description": "Demonstrates the chrome.tabs API and the chrome.windows API by providing a user interface to manage tabs and windows.",
  "version": "0.1",
  "permissions": ["tabs"],
  "background": {
    "service_worker": "service-worker.js"
  },
  "action": {
    "default_title": "Show tab inspector"
  },
  "manifest_version": 3
}

为了实现打开独立页面，在manifest.json中就不能在配置 action:default_popup 在 newPage.js 文件中可以使用* chrome.tabs ^[3] *和 chrome.windows ^[4] API；可以使用 chrome.runtime.getUrl ^[5] 跳转一个页面。

chrome.runtime.onInstalled.addListener(async () => {
  chrome.tabs.create(
    {
      url: chrome.runtime.getURL('newPage.html'),
    }
  );
});

content内容脚本

content-scripts（内容脚本）是在网页上下文中运行的文件。通过使用标准的文档对象模型(DOM)，它能够 读取浏览器访问的网页的详细信息 ，可以对打开的页面进行更改，还可以将DOM信息传递给其父级插件。内容脚本相对于background还是有一些访问API上的限制，它可以直接访问以下chrome的API

i18n
storage
runtime:

connect
getManifest
getURL
id
onConnect
onMessage
sendMessage

content.js 运行于一个独立、隔离的环境，它不会和主页面的脚本或者其他插件的内容脚本发生冲突有2种方式添加content脚本

在配置中设置

"content_scripts": [
  {
    "js": [ "content.js"],
    "css":[ "content.css" ],
    "matches": [""]
  }
]

content_scripts属性除了配置js，还可以设置css样式，来实现修改页面的样式。matches表示需要匹配的页面；除了这3个属性，还有

run_at: 脚本运行时刻，有以下3个选项

document_idle，默认；浏览器会选择一个合适的时间注入，并是在dom完成加载
document_start；css加载完成，dom和脚本加载之前注入。
document_end：dom加载完成之后

exclude_matches：排除匹配到的url地址。作用和matches相反。

动态配置注入

在特定时刻才进行注入，比如点击了某个按钮，或者指定的时刻需要在 popup.js 或 background.js 中执行注入的代码。

chrome.tabs.executeScript(tabs[0].id, {
  code: 'document.body.style.backgroundColor = "red";',
});

也可以将整个content.js进行注入

chrome.tabs.executeScript(tabs[0].id, {
  file: "content.js",
});

利用content制作一个弹窗工具

某天不小心让你的女神生气了，为了能够道歉争取到原谅，你是否可以写一个道歉信贴到每一个页面上，当女神打开网站，看到每个页面都会有道歉内容。

道歉信内容自己写哈，这个具体看你的诚意。下面设置2个按钮，原谅和不原谅。点击原谅，就可以关闭弹窗。点击不原谅，这个弹窗调整css布局位置继续显示。（有点像恶意贴片广告了）

下面设置content.js的内容

let newDiv = document.createElement('div');
newDiv.innerHTML = `
  小仙女～消消气

  
  

`;
newDiv.id = 'newDiv';
document.body.appendChild(newDiv);
const cancelBtn = document.querySelector('#cancel');
const rejectBtn = document.querySelector('#reject');
cancelBtn.onclick = function() {
  document.body.removeChild(newDiv);
  chrome.storage.sync.set({ state: 'cancel' }, (data) => {
  });
}
rejectBtn.onclick = function() {
  newDiv.style.bottom = Math.random() * 200 + 10 + "px";
  newDiv.style.right = Math.random() * 800 + 10 + "px";
}
// chrome.storage.sync.get({ state: '' }, (data) => {
//   if (data.state === 'cancel') {
//     document.body.removeChild(newDiv);
//   }
// });

content.css布局样式

#newDiv {
  font-size: 36px;
  color: burlywood;
  position: fixed;
  bottom: 20px;
  right: 0;
  width: 300px;
  height: 200px;
  background-color: rgb(237, 229, 216);
  text-align: center;
  z-index: 9999;
}

打开option页面

options页，就是插件的设置页面，有2个入口

1:点击插件详情，找到扩展程序选项入口

2插件图标，点击右键，选择 ‘选项’ 菜单

可以看到设置的option.html页面

html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>插件的option配置title>
head>
<body>
    <h3>插件的option配置h3>
body>
html>

此页面也可以进行js、css的引入。