记一次谷歌插件开发

概述

前不久写ppt，发现要上传一些实际项目运行的视频。刚好以前一个项目（多人在线2d游戏，可视频通话、互相聊天等）中积累了些前端媒体相关的知识。于是我打算写一个简单的插件直接进行视频录制。

准备

我打算问下gpt

以下是一个简单的示例，演示如何编写一个 Chrome 浏览器扩展，该扩展会在每次打开新标签页时显示一个弹窗：

manifest.json 复制代码

{
  "manifest_version": 3,
  "name": "New Tab Popup",
  "version": "1.0",
  "description": "Display a popup whenever a new tab is opened.",
  "permissions": ["tabs"],
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [ { "matches": ["<all_urls>"], "js": ["content.js"] }
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon.png",
      "48": "icon.png",
      "128": "icon.png"
    }
  },
  "icons": {
    "16": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  }
}

background.js 复制代码

chrome.tabs.onCreated.addListener(function(tab) {
  chrome.windows.getAll({populate: true}, function(windows) {
    if (windows.length === 1 && windows[0].tabs.length === 1) {
      chrome.windows.create({url: 'popup.html', type: 'popup', width: 400, height: 300});
    }
  });
});

popup.html 复制代码

<!DOCTYPE html>
<html>
<head>
  <title>New Tab Popup</title>
</head>
<body>
  <h1>Welcome to the New Tab Popup!</h1>
</body>
</html>

创建一个名为 icon.png 的图标文件，用作扩展的图标。
将上述文件保存在同一个文件夹中，并确保文件结构如下：

diff 复制代码

- manifest.json
- background.js
- popup.html
- content.js
- icon.png

我大致解释下各文件的作用：
manifest.json ：和我们前端开发的package.json文件类似但也作为主入口，它指定插件版本，拓展程序的名字、当前版本、描述、需要的权限、使用的后台脚本、拓展程序的行为、图标。 background.js ：扩展程序的后台脚本，你可以认为它就是拓展程序的服务端，可以与前端通信，同时可以直接使用浏览器的api。
popup.html : 插件的前端页面，基本作为弹窗展示，当你点击插件的图标时，弹出的页面由此文件定义,在此文件中执行的js代码，可以和后台脚本通信。

此外有时候，插件需要访问当前页面的内容，所以还有一个内容脚本。它会注入到每一个打开的页面中执行。
content.js: 运行在每个匹配扩展定义的 URL 规则的页面上，因此它可以与页面内容直接交互，并执行各种定制化的操作，从而为用户提供更丰富的浏览体验。