Question

我的 chrome 扩展中有这段代码（我是为了学习而制作的）

manifest.json

{
  "manifest_version": 2,
  "name": "test",
  "description": "test",
  "permissions": [
    "webRequest",
    "activeTab",
    "downloads"
  ],
  "minimum_chrome_version": "85.0",
  "devtools_page": "index.html",
  "background": {
    "scripts": [
      "js/background.js"
    ],
    "persistent": true
  },
  "browser_action": {
    
  },
  "version": "1.0.0",
  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

devtools.js

let button = document.getElementById('process-data');
let fileChunks = [];

chrome.devtools.panels.create('test', '', '/index.html');

let port = chrome.runtime.connect({
  name: 'devtools'
});

// port.onMessage.addListener( (message) => {});

chrome.devtools.network.onRequestFinished.addListener( (request) => {
  if(request.response.status === 206 ){
    console.log(request);
    request.getContent( (content, encoding) => {
      let data = `data:audio/mpeg;base64,${content}`;
      fetch(data)
      .then( (res) => res.arrayBuffer() )
      .then( (buffer) => {
        console.log(buffer);
        fileChunks = [...buffer];
      });
    });
  }
});

button.addEventListener('click', () => {
  port.postMessage({type: 'processBuffer', data: fileChunks});
});

我想要做的是检查来自某个网站的网络请求并获取响应正文内容。在这一点上，一切似乎都很好，我已经解决了一个与 request.method 相关的问题，我不知道为什么是 undefined 并且会导致扩展无法正常工作。现在我已经实现了一个带有后台页面的简单消息系统，如您所见，我想将检索到的正文内容传递给扩展程序的后台页面以进行处理。由于我不知道如何检查是否没有发出请求，我正在实现一个按钮将内容发送到后台进行处理，但我无法访问面板中的按钮背景.js

let chunks = [];

chrome.runtime.onConnect.addListener( (port) => {
  let devtoolsListener = (message, sender, sendResponse) => {
    if(message.type === 'processBuffer'){
      processChunks(message.data);
    }
  }
  port.onMessage.addListener(devtoolsListener);
  port.onDisconnect.addListener( () => {
    devToolsConnection.onMessage.removeListener(devToolsListener);
  });
});

const processChunks = async (chunks) => {
  console.log(chunks);
}

index.html

<script src="js/devtool.js"></script>

<button id="process-data">Process audio data</button>

这些是我得到的错误

Uncaught TypeError: Cannot read property 'addEventListener' of null
Uncaught (in promise) TypeError: buffer is not iterable
Uncaught TypeError: Cannot read property 'addEventListener' of null
Error in event handler: ReferenceError: devToolsConnection is not defined

有什么方法可以检测页面何时完成所有请求，以便将消息发送到后台脚本以开始数据处理？

Answer 1

我假设您的按钮不是在脚本运行时创建的。
改为：

window.addEventListener('DOMContentLoaded', (event) => {
    let button = document.getElementById('process-data');
    button.addEventListener('click', () => {
       port.postMessage({type: 'processBuffer', data: fileChunks});
   });
});

我相信你想要：

port.onMessage.removeListener(devToolsListener);

不是

devToolsConnection.onMessage.removeListener(devToolsListener);

devtools - 当所有网络请求完成时向后台页面发送消息

1 个答案: