chrome расширение: createImageData IndexSizeError, но код все еще работает

Question

Я делаю расширение chrome.

В всплывающем окне по умолчанию есть кнопка, а в списке событий этой кнопки вызывается скрипт. Код ниже.

Он создает элемент canvas, добавляет его к элементу body и dr aws круг, который перемещается по странице. Это работает.

(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/ Я вижу ошибку. Ошибка - IndexSizeError, которую вы получаете, когда передаете значение 0 в createImageData. Но пока я получаю эту ошибку, элемент imagedata все еще создается, и если я распечатываю его на консоли, я знаю, что он создается так, как я ожидаю.

Пройдя немного глубже, Inspect views background page сообщает об этом.

В любом случае, этот код выполняется, когда вы нажимаете кнопку во всплывающем окне основного расширения, и поэтому window.innerWidth и window.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"]
}