Chrome扩展Isolated Worlds场景下Webpack 5代码打包复用问题

问题核心原因 #

当使用chrome.scripting.executeScript的func参数传递函数时，Chrome会序列化该函数的源码并在隔离环境中执行。但Webpack默认打包会将函数依赖的变量、模块封装到闭包或模块系统中，导致序列化后的函数源码在隔离环境中找不到这些引用，从而抛出"未定义"错误。

可行解决方案 #

方案一：将隔离环境代码打包为独立自包含脚本（推荐） #

把需要在隔离环境运行的代码及其所有依赖单独抽离成一个文件，通过Webpack打包为独立脚本，再用files参数注入，避免序列化丢失依赖的问题。

1. 创建独立隔离脚本文件

// src/isolated-script.ts
import { some } from "./anotherFile.ts";

const anotherFunctionCall = () => {
  return some.objectContainingFunctions();
};
const doSomthingWithA = (a) => {
  console.log(a);
};

function someFunctionToUnpack() {
  const a = anotherFunctionCall();
  doSomthingWithA(a);
}

// 注入后自动执行函数
someFunctionToUnpack();

2. 修改Webpack入口配置
   在entry中添加这个独立脚本的打包入口：

module.exports = {
  entry: {
    'service-worker': './src/service-worker.ts',
    'content': './src/content.ts',
    'index': './src/backend/index.ts',
    'isolated-script': './src/isolated-script.ts' // 新增隔离脚本入口
  },
  // ...其他配置不变
};

3. 更新executeScript调用
   替换func参数为files，指定打包后的脚本文件：

chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  if (message.action === 'DO_STH') {
    chrome.tabs.query({ active: true, currentWindow: true }, (tabs) => {
      const tab = tabs[0];
      if (tab && tab.id !== undefined) {
        chrome.scripting.executeScript({
          target: { tabId: tab.id as number },
          files: ['isolated-script.js'], // 使用独立脚本文件
        });
      }
    });
  }
});

方案二：内联依赖并禁用代码混淆 #

通过手动内联所有依赖，同时关闭Webpack对目标代码的压缩混淆，确保序列化后的函数源码包含完整的依赖逻辑。

1. 修改Webpack压缩配置
   对包含隔离函数的文件禁用混淆和压缩：

module.exports = {
  optimization: {
    minimize: true,
    minimizer: [new TerserPlugin({
      terserOptions: {
        compress: true,
        mangle: true
      },
      exclude: /service-worker\.js$/ // 排除包含隔离函数的文件
    })],
  },
};

2. 封装自包含函数字符串
   将函数和所有依赖封装成可序列化的字符串，通过code参数注入：

// service-worker.ts中封装函数
const getIsolatedCode = () => `
  const some = ${JSON.stringify(require('./anotherFile.ts').some)};
  const anotherFunctionCall = () => {
    return some.objectContainingFunctions();
  };
  const doSomthingWithA = (a) => {
    console.log(a);
  };
  function someFunctionToUnpack() {
    const a = anotherFunctionCall();
    doSomthingWithA(a);
  }
  someFunctionToUnpack();
`;

// 更新executeScript调用
chrome.scripting.executeScript({
  target: { tabId: tab.id as number },
  code: getIsolatedCode(),
});

方案三：使用raw-loader直接导入源码字符串 #

通过raw-loader将隔离代码文件作为原始字符串导入，绕过Webpack的打包处理，直接将源码注入隔离环境。

1. 安装raw-loader

npm install raw-loader --save-dev

2. 添加Webpack规则

module.exports = {
  module: {
    rules: [
      // ...其他规则
      {
        test: /isolated-code\.ts$/,
        use: 'raw-loader'
      }
    ]
  },
};

3. 导入并使用源码

// src/isolated-code.ts（内容同方案一的isolated-script.ts）

// service-worker.ts中导入
import isolatedCode from './isolated-code.ts';

// 更新executeScript调用
chrome.scripting.executeScript({
  target: { tabId: tab.id as number },
  code: isolatedCode,
});

方案对比 #

• 方案一：结构清晰，维护成本低，适合复杂逻辑和多处复用场景，唯一缺点是多生成一个打包文件。
• 方案二：无需额外文件，但需手动内联依赖，适合简单逻辑，容易因依赖变更出错。
• 方案三：直接保留原始源码结构，避免Webpack打包干扰，适合需要调试隔离环境代码的场景。

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