后台脚本不适用于WebExtension

Question

我正在从事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']

                
    
  )

我的代码怎么了？

提前谢谢！