javascript - 为什么我的扩展程序在 Mozilla Firefox 上运行而不是在 Google Chrome 上运行？
问题描述
所以我为一个特定的网站开发了这个非常小的扩展。
整个插件的目标是改变它的样式（默认情况下它看起来像是从 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 网上应用店中获得批准？关联
另外-如果您想与工作插件进行比较-这里是 Firefox 版本链接
解决方案
感谢@wOxxOm，我发现.js和.css文件实际上都注入了网站，但无法正常工作。
经过一番研究，我在 Chromium 论坛上找到了这篇文章： https ://bugs.chromium.org/p/chromium/issues/detail?id=776891
Chromium “由扩展注入的样式表现在被视为用户样式表”，因此它们不如作者创建的样式表重要。
在我的情况下，我必须手动添加!important所有样式表规则，它修复了问题，这很不方便，但没有办法解决它。
推荐阅读
- android - 在 kotlin 新手中设置特定日期和时间的通知
- arrays - 捕获http json主体响应并转换为角度ionic5中的数组
- javascript - 如何在控制台中显示变量不断变化的值？
- flutter - 如何从颤动的不同屏幕访问变量值？
- pointers - 如何将 Rust 结构的引用/指针传递给 C ffi 接口？
- javascript - 使用最接近（）比较元素与点击事件的距离
- r - 按条件累计和分组
- python - 为什么列表赋予不同的价值？
- python - 当尝试访问字典中键的值数组时，我不断收到“KeyError：（我尝试访问的任何索引）
- node.js - Azure 部署失败 - 容器没有响应端口：8080 上的 HTTP ping，站点启动失败