1

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

TPRammus
  • 491
  • 1
  • 6
  • 19
  • 1
    Do you have any iframe on the page? Also, can you create a [mcve]? – Nisarg Shah Aug 23 '18 at 13:09
  • Try `window.onload` I don't make extensions but I always use this event for my js and never had an issue. – Chris Rollins Aug 23 '18 at 13:09
  • @ChrisRollins window.onload also works. (my document.body.onload also works, I just wanted to give some context) – TPRammus Aug 23 '18 at 13:13
  • You don't need the onload if you run your script at the bottom of the body tag. Try changing the ID for a class and use document.querySelector, maybe that helps. Also check if your HTML document is valid, maybe you're missing an ending tag or something. – Vidar Aug 23 '18 at 13:14
  • @Vidar Well I dont create a website, I create an extension that fires up a css and javascript (at least thats what I think how it works) in which I can put whatever I want to change the looks or some functionality of the site. So I dont have a html file with a body tag. – TPRammus Aug 23 '18 at 13:16
  • @NisargShah Well I acutally just noticed that I can rightclick the page and click "view frame source", so does that mean there is an iframe? The frame source looks like this: https://i.imgur.com/Whr86c8.png – TPRammus Aug 23 '18 at 13:22
  • 1
    @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 Aug 23 '18 at 13:24
  • @NisargShah Oh well the screenshot I provided you with IS actually the page source. And the frame source is a bit longer, but does not include the text "iframe" at some position. – TPRammus Aug 23 '18 at 13:28
  • 1
    @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: https://developers.google.com/web/tools/chrome-devtools/console/ – Nisarg Shah Aug 23 '18 at 13:31
  • @NisargShah Thank you very much! But how do I access elements by id from an iframe in my extension. Do I just do something like document.getElementsByName('mainframe')[0].getElementById('example') or what? (The frame does not have an id, just a name as you can see on the screenshot) – TPRammus Aug 23 '18 at 13:45
  • 1
    @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 Aug 23 '18 at 13:48
  • @NisargShah Thank you very much, I can access the elements now by doing `window.frames['mainframe'].document.getElementById('example')` [link](https://stackoverflow.com/questions/1451208/access-iframe-elements-in-javascript#answer-1451455). – TPRammus Aug 24 '18 at 11:26
  • 1
    @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. – Nisarg Shah Aug 24 '18 at 11:30
  • @NisargShah Well I thought you would want to answer the question since you resolved my issue and deserve the credit for it. – TPRammus Aug 24 '18 at 11:49

2 Answers2

3

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
  • 491
  • 1
  • 6
  • 19
3

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")
});
Nimer Awad
  • 3,967
  • 3
  • 17
  • 31