I'm designing a Google Chrome extension. My goal is to have an image inserted into the body of the website that the user is looking at. When I try it out, I get two errors: "Service worked registration failed" and "Uncaught ReferenceError: document is not defined".

I've tried using a try and catch system, a different JavaScript wrapper, adjusting the "permissions" & "host-permissions", adding "minimum_chrome_version", adding "web_accessible_resources", and more. Nothing has worked so far. Here's my code:

manifest.json:

{
  "name": "blah",
  "description": "blah",
  "version": "1.0",
  "manifest_version": 3,
  "icons": {
    "16": "icon.png",
    "32": "icon.png",
    "48": "icon.png",
    "128": "icon.png"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "minimum_chrome_version": "93",
  "background": {
    "service_worker": "background.js"
  },
  "content_scripts": [{
       "matches": ["<all_urls>"],
       "js": ["background.js"],
       "css":["popup.css"]
    }],

  "permissions": [
    "storage", 
    "activeTab", 
    "scripting"
  ],
  "host_permissions": [
   "<all_urls>" 
  ],
  "web_accessible_resources": [
    {
      "resources": ["ezgif-3-9576363471.gif"],
      "matches": ["<all_urls>"]
    }
   ]
}

background.js:

const img = document.createElement("img");
img.src = chrome.runtime.getURL("ezgif-3-9576363471.gif");
document.body.append(img);

background-wrapper.js:

try {
  importScripts("background.js");
} catch (e) {
  console.error(e);
}

To summarize, I'm trying to figure out how to let document be defined, and how to properly use service-worker. Thanks in advance!