Chrome扩展：content_script无法正确接收popup.js传递的变量

• 首次点击时mainLoop先于消息接收执行：动态注入content_script.js后，脚本会立刻执行mainLoop()，但此时popup的消息还未发送到content script，所以变量值为undefined。
• 第二次点击出现重复触发与旧值问题：每次点击都会调用executeScript重复注入content_script.js，导致页面中存在多个chrome.runtime.onMessage监听器，消息会被多次接收；同时每次注入都会执行一次mainLoop()，新注入脚本的变量初始为undefined，而旧监听器会修改旧脚本内的变量，导致mainLoop拿到历史旧值。

1. 优化popup.js：避免重复注入脚本 #

先尝试发送消息，若标签页内已有对应监听器（即脚本已注入）则直接发送；若未收到响应（脚本未注入）再执行注入，从根源避免重复注入。

function injectTheScript() {
  const myValue1 = document.getElementById('myValue1').value;
  const myValue2 = document.getElementById('myValue2').value;
  const parameterArray = [myValue1, myValue2];

  chrome.tabs.query({active: true, currentWindow: true}, tabs => {
    const tabId = tabs[0].id;
    // 先尝试发送消息，判断脚本是否已存在
    chrome.tabs.sendMessage(tabId, {myVar: parameterArray}, response => {
      if (chrome.runtime.lastError) {
        // 脚本未注入，执行注入操作
        chrome.scripting.executeScript({
          target: {tabId: tabId},
          files: ['content_script.js']
        }, () => {
          // 注入完成后再次发送消息
          chrome.tabs.sendMessage(tabId, {myVar: parameterArray});
        });
      }
    });
  });
}

document.getElementById('clickactivity').addEventListener('click', injectTheScript);

2. 重构content_script.js：消息驱动执行主逻辑，避免重复监听 #

移除自动执行的mainLoop()，改为收到消息时触发主逻辑；同时确保监听器只注册一次，或执行后自动移除，避免重复响应。

方案A：一次性监听器（适合单次执行场景） #

async function mainLoop(value1, value2) {
  console.log('into mainloop');
  console.log('myValue1 in mainLoop:' + value1);
  console.log('myValue2 in mainLoop:' + value2);
  
  // ... 执行你的业务逻辑
}

function handleMessage(message, sender, sendResponse) {
  // 触发主逻辑
  mainLoop(message.myVar[0], message.myVar[1]);
  // 回复popup，确认已接收消息
  sendResponse({received: true});
  // 移除监听器，避免重复触发
  chrome.runtime.onMessage.removeListener(handleMessage);
}

chrome.runtime.onMessage.addListener(handleMessage);

方案B：持久监听器（适合多次点击触发场景） #

async function mainLoop(value1, value2) {
  console.log('into mainloop');
  console.log('myValue1 in mainLoop:' + value1);
  console.log('myValue2 in mainLoop:' + value2);
  
  // ... 执行你的业务逻辑
}

// 标记监听器是否已注册，避免重复注册
if (!window.contentScriptListenerRegistered) {
  chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
    mainLoop(message.myVar[0], message.myVar[1]);
    sendResponse({received: true});
  });
  window.contentScriptListenerRegistered = true;
}

• 动态注入脚本时，每次注入都会在页面中生成一个新的脚本实例，必须避免重复注入，否则会引发多实例的变量污染与重复监听问题。
• 让mainLoop直接接收消息传递的参数，而非依赖全局变量，能更清晰地控制数据流向，避免时序问题。

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