Chrome扩展：如何从后台脚本向内容脚本传递参数（不使用存储）

嘿，我之前做Chrome扩展的时候也纠结过这个——不想用storage存临时参数太麻烦，后来发现Chrome本身就提供了直接传参的方式，完全不用绕路！给你两种靠谱的方案，都是纯后台和内容脚本直接交互的：

方案1：注入脚本时通过args直接传参 #

这个方法适合你主动从后台触发注入脚本的场景，直接把参数打包进注入配置里，内容脚本能直接拿到，一步到位。

第一步：确认Manifest权限 #

先确保你的manifest.json有必要权限，动态注入的话不用提前声明content_scripts：

{
  "manifest_version": 3, // 用V2的话改成2就行
  "name": "你的扩展名称",
  "version": "1.0",
  "background": {
    "service_worker": "eventpage.js" // V2这里写 "scripts": ["eventpage.js"]
  },
  "permissions": ["activeTab"]
}

第二步：后台脚本（eventpage.js）传参 #

调用注入API时，通过args字段传递参数（支持所有可序列化类型，比如对象、字符串）：

// 给当前激活标签页注入脚本并传参
chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  const targetTabId = tabs[0].id;
  // 准备要传递的参数
  const injectParams = {
    title: "自定义标题",
    content: "这是从后台直接传来的内容",
    style: {color: "#ff0000"}
  };

  // V3用scripting.executeScript，V2用tabs.executeScript
  chrome.scripting.executeScript({
    target: {tabId: targetTabId},
    files: ["inject.js"],
    args: [injectParams] // 参数放进数组里传递
  }, () => {
    console.log("脚本注入完成，参数已同步");
  });
});

第三步：内容脚本（inject.js）接收参数 #

在内容脚本里直接通过arguments拿到参数：

// 取出后台传来的参数
const receivedParams = arguments[0];

// 用参数生成并插入HTML
const newDiv = document.createElement("div");
newDiv.innerHTML = `
  <h3 style="color: ${receivedParams.style.color}">${receivedParams.title}</h3>
  <p>${receivedParams.content}</p>
`;
document.body.appendChild(newDiv);

方案2：用Chrome消息传递API传参 #

如果你的内容脚本是提前自动注入到页面的（比如在Manifest里配置了content_scripts），或者需要后续动态多次传参，就用这个方案，灵活性更高。

第一步：Manifest配置（自动注入场景） #

如果是自动注入，要在Manifest里声明content_scripts：

{
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["<all_urls>"], // 替换成你要注入的网站规则
      "js": ["inject.js"]
    }
  ],
  "permissions": ["tabs"]
}

第二步：内容脚本（inject.js）监听消息 #

先注册消息监听器，等待后台发参数：

// 监听来自后台的消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  // 加个类型判断，避免和其他消息混淆
  if (message.type === "insert_html_params") {
    const params = message.data;
    // 用参数插入HTML
    const newDiv = document.createElement("div");
    newDiv.innerHTML = `
      <h3 style="color: ${params.style.color}">${params.title}</h3>
      <p>${params.content}</p>
    `;
    document.body.appendChild(newDiv);
    // 给后台回复确认
    sendResponse({status: "success"});
  }
});

第三步：后台脚本（eventpage.js）发送消息 #

需要传参时，给目标标签页发消息：

chrome.tabs.query({active: true, currentWindow: true}, (tabs) => {
  const targetTabId = tabs[0].id;
  const injectParams = {
    title: "消息传递的标题",
    content: "这是通过消息API传来的内容",
    style: {color: "#00ff00"}
  };

  chrome.tabs.sendMessage(targetTabId, {
    type: "insert_html_params",
    data: injectParams
  }, (response) => {
    if (response?.status === "success") {
      console.log("参数已传递，HTML插入成功");
    }
  });
});

方案选择小建议 #

• 临时触发注入（比如点扩展图标才注入）→ 用方案1，代码更简洁，不用额外监听。
• 提前自动注入/需要多次动态传参→ 用方案2，交互更灵活。

这两种方法都完全不需要依赖chrome.storage或localStorage，直接在后台和内容脚本间传递参数，完美解决你的需求！

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