为什么我的扩展程序在 Mozilla Firefox 上运行而不是在 Google Chrome 上运行？

Question

So I developed this pretty small extension for one particular website.

The goal of the whole addon, was to change styling of it (it looks like it was from 1990s by default). At first I wrote a Greasemonkey script, and it was working great, but later, when my friends wanted to use it as well I decided to make it into a browser addon, to make it flawless.

So the transition from GreaseMonkey script to Mozilla Firefox addon wasn't hard at all. Everything works, just like a GreaseMonkey script. But when I tried to change it into Chrome extension - no results. As if the extension wasn't there.

I don't think I was using any code, that was "Firefox" friendly, as GreaseMonkey code worked both on Mozilla and Chrome.

---

Contents of my manifest.json :

{
  "manifest_version": 2,
  "name": "XXXXXXXXXX",
  "short_name": "XXXXX",
  "author": "XXXXXXXXX",
  "version": "1.0.1",

  "description": "Changes stylistically Shinden.pl website.",

  "icons": {
    "48": "icons/48.png",
    "96": "icons/96.png"
  },

  "content_scripts": [
    {
      "matches": ["*://shinden.pl/*"],
      "exclude_matches": ["*://shinden.pl/animelist/*"],
      "run_at": "document_start",
      "css": ["resources/static.css"]
    },

    {
      "matches": ["*://shinden.pl/*"],
      "exclude_matches": ["*://shinden.pl/animelist/*"],
      "js": ["contentScripts/documentStart.js"],
      "run_at": "document_start"
    },

    {
      "matches": ["*://shinden.pl/*", "file:///C:/Users/Wojciech/Desktop/index.html"],
      "exclude_matches": ["*://shinden.pl/animelist/*"],
      "js": ["contentScripts/documentEnd.js"],
      "run_at": "document_end"
    },

    {
      "matches": ["*://shinden.pl/*"],
      "exclude_matches": ["*://shinden.pl/animelist/*"],
      "js": ["contentScripts/documentIdle.js"],
      "run_at": "document_idle"
    }
  ]


}

As you can see - addon firstly adds a .css file into the browser, to change static parts of it. Then I have 3 scripts (for now documentStart.js and documentIdle.js are empty), which are loaded at 3 different times.

So here's my documentEnd.js : (sorry, but I've been using some native language variable names)

var bialy         = "#e7ecef";
var niebieski_100 = "#274c77";
var niebieski_50  = "#6096ba";
var niebieski_25  = "#a3cef1";
var szary_25      = "#4d5057";
var szary_100     = "#272727";

////////////////////////////////////////////////////////////////////////////////////////////////////

var dokument = document.documentElement;
dokument.style.setProperty('--bialy', bialy);
dokument.style.setProperty('--niebieski_100', niebieski_100);
dokument.style.setProperty('--niebieski_50', niebieski_50);
dokument.style.setProperty('--niebieski_25', niebieski_25);
dokument.style.setProperty('--szary_25', szary_25);
dokument.style.setProperty('--szary_100', szary_100);

function hexToRGBA(hex, alpha) {
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    if (alpha) {
        return "rgba(" + r + ", " + g + ", " + b + ", " + alpha + ")";
    }
    else {
        return "rgb(" + r + ", " + g + ", " + b + ", 1)";
    }
}

function fadeHex(hex, brightness){
    var r = parseInt(hex.slice(1, 3), 16),
        g = parseInt(hex.slice(3, 5), 16),
        b = parseInt(hex.slice(5, 7), 16);

    var biggest = r;
    if (g > biggest) biggest = g;
    if (b > biggest) biggest = b;
    var ratio = parseInt(brightness)/biggest;

    r = ((r * 10 * ratio) / 10) | 0;
    g = ((g * 10 * ratio) / 10) | 0;
    b = ((b * 10 * ratio) / 10) | 0;

    var newR = r.toString(16);  if (newR.length < 2) { newR = "0" + newR; }
    var newG = g.toString(16);  if (newG.length < 2) { newG = "0" + newG; }
    var newB = b.toString(16);  if (newB.length < 2) { newB = "0" + newB; }

    return '#' + newR + newG + newB;
}

dokument.style.setProperty('--niebieski_25_30', hexToRGBA(niebieski_25, 0.3));
dokument.style.setProperty('--niebieski_50_30', hexToRGBA(niebieski_50, 0.3));
dokument.style.setProperty('--niebieski_50_50', hexToRGBA(niebieski_50, 0.5));

//////////////////////////////////////////////

function changePowSerImagesSizes(){
    var parentsOfImages = document.getElementsByClassName("relation_t2t");
    for(var i=0; i<parentsOfImages.length; i++){
        var image = parentsOfImages[i].getElementsByTagName("img");
        var oldSource = image[0].src;
        var animeID = oldSource.slice(-10);

        if(oldSource.slice(-15) != "/res/other/placeholders/title/100x100.jpg".slice(-15)) image[0].src = "/res/images/225x350/" + animeID;
        else image[0].src = "/res/other/placeholders/title/225x350.jpg";

    }
}
changePowSerImagesSizes();

////////////////////////////////////////////////////////////////////////////////////////////////////

function changePostacieImagesSizes(){
    var parentOfCharacters = document.getElementsByClassName("person-list");
    if (parentOfCharacters == null) return;
    if (parentOfCharacters.length == 0) return;                                                                 //so we dont access nullpointer         // gdy nie ma takich obrazkow na ekranie
    var parentsOfImages = parentOfCharacters[0].getElementsByClassName("person-character-item");

    for(var i=0; i<parentsOfImages.length; i++){
        var image = parentsOfImages[i].getElementsByTagName("img")[0];
        var oldSource = image.src;
        var characterID = oldSource.slice(-10);

        if(oldSource.slice(-15) != "/res/other/placeholders/title/36x48.jpg".slice(-15)) image.src = image.src = "/res/images/100x100/" + characterID;
        else image.src = "/res/other/placeholders/title/100x100.jpg";
    }
}
changePostacieImagesSizes();
////////////////////////////////////////////////////////////////////////////////////////////////////

function changeRekomImagesSizes(){
    var biggerParent = document.getElementsByClassName("page-content page-anime-recommendations")[0];
    if (biggerParent == null) return;

    var parentsOfImages = biggerParent.getElementsByClassName("media media-item");
    for(var i=0; i<parentsOfImages.length; i++){
        var image = parentsOfImages[i].getElementsByTagName("img");
        var oldSource = image[0].src;
        var animeID = oldSource.slice(-10);

        if(oldSource.slice(-15) != "/res/other/placeholders/title/100x100.jpg".slice(-15)) image[0].src = "/res/images/225x350/" + animeID;
        else image[0].src = "/res/other/placeholders/title/225x350.jpg";

    }
}
changeRekomImagesSizes();

////////////////////////////////////////////////////////////////////////////////////////////////////

function changeAniListImagesSizes(){
    var biggerParent = document.getElementsByClassName("anime-list")[0];
    if (biggerParent == null) return;

    biggerParent = biggerParent.getElementsByTagName("article")[0];
    if (biggerParent == null) return;


    var parentsOfImages = biggerParent.getElementsByClassName("div-row");
    for(var i=0; i<parentsOfImages.length; i++){


        var aElement = parentsOfImages[i].getElementsByClassName("cover-col")[0].getElementsByTagName("a")[0];
        if (aElement == null) return;


        var aStyle = aElement.style.backgroundImage;
        var animeID = aStyle.slice(-12).slice(0,10);

        if(animeID != "00x100.jpg") aElement.style.backgroundImage = "url(/res/images/225x350/" + animeID + ")";
        else aElement.style.backgroundImage = "url(/res/other/placeholders/title/225x350.jpg)";

    }
}
changeAniListImagesSizes();

////////////////////////////////////////////////////////////////////////////////////////////////////

function changeGlowneImagesSizes(){
    var parentOfImages = document.getElementsByClassName("info-aside aside-title")[0];
    if (parentOfImages == null) return;

    var image = parentOfImages.getElementsByClassName("info-aside-img")[0];
    var oldSource = image.src;

    var animeID = oldSource.slice(-10);

    if(oldSource.slice(-15) != "/res/other/placeholders/title/225x350.jpg".slice(-15)) image.src = "/res/images/genuine/" + animeID;

    image.setAttribute("onerror", 'this.onerror=null; this.src="' + oldSource + '";');  // to prevent very few anime that doesnt have 'genuine' image from being broken
}

changeGlowneImagesSizes();

////////////////////////////////////////////////////////////////////////////////////////////////////


function changeVideoPlayerSize(){

    var parentOkienka = document.getElementById("player-block");
    if (parentOkienka == null) return;

    var videoOkienko = parentOkienka.getElementsByTagName("iframe")[0];

    videoOkienko.width = "100%";
    setTimeout(() => {
        var width = videoOkienko.clientWidth;
        var height = width * 9 / 16;
        videoOkienko.height = height.toString();
    }, 300);
}
window.addEventListener('resize', changeVideoPlayerSize);

And here's the thing - I don't know which part of the code creates the problem.

Is it a problem with my manifest.json ? But if so, then why did my extension get approved in Chrome Web Store? link

Also - if you want to compare with a working addon - here's Firefox version link

Answer 1

Thanks to @wOxxOm I found that both .js and .css files are actually injected into the website, but not working correctly.

After some research I found this post at Chromium forum: https://bugs.chromium.org/p/chromium/issues/detail?id=776891

Chromium "style sheets injected by extensions are now treated as user style sheets", thus making them less important than author created style sheets.

---

In my case I had to manually add !important near all the stylesheet rules and it repaired the problem, which is inconvenient, but there's no way around it.