document.getElementById() always returns null

Question

I think i spent over an hour searching for a solution to this but i couldn't find any. I was creating a chrome extension with manifest 3 but i have a problem on requiring DOM elements from the content-script indicated in the manifest.

manifest.json

{
    "manifest_version": 3,
    "name": "extension name",
    "version": "1.0",
    "description": "description",
    "icons": {},
    "content_scripts": [
      {
        "matches": ["*://*.domain.com/*"],
        "js": ["main.js"]
      }
    ],
    "action": {
        "default_popup": "popup.html"
    },
    "host_permissions": [
        "*://*.domain.com"
    ],
    "permissions": [
        "cookies",
        "activeTab"
    ]
}

main.js

window.onload = function () {
    console.log('window loaded')

    const run = document.getElementById('run');

    console.log(run);
}

popup.html

<!DOCTYPE html>

<html>
    <head>
        <script src="main.js" type="module"></script>
    </head>
    <body>
        <button id="run">Restore</button>
    </body>
</html>

const run = document.getElementById('run'); This is always null.

I would like to know what i am doing wrong and i will appreciate your asnwers.

(I am testing this on microsoft edge by the way and all the files are in the main folder)

The question in favor of which this one has been closed does not meet what i am trying to do also because i am not using jquery

Put the script tag after body. When your script runs there is no dom initialized. That's why it's not finding the button. Or you can add `defer` to script tag. — Erenn, Mar 28 '22 at 16:31
@Erenn This is a browser extension, the script isn't in the HTML. — Barmar, Mar 28 '22 at 16:33
@Barmar Ok. I wanna keep this reputation score constant anyway. — Erenn, Mar 28 '22 at 16:42
@iKingNinja Is there logs in the console? I actually dont know about the browser extensions. You can open the question again. It got closed mistakenly I believe. — Erenn, Mar 28 '22 at 16:57

score 0 · Answer 1 · answered Mar 28 '22 at 16:33

0

you are running the script first before the element render.

<!DOCTYPE html>

<html>

    <body>
        <button id="run">Restore</button>
    </body>
    <script src="main.js" type="module"></script>
</html>

answered Mar 28 '22 at 16:33

Abbas Hussain

1,277
6
14

Shouldn't putting it in `window.onload` solve that problem? – Barmar Mar 28 '22 at 16:43
That is not working. Also it should work if i put it into the window.onload event. – iKingNinja Mar 28 '22 at 16:54

document.getElementById() always returns null

1 Answers1