基于Vite和React，可以快速实现一个Chrome的插件。

创建一个Vite 项目

npm create vite@latest vite-chrome-extension -- --template react-ts

安装package

yarn && yarn dev

创建manifest.json 文件

这个是Chrome extension用的，里面要声明需要的权限等等配置。

{
  "manifest_version": 3,
  "name": "Vite Chrome Extension",
  "version": "0.0.1",
  "description": "A simple React app as a Chrome extension",
  "action": {
    "default_popup": "index.html"
  },
  "permissions": []
}

Build package

yarn build

浏览器加载插件

浏览器中，开启开发者模式，加载刚刚编译好的dist文件夹就可以了。

如何开启侧边栏

默认情况下，浏览器插件是弹窗模式，如果想要侧边栏模式，还需要做一些修改。

添加background.js文件。background.js是Chrome插件一个核心功能，在后台运行，用于标签和插件通信。

chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error));

修改manifest.json文件，添加sidePanel权限，同时加上side_panel配置。

{
  "manifest_version": 3,
  "name": "Vite Chrome Extension",
  "version": "0.0.1",
  "description": "A simple React app as a Chrome extension",
  "action": {
    "default_title": "Automan",
    "default_path": "index.html"
  },
  "permissions": [
    "sidePanel"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "side_panel": {
    "default_title": "Automan",
    "default_path": "index.html"
  }
}

获取当前标签

需要在manifest.json申请activeTab权限

"permissions": [
    "sidePanel",
    "activeTab"
  ],

接着添加webextension-polyfill

yarn add webextension-polyfill
yarn add -D @types/webextension-polyfill

接着就可以在App.tsx里面通过下面获取到当前的标签

import browser from 'webextension-polyfill';

const tabs = await browser.tabs.query({ active: true, currentWindow: true });

    if (tabs.length === 0) {
      console.error('could not locate active tabs');
      return;
    }

如何在当前标签运行脚本

申请scripting权限

"permissions": [
    "activeTab",
    "sidePanel",
    "scripting"
  ],

接着注入脚本

const activeTab = tabs[0];
await browser.scripting.executeScript({
      target: { tabId: activeTab.id as number },
      files: ['/helper/highlightDomTree.js']
    });

执行动态脚本

为了防止XSS，Chrome严格限制了executeScript，不允许执行eval或者new Function。如果需要，则需要开启debugger权限，就可以操作当前标签页了。

chrome.debugger.attach({ tabId: tabId }, '1.3', async () => {

      await chrome.debugger.sendCommand(
        { tabId: tabId },
        'Runtime.evaluate',
        { expression: 'console.log("dynanmic codes...")' }
      );

      await chrome.debugger.detach({ tabId: tabId });
    });