getElementById returns null (in extension to modify website)

Question

I am currently trying to create a chrome extension that alters a website (an interface for a ip camera that I bought, thats also why the site is a local site like 192.168.178.70 for example). I just want to add some buttons and stuff like that to add some functionality.

I used

document.body.onload

to wait until everything has loaded so I can grab a table or a div or whatever and create and add my button to it. But document.getElementById("ipcam_wrapper") does not seem to work properly, it returns null.

Well I tried to do the same thing in google chrome developer mode but it does also return null. I actually managed to get the element this way once but I am not able to recreate it because I did not do anything different.

There is only one element with that specific ID.

Only one element with that ID

Here i try to get the element:

Trying to get the element

So what am I doing wrong?

best regards

• Nisarg Shah: Do you have any iframe on the page? Also, can you create a minimal reproducible example?
• Nisarg Shah: @TPRammus If it is an iframe, that explains the issue. Can you check the source of the page (through right click, view page source) and see if there are any IFrame elements?
• Nisarg Shah: @TPRammus You might need to select the execution context in the developer tools while executing document.getElementById. See section "Selecting Execution Context" in this article: developers.google.com/web/tools/chrome-devtools/console
• Nisarg Shah: @TPRammus IIRC, when there is an iframe of the same domain on the page, the scripts of extension run once for each execution context. So in one of the execution context it might be failing, but in the other one it might be working. Can you check that? Frankly, I haven't worked with extensions as much to remember the exact details.
• Nisarg Shah: @TPRammus It would be great if you can post an answer explaining the issue and the solution, in case someone else stumbles on a similar issue.

Answer 1

Thanks to Nisarg Shah, I was able to resolve my issue. Thank you very much for your help!

The issue was that the element I was trying to access was inside an iframe. Also thank you RaYell for providing the necessary code, with which I was able to resolve my problem:

window.frames['mainframe'].document.getElementById('example')

• TPRammus: @nimeresam Well... maybe you do not have window.frames['mainframe']?

Answer 2

I think it's because the document itself won't be loaded yet.

I fixed it by using window.onload instead of document.body.onload, like:

window.addEventListener("load", ev => {
 // it should work
 document.getElementById("ipcam_wrapper")
});