Issue while accessing nested elements jquery

Below is the document structure, I want to assign a value to the Input type text = id_5

I have code

var a =   $("#pl_main").contents().find("frame[name=pl_app]")[0];
console.log(a);

It is returning the inside document of the frame, working kool…

But I am not able to go ahead as

a.find("#frm_81")

is not working anymore, Any suggestion and guidance should be appreciable, Don’t downvote if not clear ask me a question via comment please


List unattached document elements

I’m trying to create an extension for Chrome to control playback using global hotkeys. I’ve faced such problem: somewhere the elements are not attached to DOM. These elements are audible, but I can’t get them with document.querySelector('audio') (because it iterates over attached DOM elements only).

Using DevTools I can see these elements:

> queryObjects(HTMLAudioElement)
< undefined
  (3) [audio, audio, audio]

But it's impossible to use this function outside DevTools (it doesn't even return result - this func just prints result to the console).

I'm looking a way to get unattached audio elements from the content_script (or background) of my extension.

I've tried:

  1. document.getElementsByTagName('audio')
  2. document.querySelectorAll('audio')
  3. document.evaluate('//audio', ...
  4. document.createNodeIterator(document.body, NodeFilter.SHOW_ALL, ...
  5. redefine constructor of HTMLAudioElement and document.createElement (failed: extension has its own window and linked document)
  6. listen 'play' and 'pause' events - they don't bubble

Have any other ideas? Maybe there are some extension-specific capabilities?

Can’t remove element children from DOM using content script/Elements reappear

This is my first attempt at making a chrome extension.
I’m making one for an admission site where I, for starters, want to remove a FAQ window but I don’t understand why doesn’t work.

Here’s what I tried:

  1. Setting an interval to see if I try to remove it before it loads,
  2. Tried different children in the hierarchy,
  3. Getting elements by class and by and querySelector,
  4. Used ‘single’ quotes and double ones,
  5. Tried removing with element.innerHTML = ” and by removeChild(),

I’ve noticed that the console is printing out the element collection but that’s it. One important note is that only reappears AFTER the last alert,
alert(“Elements should be removed.”);

What I’m I missing?
(background.js is an empty file.)


manifest.json


{  
    "name":"Antagning+",
    "version":"0.1",
    "description":"None.",
    "permissions":["storage"],
    "background":{
        "scripts":["background.js"],
        "persistent":false
    },
    "page_action":{  
        "default_popup":"popup.html",
        "default_icon":{  
            "16":"images/antagning.png",
            "32":"images/antagning.png",
            "48":"images/antagning.png",
            "128":"images/antagning.png"
        }
    },
    "content_scripts":[  
        {  
            "run_at":  "document_end",
            "matches": ["https://www.antagning.se/se/search*"],
            "js":      ["jquery-2.2.4.min.js", "content.js"]
        }
    ],
    "icons":{  
        "16":"images/antagning.png",
        "32":"images/antagning.png",
        "48":"images/antagning.png",
        "128":"images/antagning.png"
    },
    "manifest_version":2
}

content.js


(function() {

    alert("Romved 1");
    var div = document.getElementsByClassName("faq hide_small");
    console.log(div);
    if(document.getElementsByClassName("faq hide_small")) {
        alert('element exists!');
    }
    setInterval(function(){ 
        while (div.firstChild) {
            div.removeChild(div.firstChild);
        }
        alert("Removed!");
    }, 3000);
    alert("Elements should be removed.");
})();

Chrome Extension for loop when next page is loaded

I am having an issue with my chrome extension for loop. Currently, it is used to submit a form multiple times (this happens in content2.js, which utilizes the i value (via “iter”) and it is returning the i value in the console.log).

I have tried to troubleshoot and what seems to be happening is that it is breaking out of the for loop immediately. Any assistance is welcome. Thanks guys.

for(var i = 0; i

JavaScript Can’t Find Elements In DOM

I am trying to programmatically select elements from the DOM, but running into difficulty when these elements don’t get found by the JavaScript: document.getElementsByClassName('example');.

When I go and inspect those elements, they indeed have class example. After I come back from inspecting them in Chrome developer tools, I am able to use the same Javascript as before to select them. It makes no sense.

After waiting 3+ seconds for the page to completely load, I can go into the Chrome Dev console and type:

document.getElementsByClassName("example");
HTMLCollection []
*** GOES IN DEV TOOLS AND INSPECTS THIS ELEMENT ***
document.getElementsByClassName("example");
HTMLCollection [div.example.row]

In this particular case, I am using the Quovo UI Library. I suspect that Quovo might be doing something fancy to prevent javascript from viewing people’s bank account information just through inspecting the DOM. Even if this is the case, I don’t understand why inspecting elements in dev tools would make the elements select-able.

HERE IS A DEMO: https://youtu.be/lPcIYupa2kY.

Thanks for your help!

Elements Not Selectable Until Inspected in Dev Tools

Fascinating situation.

I am trying to select elements by class name, just by typing in the Chrome Dev Tools console. I can see the elements that I want to select and they are visible on the page. I wait 3+ seconds for the page to load before I go directly to the Dev Console and type:

document.getElementsByClassName("example");
>> HTMLCollection []

Then, I right click on the element in question and hit “Inspect”. I then return to the console and type:

document.getElementsByClassName("example");
>> HTMLCollection [div.example.row]

So now the elements are there! But I did nothing in Dev Tools when inspecting the elements other than hover over them. Can someone help explain this mystery? Thanks so much.

If it’s any explanation, I am using Quovo. Here is a demo: https://youtu.be/lPcIYupa2kY.

Prominent Ways to tell webpage completely loaded

I have gone through several article to identify when a complete webpage is loaded..

  • readystatechange
  • DOMContentLoaded
  • window.onload

and I am using all the above to detect which once will be beneficial for me…but by going through some webpages(stackoverflow), I noticed that these all events are getting called and after that some nodes are getting added as well as attributes getting added to the webpage came to know by adding mutation Observer…so is there any other method i can use to detect the complete page is ready(with HTML+CSS+Nodes+attributes).

enter image description here

Thanks in advance..

Electron: DevTools makes application FASTER?

I have electron app i’m developping; I face a strange behaviour which I would like to benifit.

I have a div element thats with overflow:auto, and, inside it, I have a lot of elements. When scrolling with mouse and trackpad, it is kinda choppy, but with the scrollbar it’s not.

But as I’m developping it, I noticed that if I open my DevTools once, the app gets smoother, even after it get closed. So my conclusion is: Opening developper tools makes electron faster.

But my app is not going to be in Développement forever. What does opening dev tools triggers that could be triggered by my app?

create a dump of DOM using chrome extension

trying to figure out how to dump the complete dom into the local storage,i have found some methods but they involve manual tasks like copying the html code from the elements tab and dumping it into new file.I want to do this task using content scipts,as content scripts only have access to dom elements.

Thanks in advance…

How to find text-boxes from a Chrome extension

I’m making a Chrome extension and I need it to find any form text-boxes on the webpage.

I first tried doing it in my content script like:

document.getElementsByTag("text");

But it always returns undefined so I’m assuming it’s searching only my_app.html.

My first question is what function should I use: GetElmentsByTag, by name, by className, or with some other function?

My second question is which JavaScript file do I need to search? Other forums with similar problems said you need to access the DOM in another file like background or popup and then send it to the content script with a message and a listener.