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

Question

所以我为一个特定的网站开发了这个非常小的扩展。

整个插件的目标是改变它的样式（默认情况下它看起来像是从 1990 年代开始的）。 一开始我写了一个 Greasemonkey 脚本，效果很好，但后来当我的朋友也想用它时，我决定把它做成一个浏览器插件，让它完美无瑕。

所以从 GreaseMonkey 脚本到 Mozilla Firefox 插件的过渡一点也不难。一切正常，就像 GreaseMonkey 脚本一样。但是当我尝试将其更改为 Chrome 扩展时 - 没有结果。好像扩展程序不存在一样。

我认为我没有使用任何对“Firefox”友好的代码，因为 GreaseMonkey 代码可在 Mozilla 和 Chrome 上运行。

---

我的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"
    }
  ]


}

如您所见 - 插件首先将.css 文件添加到浏览器中，以更改其中的静态部分。 然后我有 3 个脚本（现在 documentStart.js 和 documentIdle.js 是空的），它们在 3 个不同的时间加载。

这是我的documentEnd.js：（抱歉，我一直在使用一些本地语言变量名）

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);

事情是这样的——我不知道代码的哪一部分造成了问题。

我的manifest.json 有问题吗？但如果是这样，那为什么我的扩展程序会在 Chrome 网上应用店中获得批准？ link

另外 - 如果你想与一个有效的插件进行比较 - 这里是 Firefox 版本 link

Answer 1

感谢@wOxxOm，我发现.js 和.css 文件实际上都注入了网站，但无法正常工作。

经过一番研究，我在 Chromium 论坛上发现了这篇文章： https://bugs.chromium.org/p/chromium/issues/detail?id=776891

Chromium“由扩展注入的样式表现在被视为用户样式表”，因此它们不如作者创建的样式表重要。

---

就我而言，我不得不在所有样式表规则附近手动添加!important，它修复了问题，这很不方便，但没有办法解决。