后台脚本不适用于WebExtension

问题描述

我正在从事Web扩展项目。我试图在Mozilla上进行测试。该图标将出现在应该显示的位置，并弹出。后台脚本无法正常运行。它使用Firefox API“存储”从标头响应中获取数据，但我找不到对象的存储位置。

这是我的manifest.json和背景脚本：

{

"manifest_version": 2,"name": "Stream Boiler","version": "1.0","description": "display the carbon footprint of video streaming","icons": {
      "48": "icons/boiler-48.png"
    },"permissions": [
        "webRequest","tabs","storage","<all_urls>"
      ],"browser_action": {
        "default_icon": "icons/boiler-32.png","default_title": "Stream Boiler","default_popup": "popup/popup.html"
      },"background": {
        "scripts": ["background.js"]
      }

    }  

extractHostname = (url) => {
    let hostname = url.indexOf("//") > -1 ? url.split('/')[2] : url.split('/')[0];
    // find & remove port number
    hostname = hostname.split(':')[0];
    // find & remove "?"
    hostname = hostname.split('?')[0];
    return hostname;
  };

  setByteLengthPerOrigin = (origin,byteLength) => {
    const stats = localStorage.getItem('stats');
    const statsJson = null === stats ? {} : JSON.parse(stats);
    let bytePerOrigin = undefined === statsJson[origin] ? 0 : parseInt(statsJson[origin]);
    statsJson[origin] = bytePerOrigin + byteLength;
    localStorage.setItem('stats',JSON.stringify(statsJson));
  
  };


  listener = (details) => {
    const responseHeadersFileType = details.responseHeaders.find(element => element.name.toLowerCase() === "content-type");
    if (responseHeadersFileType === "application/octet-stream" || responseHeadersFileType === "video/mp4" ){
    if (typeof(browser) === 'undefined'){
    const responseHeadersContentLength = details.responseHeaders.find(element => element.name.toLowerCase() === "content-length");
    const contentLength = undefined === responseHeadersContentLength ? {value: 0}
      : responseHeadersContentLength;
     const requestSize = parseInt(contentLength.value,10);
     setByteLengthPerOrigin(origin,requestSize);

    return {}
     }
    
     let filter = browser.webRequest.filterResponseData(details.requestId);

  filter.ondata = event => {
    const origin = extractHostname(!details.originUrl ? details.url : details.originUrl);
    setByteLengthPerOrigin(origin,event.data.byteLength);

    filter.write(event.data);
  };

  filter.onstop = () => {
    filter.disconnect();
  };

  return {};
}
}


    

  browser.webRequest.onHeadersReceived.addListener(
    listener,{urls: ['<all_urls>']},['responseHeaders']

                
    
  )

我的代码怎么了？

提前谢谢！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）