javascript - 单击 chrome 扩展 DOM(popup.html) 上的按钮时，扩展 DOM 关闭并且不会在 popup.js 中调用 onclick 函数

Question

我正在编写一个 chrome 扩展来记录单击开始按钮后触发的请求。

这是我的文件:1. list .json

{
  "manifest_version": 2,

  "name": "recorder",
  "description": "Recorder",
  "version": "1.0",

  "browser_action": {
    "default_icon": "icon.png",
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab",
    "storage",
    "webRequest",
    "<all_urls>",
    "webRequestBlocking",
    "background"
  ],

  "background": {
    "scripts": ["background.js"],
    "persist" : true
  },

}

1. popup.html

   这里创建了 2 个按钮，id 为“record”和“stop”

2. popup.js

   document.getElementById("record").addEventListener("click", startRecording);
   document.getElementById("stop").addEventListener("click", stopRecording);
   
   function startRecording() {
        var RequestFilter = {};
        var  MatchPatterns = ['http://*/*', 'https://*/*'];
   
        RequestFilter.urls = MatchPatterns;
   
           RequestFilter.types = ['main_frame', 'sub_frame', 'object', 'xmlhttprequest', 'stylesheet', 'script' , 'image'];
           chrome.webRequest.onSendHeaders.addListener(onSendHeaders, RequestFilter,
           ['requestHeaders']);
   }
   
   
   function stopRecording() {
       chrome.webRequest.onSendHeaders.removeListener(onSendHeaders);
   }
   
   function onSendHeaders(info) {
         console.log(info.url);
   }
   

现在，当我在 chrome 中打开扩展程序时，会打开一个 DOM，上面有 2 个按钮。当我单击 ID 为“record”的按钮时，扩展 DOM(popup.html) 关闭并且没有任何反应。

但是当我右键单击并检查弹出窗口然后单击“记录”按钮时，popup.html 保持打开状态并且 URL 打印在控制台上。

预期的行为是:单击录制按钮时，扩展程序应最小化，但单击按钮时调用的函数应有效，直到单击停止按钮为止。

Answer 1

我可以通过在 popup.js 和 background.js 之间传递请求来做到这一点

我已经使用 chrome.extension.sendRequest 发送了一个参数类型:popup.js 中的 'start'

在 background.js 中，我添加了一个监听器 onRequest 来监听发送的请求。

这样我就可以在后台录制了。