浏览器插件主题沙龙分享

约 1240 字大约 4 分钟

直播浏览器插件

2024-12-25

一、自我介绍

屠永涛
分享主题：小白如何快速开发一个浏览器插件

二、小白如何快速开发一个浏览器插件？

麦肯锡工作法之如何了解一个新的行业：
100 个关键词法：掌握这个行业的 100 个关键词
问专家：找这个行业的三个专家聊天，问这个行业的各种问题
看书：精读三本这个行业的经典书籍

2.1 Chrome Extensions 的关键词和相关开发工具

2.1.1 十个关键词（初识插件）

提示

1. 清单文件（manifest.json）

说明：这是每个 Chrome 插件的核心配置文件，定义了插件的基本信息、权限、脚本等
作用：指定插件的名称、版本、所需权限、背景脚本、内容脚本等。

2. 弹出页面（Popup）

说明：点击浏览器操作图标时显示的 HTML 页面。
作用：提供用户界面，允许用户与插件进行交互，如设置选项或执行操作。

3. 背景脚本（Background Scripts）

说明：在插件运行期间常驻内存的脚本，负责处理插件的全局事件与逻辑。
作用：管理插件的生命周期、监听浏览器事件、处理长时间运行的任务。

4. 内容脚本（Content Scripts）

说明：在网页上下文中运行的脚本，可以修改页面内容或与页面交互。
作用：实现插件与网页的互动，如修改 DOM、注入样式或监听用户操作。

5. 权限（Permissions）

说明：插件在manifest.json中声明需要访问的浏览器功能或网站资源。
作用：确保插件有足够的权限执行所需操作，同时保护用户隐私安全。

6. 浏览器操作（Browser Action）和页面操作（Page Action）

说明：用于在浏览器工具栏添加图标，提供用户交互界面。
区别：浏览器操作：图标始终显示在工具栏；页面操作：图标仅在特定页面或条件下显示。

7. 选项页面（Options Page）

说明：插件的设置页面，允许用户自定义插件的行为。
作用：提供一个界面供用户调整插件配置，通常通过浏览器的扩展管理页面访问。

8. 消息传递（Messaging）

说明：插件内部不同部分（如内容脚本和背景脚本）之间通信的机制。
作用：实现不同脚本之间的数据交换和协调工作。

9. Chrome 扩展 API

说明：Chrome 提供的一系列 JavaScript 接口，允许插件访问浏览器功能。
常用 API：chrome.tabs：操作浏览器标签页；chrome.storage：存储和检索数据；chrome.runtime：管理插件的生命周期和消息传递。

10. 调试与测试

说明：使用 Chrome 开发者工具调试插件，确保其正常运行。
工具：扩展管理页面：加载未打包的插件，查看错误日志；开发者工具：调试内容脚本和背景脚本，检查网络请求和性能。

2.1.2 开发工具（效率和 UI）

vite、react、antd、crx、Chat-UI

2.2 autobots 智能体插件

明确目标：

插件可在侧边栏展示
插件好看美观
插件可调用 autobots 完成对话
插件可切换、添加智能体
插件可进行文件解析、对外发送消息

2.2.1 项目目录结构

chrome-plugin
├─ src
│  ├─ background
│  │  └─ background.js
│  ├─ icons
│  │  ├─ icon128.png
│  │  └─ icon48.png
│  ├─ App.css
│  ├─ App.jsx
│  ├─ MyChildren.jsx
│  ├─ index.css
│  └─ main.jsx
├─ .gitignore
├─ index.html
├─ manifest.json
├─ package-lock.json
├─ package.json
└─ vite.config.js

2.2.2 编写 manifest.json

manifest.json 是插件的核心配置文件：

{
  "manifest_version": 3,
  "name": "智能体插件",
  "author": "tuyongtao",
  "version": "1.0.0",
  "permissions": [
    "contextMenus",
    "activeTab",
    "cookies",
    "tabs",
    "sidePanel",
    "scripting",
    "storage"
  ],
  "side_panel": {
    "default_path": "index.html"
  },
  "action": { "default_popup": "index.html" },
  "icons": {
    "48": "src/icons/icon48.png",
    "128": "src/icons/icon128.png"
  },
  "background": {
    "service_worker": "src/background/background.js"
  },
  "web_accessible_resources": [
    {
      "resources": ["index.html", "*"],
      "matches": ["<all_urls>"]
    }
  ],
  "host_permissions": ["<all_urls>"]
}

2.2.3 配置 vite.config.js

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import { crx } from "@crxjs/vite-plugin";
import manifest from "./manifest.json";

export default defineConfig({
  plugins: [react(), crx({ manifest })],
  server: {
    host: "local.jd.com",
  },
});

源码

2.2.5 编写 background.js

// 创建上下文菜单项
chrome.runtime.onInstalled.addListener(() => {
  chrome.contextMenus.create(
    {
      id: "sendOkChatData",
      title: "智能填表",
      contexts: ["selection"],
    },
    () => {
      if (chrome.runtime.lastError) {
        console.error(
          "Error creating sendData menu:",
          chrome.runtime.lastError
        );
      } else {
        console.log("sendData menu created successfully");
      }
    }
  );
});

// 监听上下文菜单点击事件
chrome.contextMenus.onClicked.addListener((info, tab) => {
  if (info.menuItemId === "sendOkChatData" && tab.id) {
    const selectedText = info.selectionText;
    // 获取当前活动的标签页
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      if (tabs.length > 0) {
        const activeTab = tabs[0];
        chrome.scripting.executeScript({
          target: { tabId: activeTab.id },
          func: (text) => {
            window.postMessage({ type: "sendOkChatData", data: text }, "*");
          },
          args: [selectedText],
        });
      } else {
        console.error("No active tab found.");
      }
    });
  }
});