How can my content script access element from an HTML web accessible resource page?

Question

I'm working on a chrome extension, where I have an iframe pop up when user is on a certain website. I have the iframe html document saved as a web accessible resource, and I'm trying to figure out how I can access and manipulate an element in that iframe document from the content script. Basically I want to be able to update information on the iframe popup based on the web page the user is on. Is there a way to somehow access it directly from the content script? Or can I have a separate js file manipulating information on the html page? Looking for any ideas/guidance anyone can offer. Thanks!

Edit: This is what I'm trying, I can't figure out where it's going wrong.

iframe.html

<html>
    <head>
        <title>My extension</title>
        <script src = "iframe.js"></script>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
    </head>
    <body style="background-color:#FFFFFF">
        <div>
            <h4 id = "testHeader">Trying to get some text here!</h4>
        </div>
    </body>
</html>

iframe.js

var testHeaderElement = document.getElementById("testHeader");
console.log(testHeaderElement.innerText);

In iframe.js, it's telling me that it can't log testHeaderElement.innerText because it's null. Why isn't it finding the element?

It can't and you don't need it to probably because the iframe can load its own scripts using the standard `` tags and these scripts will run inside the iframe and they will access its DOM directly. To communicate between the content script and the iframe you can use extension messaging or DOM messaging via postMessage. — wOxxOm, Jul 20 '20 at 19:07
@wOxxOm Thanks, that's what I was attempting to do, but it's not working for me. More info in the question. Am I missing some sort of connection between the two files? I can't figure out why it's returning null. — MRB, Jul 21 '20 at 19:54
@wOxxOm Edit: Actually, I just figured it out! I need to wrap it in a window.onload function so that the script loads with the window. Thanks, though! — MRB, Jul 21 '20 at 20:05

How can my content script access element from an HTML web accessible resource page?

0 Answers0