Detecting UI Elements of Browser Extension using JavaScript

Question

In the Google Chrome browser, I have installed the 'Roboform' extension. This extension creates some UI elements as shown in the below screenshot. See the popup (Localhost) near login username input.

Question: Is there a way to detect 'Roboform' created UI elements with JavaScript?

What I have tried

• I tried to use dev tools to inspect the popup element. But I could not see/inspect.
• I also tried to detect the extension using other methods. But could not get it to work.

Answer 1

Steps

1. Ctrl+Shift+I Or RightClick->Inspect to open dev tools
2. Ctrl+Shift+C Or Click on the Selection Tool

3. Select the UI component you want with the selection tool.
4. You can see it is under a closed #shadow-root 'div.overlay-content-mini'

If you want to know more about Shadow DOM, read the following article.

What the Heck is Shadow DOM?

Note: Closed shadow roots are not very useful. Some developers will see closed mode as an artificial security feature. Read more here.