Manifest V3版Chrome扩展如何将npm模块导入内容脚本与后台Service Worker

1. 项目结构 #

your-extension-project/
├── src/
│   ├── background.js   # 后台Service Worker入口
│   └── content.js      # 内容脚本入口
├── webpack.config.js   # webpack配置文件
├── package.json
├── manifest.json       # 扩展配置文件
└── dist/               # webpack打包输出目录（自动生成）

2. 安装所需依赖 #

运行命令安装webpack、打包工具和目标npm包：

npm install webpack webpack-cli cheerio --save-dev

3. webpack配置示例 #

在根目录新建webpack.config.js，配置多入口分别打包后台脚本和内容脚本：

const path = require('path');

module.exports = {
  // 配置多入口，分别对应后台和内容脚本
  entry: {
    background: './src/background.js',
    content: './src/content.js'
  },
  // 打包产物输出到dist目录
  output: {
    filename: '[name].js',
    path: path.resolve(__dirname, 'dist'),
    clean: true // 每次打包清空旧产物
  },
  // 适配Chrome扩展运行环境
  target: ['web', 'es2020'],
  mode: 'production', // 调试时可改为development
}

4. 业务代码示例 #

直接在入口文件中正常导入cheerio使用即可，webpack会自动将依赖打包到产物中。

src/background.js（后台Service Worker示例） #

const cheerio = require('cheerio');

// 示例：接收消息后解析HTML
chrome.runtime.onMessage.addListener((msg, sender, sendResponse) => {
  if (msg.type === 'parseHtml') {
    const $ = cheerio.load(msg.htmlContent);
    const title = $('title').text();
    sendResponse({ pageTitle: title });
  }
});

src/content.js（内容脚本示例） #

const cheerio = require('cheerio');

// 示例：解析当前页面DOM
const $ = cheerio.load(document.documentElement.outerHTML);
const pageH1 = $('h1').first().text();
console.log('当前页面一级标题：', pageH1);

5. Manifest V3 配置示例 #

根目录的manifest.json直接引用webpack打包后的dist目录产物即可：

{
  "manifest_version": 3,
  "name": "Cheerio测试扩展",
  "version": "1.0",
  "description": "测试Manifest V3中导入cheerio",
  "background": {
    "service_worker": "dist/background.js"
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["dist/content.js"]
    }
  ],
  "permissions": []
}

6. 打包和加载扩展 #

1. 运行打包命令生成产物：

npx webpack

2. 打开Chrome扩展管理页，开启开发者模式，点击「加载已解压的扩展程序」，选择项目根目录即可完成加载。

内容的提问来源于stack exchange，提问作者ezpzdev