Chrome扩展Manifest V2迁移至V3：如何从background.js传变量到内容脚本

核心迁移前提 #

在Manifest V3中，原V2的chrome.tabs.executeScript已被废弃，需改用chrome.scripting.executeScript API，同时必须在manifest.json中添加对应权限：

{
  "permissions": ["scripting", "tabs"],
  "host_permissions": ["<all_urls>"] // 根据扩展实际需求限定注入范围，不要过度授权
}

方案1：兼容原V2全局变量逻辑 #

如果需要完全复刻原V2中「先定义页面全局变量，再注入脚本」的行为，需指定脚本运行在页面主上下文（world: 'MAIN'），确保events.js能直接访问全局变量：

// 后台service worker代码（原background.js）
chrome.scripting.executeScript({
  target: { tabId: tabId },
  world: 'MAIN', // 与原V2 executeScript默认行为一致，运行在页面全局上下文
  func: (moduleValue) => {
    window.MODULE = moduleValue;
  },
  args: [MODULE] // 安全传递变量，避免字符串拼接的语法风险
}).then(() => {
  // 注入events.js脚本
  return chrome.scripting.executeScript({
    target: { tabId: tabId },
    world: 'MAIN',
    files: ['events.js']
  });
}).catch(err => console.error('脚本注入失败:', err));

方案2：更安全的隔离上下文传递（推荐） #

如果无需将变量暴露给页面其他脚本，推荐使用Manifest V3默认的隔离上下文，通过args直接传递参数给内容脚本，避免全局污染：

1. 修改events.js，添加参数接收逻辑：

// events.js中获取后台传递的变量
const MODULE = chrome.runtime.getScriptingArgs()[0];
// 后续业务逻辑直接使用MODULE即可

2. 后台注入脚本的代码：

chrome.scripting.executeScript({
  target: { tabId: tabId },
  files: ['events.js'],
  args: [MODULE] // 直接传递变量值
}).catch(err => console.error('脚本注入失败:', err));

迁移注意事项 #

• 避免用字符串拼接生成注入代码（原V2的code参数方式），容易引发语法错误或安全问题，优先用func+args或files+args传递变量。
• 隔离上下文是Manifest V3的默认行为，与页面脚本完全隔离，安全性更高，非必要不要使用MAIN上下文。

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