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?

Highlight elements by tag name using javascript/jquery for chrome extension

I am trying to highlight all superscripts by getting their tag names in jquery.
It works, but it highlights both subscripts and superscripts, when i want to highlight only superscripts. I used for loop to run through ‘sup’ elements throughout the webpage. please Help: My code below.

Popup.html

  
      String(s) to search for: 

Split the strings using:

color.js

jQuery.fn.highlight = function(pat, fbgcolor) {
   function innerHighlight(node, pat, fbgcolor) {
  var skip = 0;
  if (node.nodeType == 3) {


    //var spp = spannodex;
   var pos = node.data.toUpperCase().indexOf(pat);
    if (pos >= 0) {
    //var spannode = document.getElementsByTagName('sup');

   // var appp = document.createElement('span');
        var getTags = document.getElementsByTagName('sup');

      for(i=0; i < getTags.length; i++){
         //getTags[i].innerHTML = i++;
         var spannode = document.createElement('span');
    }

      fbgcolor += ";padding: 0px; margin: 0px;";
      spannode.setAttribute('style', fbgcolor);
      var middlebit = node.splitText(pos);
      var endbit = middlebit.splitText(pat.length);
      var middleclone = middlebit.cloneNode(true);
      spannode.appendChild(middleclone);
      middlebit.parentNode.replaceChild(spannode, middlebit);
      skip = 1;

   }
  }
      else if (node.nodeType == 1 && node.childNodes && !/(script|style)/i.test(node.tagName)) {
       for (var i = 0; i < node.childNodes.length; ++i) {
        i += innerHighlight(node.childNodes[i], pat, fbgcolor);
       }
        }
          return skip;
         }
         return this.each(function() {
          innerHighlight(this, pat.toUpperCase(), fbgcolor);
         });
        };

        jQuery.fn.removeHighlight = function() {
         return this.find("span.highlight").each(function() {
          this.parentNode.firstChild.nodeName;
          var txtNode = document.createTextNode(this.textContent);
          with (this.parentNode) {
           replaceChild(txtNode, this);
           normalize();
          }
 }).end();

};

How to get only Visible Elements using document.getElementsByTag and document.queryselectAll

I am trying to create a chrome extension that will search for any elements from the web-page.

Currently i am using,
var elm = document.getElementsByTagName(“input”);

This gives me all the elements with tag input.

But sometimes the element is not visible in the screen but present in the source code, for that if i want to filter i try to use the offsetwidth , left, right , height properties

elm.offsetWidth but it always gives 0 so i am not able to filter out.

Also those elements don’t have any visibility attributes which i can use.

Is there any other way i can do it using Javascript ?