Chrome extension Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

Asked Aug 18 '22 at 15:56

Active Aug 18 '22 at 15:56

Viewed 1,473 times

Manifest.json

{
  "name": "Getting Started Example",
  "description": "Build an Extension!",
  "version": "1.0",
  "manifest_version": 3,
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "32": "icons/32x32.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["*://*/*"],
      "run_at": "document_start",
      "js": ["content-script.js"]
    }
  ],
  "permissions": [
    "scripting",
    "tabs",
    "notifications",
    "activeTab",
    "webRequest"
  ],
  "host_permissions": ["*://*/*", "https://*/*"],
  "web_accessible_resources": [
    {
      "matches": ["*://*/*", "http://*/*", "https://*/*"],
      "resources": ["web.js"]
    }
  ],
  "icons": {
    "32": "/icons/32x32.png"
  }
}

content-script.js

console.log("I am content script");
function injectScript() {
  var script = document.createElement("script");
  script.src = chrome.runtime.getURL("scripts/web.js");
  script.type = "text/javascript";
  console.log("Inserting Script", document);
  document.head.appendChild(script);
}
injectScript();

web.js

console.log("I am web.js");

setInterval(() => {
  console.log(window.test, "Test in setInterval");
}, 1000);

console.log(window.test, "Logging test from web.js");

// document.body.style.backgroundColor = "red";

Upon refreshing the page I am getting the following error

Not able to get what could be the issue, can someone guide me? Thank You!

asked Aug 18 '22 at 15:56

Rahul

1,858
1
12
33

Why are you injecting a file into the page? – epascarello Aug 18 '22 at 15:59
Maybe answer here will help https://stackoverflow.com/questions/9515704/use-a-content-script-to-access-the-page-context-variables-and-functions – epascarello Aug 18 '22 at 16:02
I want to read and write into `window` object in scope of the page – Rahul Aug 18 '22 at 16:02
The above question is too old, we are using manifesr V3. – Rahul Aug 18 '22 at 16:03
A lot of things has been removed in V3 which was in V2 – Rahul Aug 18 '22 at 16:03
I see V3 there in the answers, unless I am mistaken. – epascarello Aug 18 '22 at 16:10
Looking for someone who has faced the similar issue in V3, still will look into the answer – Rahul Aug 18 '22 at 16:13
Replace `head` with `documentElement`. See also [this answer](https://stackoverflow.com/a/46870005/). – wOxxOm Aug 18 '22 at 18:35
@wOxxOm `documentElement` worked, thanks for sharing this – Rahul Aug 19 '22 at 19:48

Chrome extension Uncaught TypeError: Cannot read properties of null (reading 'appendChild')

Manifest.json

content-script.js

web.js

0 Answers0