Chrome扩展Popup点击按钮后关闭且函数未执行问题求助

这个问题我之前也碰到过，核心根源是Chrome扩展的Popup页面是临时上下文：

• 点击Popup里的按钮后，它默认会自动关闭，此时Popup的JavaScript环境直接被销毁，你在popup.js里注册的webRequest监听器会被浏览器自动移除，自然就看不到请求日志了。
• 而右键检查Popup时，浏览器会强制保持Popup处于打开状态，其上下文不会销毁，所以监听器能正常工作。

你已经在manifest.json里配置了持久运行的Background页面，刚好可以把录制的核心逻辑放到这里——Background是一直后台运行的，不受Popup关闭的影响。Popup只需要负责给Background发“开始/停止”的指令就行，完美匹配你“点击record后扩展最小化，函数持续运行到点击stop”的需求。

1. 修改 popup.js #

把原来直接注册监听器的逻辑改成给Background发消息，同时主动关闭Popup：

document.getElementById("record").addEventListener("click", () => {
  chrome.runtime.sendMessage({action: "startRecording"});
  window.close(); // 主动关闭Popup，实现你要的"最小化"效果
});

document.getElementById("stop").addEventListener("click", () => {
  chrome.runtime.sendMessage({action: "stopRecording"});
  window.close();
});

2. 完善 background.js #

在Background里实现录制的核心逻辑，监听Popup发来的消息，注册或移除webRequest监听器：

// 定义捕获请求的函数，负责打印URL
function onSendHeaders(info) {
  console.log("Captured request:", info.url);
}

// 监听Popup发来的控制消息
chrome.runtime.onMessage.addListener((message, sender, sendResponse) => {
  switch(message.action) {
    case "startRecording":
      const requestFilter = {
        urls: ['http://*/*', 'https://*/*'],
        types: ['main_frame', 'sub_frame', 'object', 'xmlhttprequest', 'stylesheet', 'script' , 'image']
      };
      chrome.webRequest.onSendHeaders.addListener(onSendHeaders, requestFilter, ['requestHeaders']);
      console.log("Recording started successfully");
      break;
    case "stopRecording":
      chrome.webRequest.onSendHeaders.removeListener(onSendHeaders);
      console.log("Recording stopped");
      break;
  }
});

修改完代码后重新加载扩展：

1. 点击扩展图标打开Popup，点击record按钮，Popup会自动关闭。
2. 打开Chrome扩展管理页面（chrome://extensions/），找到你的recorder扩展，点击“背景页面”的“检查”按钮，打开Background的控制台。
3. 此时在浏览器里访问任意页面，就能在Background控制台看到捕获的请求URL了。
4. 再次打开Popup点击stop按钮，录制就会停止。

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