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
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>