Detecting UI Elements of Browser Extension using JavaScript - javascript

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.

Steps
Ctrl+Shift+I Or RightClick->Inspect to open dev tools
Ctrl+Shift+C Or Click on the Selection Tool
Select the UI component you want with the selection tool.
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.

Related

Access rendering settings in DevTools programmatically from a Chrome extension

here is my problem :
What I want :
I'm wondering if it's possible to have access (to change them) to renderings settings from an extension in Chrome. I know some APIs exist like DevTools API but I cannot find a way to change any of these rendering settings from my extension.
Rendering tab in DevTools
What I want more specifically :
I made a Chrome extension and I want it to make a specific tab think it's focused, even if it's not.
I know I can do it manually by opening Chrome DevTools panel and enabling "Emulate a focused page" but I really want my extension to do it programmatically.
Why I want to do this :
Some websites don't behave the same when the page is not focused, so I want my extension to make their behavior consistent.
Do you think it is possible ? Thx :)
I've been searching online for a week now and I really can't find any solution to my problem...

Does Microsoft Edge Developer tool allow for integration of external programs/code

This msedge-devtools image shows clearly what I'm trying to say. I'm looking to develop a webpage parser (in a way past JavaScript) through selenium and Microsoft Edge. I'm looking for a way therefore to use the Microsoft Edge developer tool (Inspect Element Mode) such that I can simply right click an element in the DevTool and select a custom option which calls for my program to obtain the data in that particular element. My question here is, can one add an option in the options list shown when you right click on an element in the Element Inspection Mode of the msedge DevTools.
I'm not sure I fully understand what all you are trying to do because you mention at least three things
Adding an option to the right-click list in the dev tools
If you want to do this, you are probably talking about creating an add-in for Edge, which is unrelated to Selenium. Selenium drives the browser but doesn't interact with the UI of the browser.
Developing a webpage parser using Selenium and Edge
You don't need Selenium or Edge to create a webpage browser. You can talk directly to the webserver and get the HTML of the page and do anything you want with it.
Click an element and "obtain the data in that particular element"
It depends on what you mean by "obtain the data in that particular element". The existing functionality returns pretty much everything about that element. Have you looked carefully at what features are already available? I would start there because I'm assuming that whatever you want, it can already get you.

Is it possible to fully mimic clipboard functionality using the chrome extension APIs?

Subject:
I'm in the process of creating a chrome extension and, for certain features, I would like to copy some text to the clipboard and automatically paste it into whatever element has the focus for the user.
Getting my text into the clipboard is no problem. I can simply create a textarea in my background page, set its value accordingly and then select it's contents. Then, I can use document.execCommand("copy");
Problem:
The problem comes when I try to use document.execCommand('paste') in my content script. It works fine on simple text areas (like the one I'm typing in now). However, on many sites, it tends not to work. This typically happens when the editable element is inside an Iframe, or is actually a custom <div> rather than a vanilla <textarea>/<input>
Even though my trivial attempt fails to work in these cases, the built-in paste option that is provided by Google, works every time without fail.
Is it possible for a chrome extension to mimic this functionality in a customized context menu option? If so, how can this functionality be achieved?
Additional Info:
This operation is invoked when a context menu option is clicked. Said context menu option is only visible when the element currently in focus is categorized as editable by the chrome.contextMenus API
Similar Questions:
None of these provided me with a satisfactory answer
the proper use of execcommand("paste") in a chrome extension
clipBoard using chrome api execCommand

Is it possible to inject HTML into a website to force-enable scrolling?

Okay, so this is a bit of an odd question. Facebook is trying to remove the feature that hides your profile from search, but requires you hit an accept button before they can remove it. I like my privacy, so instead I just used ABP to hide the dialog box and give me back access to the page. The problem is that scrolling has been disabled, so while I can interact with the content that's currently visible, I can't scroll down. Is there a way to inject HTML or JS that would force-enable scrolling?
Seems as a job for greasemonkey
https://addons.mozilla.org/sv-se/firefox/addon/greasemonkey/
There are similar plugins for other browsers, Chrome have support for users scripts by default but there is a great addon there as well
https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo
Internet Explorer can also offer this by adding Trixie
http://trixie.softpedia.com/
If you don't need it all the time and don't want to go to the effort of making a script you could just edit the html directly using either the developer tools built in to most browsers and inspecting the element.
Just right click what you want to change and select inspect element.
Adam

How can i find all iframe on the webpage?

I want to know that is there any add-on available in firefox to find all iframe available on webpage.?
I want to use it for selenium webdriver automation to switch into iframe.
Google Chrome
Use Chrome Developer debugging Tool to find all the available iFrames in the web page.
Open chrome web Browser
Press F12 key
Press Esc key
In console, you will see a filter icon followed by the dropdown top frame
Click on the dropdown to see the iFrames availability.
Thank you for your valuable reply
finally i find answer of my problem.
Web Developer extension is addon for firefox. which have one option "Outline Frames" which highlight all iframes on the webpage
once we found iframes on the page we can get its name/ id / xpath/ css whatever we need in selenium automation using firebug.
thank you :)

Categories

Resources