Chrome扩展开发：如何从background.js向嵌入页面的page-inject.js传变量

我明白你的问题了——你是要给通过createElement动态嵌入页面的page-inject.js传值，而不是标准的content script，这种情况确实容易踩坑，因为动态嵌入的脚本属于页面的主上下文，和background、content script的上下文是完全隔离的，直接共享变量肯定行不通。我给你几个可行的解决方案，亲测有效：

方法一：提前注入全局变量 #

在嵌入page-inject.js之前，先通过一个临时的script标签把变量挂载到页面的window对象上，这样page-inject.js加载后就能直接读取这个全局变量。

示例代码（background.js中执行） #

// 假设你已经获取了目标tab的tabId
chrome.scripting.executeScript({
  target: { tabId: tabId },
  func: () => {
    // 第一步：注入全局变量到页面上下文
    const varScript = document.createElement('script');
    // 如果是复杂对象，用JSON.stringify转换
    varScript.textContent = `window.my_var = 123;`;
    document.head.appendChild(varScript);
    
    // 第二步：嵌入你的page-inject.js
    const injectScript = document.createElement('script');
    injectScript.src = chrome.runtime.getURL('page-inject.js');
    document.head.appendChild(injectScript);
  }
});

page-inject.js中读取变量 #

// 直接访问全局变量
console.log(window.my_var); // 输出123

方法二：通过自定义事件传递数据 #

如果不想提前暴露全局变量，可以在page-inject.js加载完成后，通过自定义事件把数据发送过去，脚本监听事件即可接收。

示例代码（background.js中执行） #

chrome.scripting.executeScript({
  target: { tabId: tabId },
  func: () => {
    const injectScript = document.createElement('script');
    injectScript.src = chrome.runtime.getURL('page-inject.js');
    
    // 脚本加载完成后发送自定义事件
    injectScript.onload = () => {
      window.dispatchEvent(new CustomEvent('injectData', { 
        detail: { my_var: 123 } // 这里可以传任意数据
      }));
    };
    
    document.head.appendChild(injectScript);
  }
});

page-inject.js中监听事件 #

window.addEventListener('injectData', (event) => {
  const my_var = event.detail.my_var;
  console.log(my_var); // 输出123
  // 后续用这个变量做业务逻辑
});

方法三：通过DOM元素存储数据 #

把数据存在隐藏的DOM元素的data-*属性中，page-inject.js读取该元素的属性即可拿到数据，适合不想用全局变量或事件的场景。

示例代码（background.js中执行） #

chrome.scripting.executeScript({
  target: { tabId: tabId },
  func: () => {
    // 创建隐藏元素存储数据
    const dataContainer = document.createElement('div');
    dataContainer.style.display = 'none';
    // 复杂对象转成JSON字符串存储
    dataContainer.dataset.myVar = JSON.stringify({ value: 123 });
    document.body.appendChild(dataContainer);
    
    // 嵌入page-inject.js
    const injectScript = document.createElement('script');
    injectScript.src = chrome.runtime.getURL('page-inject.js');
    document.head.appendChild(injectScript);
  }
});

page-inject.js中读取数据 #

const dataEl = document.querySelector('div[data-my-var]');
const my_var = JSON.parse(dataEl.dataset.myVar).value;
console.log(my_var); // 输出123

注意事项 #

• 动态嵌入的脚本属于页面主上下文，无法直接访问Chrome扩展的API（如chrome.storage、chrome.runtime），所以不要尝试直接用扩展API传值。
• 确保你的manifest.json中已经声明了scripting权限和对应的host_permissions，否则chrome.scripting.executeScript会执行失败。
• 如果传递的是复杂对象，记得用JSON.stringify和JSON.parse进行序列化/反序列化，避免数据丢失。

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