Google chrome extension chrome扩展：createImageData IndexSizeError，但代码仍然有效

我正在做一个chrome扩展

默认弹出窗口有一个按钮，该按钮的click eventlistener调用脚本。代码如下

它创建一个canvas元素，将其附加到body元素，并绘制一个在页面上移动的圆。它起作用了

(function() {

  let b = document.getElementsByTagName('body')[0];
  let c = document.createElement('canvas');
  b.appendChild(c);

  c.width = window.innerWidth;
  c.height = window.innerHeight;
  c.style.position = 'fixed';
  c.style.top = '0';
  c.style.left = '0';

  let ctx = c.getContext("2d");
  let imgdata = ctx.createImageData(c.width, c.height);

  let frameCount = 0;
  let draw = setInterval(function() {
    frameCount += 1;
    ctx.putImageData(imgdata, 0, 0);

    ctx.fillStyle = '#fc0c';
    ctx.beginPath();
    ctx.arc(300+frameCount, 300, 10, 0, 2*Math.PI);
    ctx.fill();

  }, 20);

})();

我的想法是创建一个与画布大小相同的空白

imagedata

元素，并在每一帧将其“绘制”到画布上，以便为下一帧重置画布。这样，球看起来就像是在页面其余元素的上方移动

事实上，上面的代码就是这样做的。但是有件事困扰着我

问题

在

chrome://extensions/

我看到一个错误。错误是将

0

值传递给

createImageData

时得到的

IndexSizeError

。但是，当我收到此错误时，

imagedata

元素仍在创建中，如果我将其打印到控制台，我知道它是以我期望的方式创建的

稍微深入一点，

Inspect views background page

报告了同样的情况

无论如何，只要单击主扩展弹出窗口上的按钮，就会执行此代码，因此

窗口.innerWidth

和

窗口.innerHeight

已经可用

我甚至用承诺来确保

ctx

和

imgdata

在设置

c.width

和

c.height

之前不被赋值。我也尝试过使用

setTimeout

，但是我的想法已经没有了，我也遇到了同样的错误。最终的结果和我现在得到的是一样的，那就是动画完全按照我的预期工作

担忧

当我达到我想要的结果时，我渴望发现这个错误消息的原因。我不确定它是否报告了我做错的事情，这可能会影响我的小项目

更新：包括json清单

包含上述代码的文件是

file.js

{
 "name": "Name",
 "version": "1.0",
 "description": "Very description",
 "permissions": ["activeTab", "declarativeContent", "storage"],
 "background": {
    "scripts": ["background.js", "file.js"],
    "persistent": false
 },
 "content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "js": ["otherfile.js"]
 }],
 "options_page": "",
 "page_action": {
    "default_popup": "popup.html",
     "default_icon": {
        "16": "images/1.png",
        "32": "images/2.png",
        "48": "images/3.png",
        "128": "images/4.png"
     }
 },
    "icons": {
        "16": "images/1.png",
        "32": "images/2.png",
        "48": "images/2.png",
        "128": "images/4.png"
    },
 "manifest_version": 2,
 "web_accessible_resources": ["images/1.png", "images/2.png", "images/3.png", "images/4.png"]
}

---

该列表显示了过时的错误（里面有一个清除错误的按钮），因此您需要使用实际的devtools。在弹出窗口中单击鼠标右键，单击“检查”，然后调试代码。不清楚为什么您会在完全无关的背景脚本中看到此错误，因此您的manifest.json可能是错误的，例如，您在弹出页面和背景页面中加载相同的popup.js。我对扩展还是新手，但错误显示在'chrome://extensions'用于管理扩展的页面。我可以清除错误，但它总是再次出现。清除或不清除都不会改变结果-无论哪种方式都有效。该错误的上下文是“\u generated\u background\u page.html”，它确实引用了包含我上面编写的脚本的.js文件。我将查看清单。您是否正在运行这个

ctx.createImageData（c.width，c.height）

在后台js文件？@dactyrafficle中，确保始终完全包含manifest.json，这样我们就不必猜测和建议不相关的内容来尝试。