How to access the DOM of an extension from web page

[David Choi]

Hello I would like to handle DOM events or trigger clicks in a Chrome extension from the Javascript of my web page. My web page uses a crypto wallet extension, but their api does not give access to events.

I found this link which indicates it's possible but no sample is given. https://stackoverflow.com/questions/17666650/are-dom-events-triggered-from-a-chrome-extension-propagated-in-the-main-page-s-c

[David Choi]

I did try this but it did not work.

async setupDomListeners() {

    for (const div of document.querySelectorAll("div")) {

        if (div.textContent === "Sign out") {

            document.addEventListener("click", (e) => {

                console.log("Sign out button click event set!", e);

            });

        }

    }

}

[Stefan Van Damme]

Hi David,

If you want to send a click event on that button, here is how to do it:

document.getElementById("mybutton").click();

If your script is a content script, you would better add a MutationObserver to check if that button has been added/changed. And then run this click event.

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver#example

Thanks,

Stefan vd

[David Choi]

Thank you for your help. I'm sorry but I'm totally new to chrome extensions. When I call my code, document.querySelectorAll, it is from the web page. But this does not find the element within the chrome extension (the element in the chrome extension has a div tag with text content "Sign out". If I inspect that element in the extension its like this:

<div class="item-1SymL2drj4cNQ8YFByagSV">Sign out</div>

How can I get this tag and cause click on it? As well as just general interaction with events and elements on that extension? Thank you

[David Choi]

I am now trying to use the chrome object but when I call it it is missing runtime and extension members. Is there an event I need to wait on for chrome object to load?

[David Choi]

There might be some confusion. I am not using a content script. I have a standard web page, from which I would like to access the DOM of the chrome extension. So far I am not able to do so when using document.getQuerySelectorAll.

On Wednesday, January 4, 2023 at 2:04:13 PM UTC-5 stefa...@gmail.com wrote:

[Stefan Van Damme]

Hi David,

Where is the JavaScript code located? On the background? Or as the "popup.html" page, with the script link? Within your Chrome extension, you can properly run the vanilla JavaScript code on your options.html, popup.html page.
Note: In the Chrome extension Manifest V3, the background script is no longer a regular page, but a service worker. And can not access its DOM.

https://developer.chrome.com/docs/extensions/mv3/migrating_to_service_workers/#:~:text=Second%2C%20service%20workers%20don%27t%20have%20access%20to%20DOM

Thanks,

Stefan vd

[David Choi]

The javascript is on the background web page, not the extension. I do not have access to the extension. I am trying to access the extension's DOM from my web page, but I do not have access to the extension's source code.

[Stefan Van Damme]

Hi David,

A web page cannot access the background page of the Chrome extension.

If you own that Chrome extension, you can communicate your website with the Chrome extension using a "content_script".

https://developer.chrome.com/docs/extensions/mv3/content_scripts/

See Chrome extension architecture:

https://developer.chrome.com/docs/extensions/mv3/architecture-overview/#contentScripts

Thanks,

Stefan vd

[David Choi]

Sorry dumb question. When you say background page you mean the Html UI of the extension right?

Is there anything a web page can do to know what things are happening on an enabled extension. The extension in question is a crypto wallet that gets connected to the web page (in other words allows the web page to make requests to the wallet)

[wOxxOm]

No, the "background page" is a specific term in the extensions architecture for the special background context, which is entirely unrelated to your question. The answer is still the same: web pages can't access any pages of extensions by design.

[David Choi]

I see thank you.

I'm just thinking out loud here, but what if I had an extension of my own. Can that extension access the 3rd party extension's DOM?

[wOxxOm]

Possible but only under specific conditions: either your extension must be a panel in devtools and devtools must be opened on a page that belongs to another extension or it must use chrome.debugger API which shows a global warning while being used.