How would one reference document in a chrome background js script?

Question

I've been trying to make an extension with chrome, but it seems like when I try to run this simple code:

function reddenPage() {
  var bar = document.getElementsByClassName('nav rbx-navbar hidden-xs hidden-sm col-md-5 col-lg-4');
  //console.log(bar[0].appendChild(bar[0].childNodes[2].cloneNode(true)));
  if(bar[0]==null){
    return false;
  }else{
    return true;
  }
}

It returns :

Any help would be lovely, thank you so much!

@vanowm Sorry, what do you imply by that? I don't fully understand that question — Ge1p, Jun 16 '21 at 11:38
create a manifest.json https://developer.chrome.com/docs/extensions/mv3/manifest/ — cfarhad, Jun 16 '21 at 11:40
Try adding a listener example: `window.addEventListener('DOMContentLoaded'` — snd, Jun 16 '21 at 11:41
content document = a webpage @Sega, background script don't have `document`, since it's not part of the DOM... — vanowm, Jun 16 '21 at 11:42
@CassioTDS try this to see `window.addEventListener('DOMContentLoaded', function() { window.document.getElementsByClassName('nav rbx-navbar hidden-xs hidden-sm col-md-5 col-lg-4') });` or simply `window.document.getElementsByClassName('nav rbx-navbar hidden-xs hidden-sm col-md-5 col-lg-4')`. But I am not sure it that you are looking for. — snd, Jun 16 '21 at 12:02
@sega, so what you are saying, that `document` will magically become available if we wait long enough? background scripts don't have access to the `document`. That's why background scripts defined as .js file in manifest.json, and not as .html like options page or content script. There is no DOM for background scripts. — vanowm, Jun 16 '21 at 12:11
@vanow I understood well but it costs nothing by testing I think. — snd, Jun 16 '21 at 12:14
@Sega When doing so, I get a background error (Service worker registration failed), any more help? — Ge1p, Jun 16 '21 at 12:33

score 0 · Answer 1 · edited Jul 11 '21 at 09:30

As I understand You should do with :

document.querySelectorAll()

Example :

var x = document.querySelectorAll("h1, div");

You can't use .getElementByClassName() because getElementByClassName() only applies to single elements.

Different from querySelectorAll() which is flexible to select all variants of elements.

You will always find undefined if you use getElementsByClassName() for your case.

Example getElementsByClassName():

HTML:

<button class="btn btn-lg" onclick="reddenPage()">Click me</button>
<div class="same"></div>
<div class="same"></div>
<div class="same"></div>

Javascript:

function reddenPage(){
    var x = document.getElementsByClassName('same');
    console.log(x[0]);
    if(x[0]==null){
        alert("element found "+x.length);
    }else{
        alert("element found "+x.length);
    }
}

Example queryselectorAll():

<button class="btn btn-lg" onclick="reddenPage_()">Click me</button>
<div class="diffrent-1"></div>
<div class="diffrent-2"></div>
<div class="diffrent-3"></div>
<div class="diffrent-4"></div>

Javascript: function reddenPage_(){ var x = document.querySelectorAll('.diffrent-1, .diffrent-2, .diffrent-3, .diffrent-4'); console.log(x[0]); if(x[0]==null){ alert("element found "+x.length); }else{ alert("element found "+x.length); } }

Example getElementsByClassName() will return undefined:

function reddenPage_(){
    var x = document.getElementsByClassName('diffrent-1 diffrent-2 diffrent-3 diffrent-4');
    console.log(x[0]);
    if(x[0]==null){
        alert("element found "+x.length);
    }else{
        alert("element found "+x.length);
    }
}

//Response undefined

Did you read the error message? `document` is undefined. – vanowm Jun 16 '21 at 12:06 — vanowm, Jun 16 '21 at 12:06

How would one reference document in a chrome background js script?

1 Answers1