谷歌插件开发：创建自己的第一个Google插件（手把手带你从零探索开发谷歌插件）

站长

2023年07月25日 18:21 · 阅读数 18

我正在参加「掘金·启航计划」

今天我们将深入探讨如何创建自己的第一个 Google 插件！Google 插件是一种强大的工具，可以扩展浏览器的功能，为用户提供个性化的体验。本节将详解地讲解创建 Google 插件的流程，并介绍一些核心概念，帮助您深入学习和实践。无需担心，即使您是一个新手，本节也会以通俗易懂的方式来解释所有概念和步骤，让您能够轻松上手。让我们一起开始这个有趣而富有创造力的旅程吧！

课程目录（暂定18节）

后续可持续关注此贴，目录路径都会补上，点击即可跳转前往

一. 基本介绍

首先，我们需要创建一个新的 Google 插件项目。打开你的浏览器，在地址栏中输入 chrome://extensions/ 并回车。在扩展程序页面的右上角，点击“开发者模式”按钮。然后，点击左上角的“加载已解压的扩展程序”按钮，选择一个空文件夹作为项目的根目录。

清单文件（manifest.json）是一个重要的文件，它定义了插件的名称、版本、权限和其他元数据。在你的项目根目录中创建一个名为 manifest.json 的文件，并添加以下基本结构：

{
  "manifest_version": 2,
  "name": "My First Google Extension",
  "version": "1.0",
  "description": "A description of your extension",
  "permissions": ["tabs"],
  "browser_action": {
    "default_popup": "popup.html",
    "default_icon": "icon.png"
  },
  "icons": {
    "48": "icon.png"
  }
}

我们定义了插件的名称、版本、描述和所需的权限。还指定了插件的图标和默认弹出窗口。

弹出窗口是 Google 插件中的常见元素，它可以提供与用户的交互。在项目的根目录中创建一个名为 popup.html 的文件，并添加以下代码：

<!DOCTYPE html>
<html>
  <head>
    <title>My Extension Popup</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <h1>Welcome to My Extension</h1>
    <button id="clickMe">Click Me</button>
  </body>
</html>

这是一个简单的弹出窗口示例，其中包含一个标题和一个按钮。点击按钮将触发一个 JavaScript 函数。为了使弹出窗口有更多的交互功能，我们需要添加一些 JavaScript 代码。在项目的根目录中创建一个名为 popup.js 的文件，并添加以下代码：

document.addEventListener('DOMContentLoaded', function() {
  var clickMeButton = document.getElementById('clickMe');
  clickMeButton.addEventListener('click', function() {
    alert('Button clicked!');
  });
});

这段代码将在弹出窗口加载完成后添加一个事件监听器，当按钮被点击时，会弹出一个对话框显示"Button clicked!"。

在上一节中，我们讲到了manifest.json 配置文件，但是在上面的演示中，出现了个陌生的面孔 - popup，那么下面我们就先来讲解一下 popup 的作用和分析它到底是用来做什么的。

popup 交互窗口

popup 是 Google Chrome 扩展程序中的一个核心概念，它是用于创建浏览器操作界面的一种特殊页面。当用户点击扩展程序图标时，可以弹出一个 popup 窗口，在其中提供一些常用操作或设置项，使用户可以更方便地使用和配置扩展程序。如下图所示：

谷歌插件开发：创建自己的第一个Google插件（手把手带你从零探索开发谷歌插件）

它提供了插件的核心功能，弹出窗口是用户与插件进行互动的主要界面。通过弹出窗口，用户可以执行插件的主要功能，例如搜索、计算、查看信息等。它是插件的核心部分，直接影响用户体验和插件的实用性。弹出窗口的运行方式是基于事件驱动的。当用户点击插件图标时，浏览器会触发一个事件，然后插件会响应该事件并显示弹出窗口。

在我们的示例中，我们使用了browser_action字段来定义了插件图标被点击时的行为，指定了默认的弹出窗口为popup.html。这意味着当用户点击插件图标时，浏览器会加载并显示popup.html中的内容。

值得注意的是，弹出窗口在每个浏览器标签页之间是独立的。这意味着每个标签页都有自己的弹出窗口实例，并且它们之间不会相互影响。这为用户在多个标签页中同时使用插件提供了方便。

它的最主要作用就是提供一个便捷的交互窗口，让用户可以更容易地使用和配置扩展程序。在实际场景中，popup 页面通常用来：

提供常用操作：例如打开某个页面、执行某个任务、切换主题等。
显示状态信息：例如显示当前下载进度、显示未读消息数目等。
提供设置选项：例如允许用户自定义某些功能的行为或外观、允许用户调整一些参数等。
收集反馈和意见：例如让用户填写一个反馈表单或参与一个调查问卷。

通过 popup 页面，扩展程序可以使得用户更加方便地访问和使用其功能，从而提高扩展程序的易用性和用户体验。

在 Google Chrome 扩展程序中，popup 页面可以通过 manifest.json 文件来进行配置：

字段名	描述
`default_popup`	指定默认的浏览器操作窗口，一般指向 Popup 页面的文件路径
`popup`	用于描述浏览器操作窗口的外观和行为，包含位置、大小、是否可调整和关闭等选项
`browser_action`	用于定义浏览器操作按钮的行为和外观，包括图标、提示文本、点击事件等选项
`page_action`	用于定义页面操作按钮的行为和外观，类似于 browser_action，但只在特定网页上显示

需要注意的事项 ⚠️

注意窗口大小和布局：由于 popup 窗口是一个弹出窗口，因此其大小和布局需要考虑屏幕分辨率和用户习惯，不能过大或过小，也不能出现布局错乱或不良的显示效果。
谨慎处理数据存储：由于 popup 窗口不是一直展示在屏幕上，因此不能进行复杂的状态管理和数据存储。如果需要存储一些数据，可以考虑使用 Chrome 浏览器提供的 storage API 或者其他本地存储方案，但需要注意数据的安全和隐私。
注意事件响应和性能优化：由于 popup 窗口通常需要响应用户操作和更新界面内容，因此需要注意事件响应的效率和性能优化。可以采用异步加载、缓存数据、避免不必要的计算等技巧来提高页面性能和响应速度。
避免冲突和混淆：由于 popup 页面与扩展程序中其他页面和脚本之间存在相互依赖关系，因此需要避免命名冲突和逻辑混淆。建议采用模块化编程、规范的命名和注释等方式来提高代码可读性和可维护性。

二. 实现功能

那么我们基于这个目录去实现一个功能：

谷歌插件开发：创建自己的第一个Google插件（手把手带你从零探索开发谷歌插件）

如上演示，我们通过插件去更改了当前浏览器中页面的滤镜，那么下面我们就来一步步实现这个功能，首先最重要的还是配置好我们的manifest.json页面

1. 配置manifest.json

manifest.json 是谷歌扩展程序清单文件，用于描述扩展程序的属性、权限、版本号等信息，这个我们在上一节中也有提到过。在编辑器中打开 manifest.json 文件，输入以下内容：

{
  "name": "Change Filter",
  "version": "1.0",
  "description": "更改当前浏览器页面的滤镜",
  "manifest_version": 2,
  "permissions": [
    "activeTab"
  ],
  "browser_action": {
    "default_title": "更改滤镜",
    "default_popup": "popup/popup.html"
  },
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

这里我们添加了一个 "permissions" 属性，值为 ["activeTab"]，表示插件需要访问当前选项卡的权限。

然后我们把"browser_action"中 "default_popup"的值设置为 "popup/popup.html"，是因为我们为了目录结构架构合理，把 popup.html 放在了 popup 目录里

而为了避免部分网站使用 Content Security Policy（CSP）去限制外部脚本的执行，所以我们需要设置"content_security_policy" 属性，并设置为 "script-src 'self' 'unsafe-eval'; object-src 'self'"，以允许插件注入 JavaScript 代码到网页中

2. 配置 popup

popup.html 是弹出窗口的 HTML 文件，用于显示插件的主要内容。在编辑器中打开 popup.html 文件，输入以下内容：

<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <title>更改当前网页滤镜</title>
    <link rel="stylesheet" href="popup.css">
  </head>

  <body>
    <h1>更改当前网页滤镜</h1>
    <div class="box">
      <button id="changeFilterBtn">更改滤镜</button>
      <button id="resetFilterBtn">去除滤镜</button>
    </div>
    <script src="popup.js"></script>
  </body>

</html>

这里我们添加了两个按钮，分别用于触发更改滤镜和重置滤镜的功能，并引入了 popup.js 和 popup.css 。popup.css 是弹出窗口的 CSS 样式表文件，用于美化插件界面。在编辑器中打开 popup.css 文件，输入以下内容：

body {
  min-width: 300px;
  min-height: 100px;
}

h1 {
  display: flex;
  justify-content: center;
  font-size: 24px;
  color: #333;
}

.box {
  width: 100%;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

button {
  display: block;
  padding: 10px 20px;
}

popup.js 是弹出窗口的 JavaScript 文件，用于实现更改当前网页滤镜的功能。在编辑器中打开 popup.js 文件，输入以下内容：

// 更改滤镜
document.getElementById('changeFilterBtn').addEventListener('click', function () {
  chrome.tabs.executeScript({
    code: 'document.documentElement.style.filter = "hue-rotate(180deg)"'
  });
});

//去除滤镜
document.getElementById('resetFilterBtn').addEventListener('click', function () {
  chrome.tabs.executeScript({
    code: `document.documentElement.style.filter = "none"`
  });
});

这里我们添加了两个事件监听器，分别监听更改滤镜和重置滤镜按钮的单击事件。在更改滤镜按钮的回调函数中，我们使用 chrome.tabs.executeScript 方法向当前选项卡注入 JavaScript 代码，并将滤镜变成红色（即 hue-rotate(180deg)）

然后我们一个简单去更改当前浏览器中页面滤镜的功能就做好了，这也是我们在Google插件研发学习路上的第一个脚印。接下来，我们将往更深层次的知识点去进发，通过一个个案例去让您能更轻松地掌握Google插件开发。

本节课程源码 📥

链接: pan.baidu.com/s/1QCP2G8t_… 提取码: 8888