Access DOM element on a page in vue chrome extension - javascript

I'm working on a chrome extension that will inject a content script only on a certain pages.
I'm using vue.js and I want to access some DOM elements of the pages, how I can achieve this?
Normally in jQuery I will have $('.selector') to access a dom element, but in this case I can't assign refs or any other id to the DOM elements I want to access. will getElementById work or there is another way?

Related

Hot to get element and properties by js at flutter web app

I'm creating Chrome extension and I need to get any elements from page which created on flutter. I see at the devtool one canvas element as a whole page. So I can't use document.querySelector() as usual.
How can I get element from page and get properties of that element by js at my own script?

Cannot select element on DWR 921 Router management page

I'm trying to use Selenium in Python to send sms using my Dlink DWR-921 router. But I can't select any element on the document. I tried td, table, body but none of them works. I also tried on browser javascript for the above elements as well. Using document.getElementsByTagName(), but I get empty HTMLCollection. May I know why the element in the page is not selectable?
Update: To ensure the dom last been properly and fully loaded. I took a screenshot and confirmed that the DOM has been loaded everytime it run.
Router model: DLink DWR-921
SW Version: V01.01.3.016
Try to look for an input tag.
Also, it may be that the elements are inside an Iframe. Selenium doesn't "know" how to locate elements inside iframes, so you need to tell me to go into the iframe:
driver.switchTo().frame("firstframe");
or
driver.switchTo().frame(0);

How to access browser's DocumentFragment nodes?

For the page chrome://history, in Developer Tools, the DOM Elements tree shows nodes of type DocumentFragment like the following #shadow-root (open) which you can see selected in the screenshot below:
My question is how to use querySelector or another Javascript method to select such nodes ?
Unlike what another answer in this site suggested, DocumentFragment.querySelector doesn't exist.
As explained on developer.mozilla.org,
The ShadowRoot interface of the Shadow DOM API is the root node of a DOM subtree that is rendered separately from a document's main DOM tree.
You can retrieve a reference to an element's shadow root using its Element.shadowRoot property, provided it was created using Element.attachShadow() with the mode option set to open.
In your case, it looks like you need to do
var shroot = document.getElementById('history-app').shadowRoot
.getElementById('history').shadowRoot;
As you can see, we (apparently) have to browse down the DOM step-by-step. I.e. trying for example to access the 'history' element directly won't work since it is itself inside a shadowRoot.

How to properly remove a polymer element from a web page

I'm having some issues with the removal of a polymer element from my web page.
I've build a carousel via an unordered list which list items contain content. Some of this content is simple HTML, some are images, some are videos and some are polymer elements.
Every now and then, the <ul> gets cleared via a jQuery .empty() command.
The issue I'm facing is that the polymer elements don't appear to be cleared correctly.
Inside the polymer elements are timeout events that retrieve content(xml and images) every now and then. When investigating the network load in the chrome developer tools AFTER the polymer element has been removed from the page, you can still see the xml and images being loaded every now and then. So aparantly, a part of the polymer element is still active, most likely somewhere in the shadow-dom.
How do I properly remove an embedded polymer element and everything associated with it from my webpage?
I think setTimeout is not defined within the scope of your element but in global scope.
So you must use clearTimeout function in lifecycle detach function in your element to cancel existing timeouts.

Impossible to get CKEDITOR instances in an iframe

Let's say I have a page with an iframe and within the iframe I have some ckeditor inline instances that I want to manage from the containing page.
From the parent, if I run
console.log(document.getElementById("iframe_id").contentWindow.CKEDITOR);
I have the CKEDITOR object, but don't know why, if I run
console.log(document.getElementById("iframe_id").contentWindow.CKEDITOR.instances);
i get an "undefined" result.
Any idea?
POST EDIT: if I run the last console.log directly in the inspector I get all the instances as normal, the problem seems to exist only in the parent page js.

Categories