I'm currently working on a mozilla extension @ Firefox 98.0 (64-bit), and I'm having a hard time understanding some of the aspects of a mozilla extension.

My code is quite simple, I'm trying to apply an eventlistener to a targeted element and apply some properties, however things don't work as intended as they often don't here on SO.

When I work on my own created web pages the code runs smoothly, but I get problems(!) when trying to apply the extension to a mozilla domain.

Here is an example of the code I am running at https://www.mozilla.org/

document.getElementsByClassName("mzp-l-content")[0].addEventListener("click", ()=>{
console.log("The bowling alley")})

Running this code from my script.js don't work. Running the code from inside of the websites does however work just as per my request.

document.addEventListener("click", applyGoodAttributes);
function applyGoodAttributes(e) {
  let x = event.clientX;
  let y = event.clientY;
  let selectedElement = document.elementFromPoint(x, y);
  if (awesomeCondition) {
    console.log("My logic is intouchable")
    selectedElement.setAttribute("hidden", "");
  }
}

Same here, when I run the code from the console of the browser everything is working as expected. Problems arise when I try to run my script though.

My question is as follows; why can't the script seemingly access the document?

My manifest.js is the following:

"manifest_version": 2,
  "name": "Best extension EU",
  "version": "1.2",

  "description": "Uber duber script that does amazing things to your web browser [€.",

  "icons": {
    "48": "icons/border-48.png"
  },

  "content_scripts": [
    {
      "matches": ["*://*.mozilla.org/*"],
      "js": ["superSeriousScript.js"]
    }
  ],

  "browser_specific_settings": {
    "gecko": {
      "id": "legallybinding@sneakers.com"
    }
  }
  
}