I can't get my firefox browser extension to work - specifically getting the javascript file to execute on page load

Question

The extension basically just changes a sports league table on a website so that the bottom two teams are removed as they have folded, and then updates all the other teams stats in the table to make it as though the folded teams never existed (giving every team 4 fewer wins, 12 fewer points, and so on). I found out that I can make the javascript file execute when a specific page loads by including the "content_scripts" section in my manifest.json file. I did that, and here is my manifest file:

{
  "manifest_version": 2,
  "name": "ProLeague.de Table Fixer",
  "version": "0.1",
  "author": "John Yuki",
  "description": "Removes folded teams from league tables and updates the table accordingly to make it appear as if the folded teams never existed in the table.",
  
  "content_scripts": [
    {
      "matches": ["https://www.proleague.de/league.php?league=int2#table"],
      "js": ["proleague-table-fixer.js"]
    }
  ]
}

Here is my javascript file:

/** 
For INT2 League - Removes bottom two teams - AFC Crusaders, and Ukraine.
**/

if(document.URL == "https://www.proleague.de/league.php?league=int2#table"){
    
    // Removes bottom two teams
    document.getElementsByClassName("sorting_1")[15].parentElement.remove();
    document.getElementsByClassName("sorting_1")[14].parentElement.remove();

    for (let i = 0, len = document.getElementById("leaguetable").children[1].children.length, text = ""; i < len; i++) {
      // For every remaining team in the table, do the following...

      // Updates Games Played
      document.getElementById("leaguetable").children[1].children[i].children[4].innerText -= 4;
      // Updates Wins
      document.getElementById("leaguetable").children[1].children[i].children[5].innerText -= 4;
      // Updates Goals Scored
      var goals = document.getElementById("leaguetable").children[1].children[i].children[8].innerText.split(":");
      goals[0] -= 8;
      document.getElementById("leaguetable").children[1].children[i].children[8].innerText = goals[0] + ":" + goals[1];
      // Updates GD
      document.getElementById("leaguetable").children[1].children[i].children[9].innerText -= 8;
      // Updates Points
      document.getElementById("leaguetable").children[1].children[i].children[10].innerText -= 12;
    
    }
    
}

The javascript code works completely fine when I run it from the firefox console, but when part of the extension (after installing it as a temporary extension), the javascript code doesn't execute on the specified page as I hoped it would.

What am I doing wrong/missing?

Answer 1

The reason is that you are including the bookmark in the matches part of the content_scripts in manifest.json .

Here's the relevant documentation: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Match_patterns#path

Specifically

All match patterns are specified as strings. Apart from the special <all_urls> pattern, match patterns consist of three parts: scheme, host, and path [...]

The value for the path matches against the string which is the URL path plus the URL query string [...]

Neither the URL fragment identifier, nor the # which precedes it, are considered as part of the path.

You can fix it by simply removing '#table'

"matches": ["https://www.proleague.de/league.php?league=int2"]