Question

对不起，如果已经问过这个问题 - 我看了很多，但找不到任何可能解决它的问题。虽然它很可能已经被问了十几次，所用的语言完全超出了我的脑海。这让我想到了这一点：我不是技术上的愚蠢或任何东西，但就编码任何东西而言，这完全是另一个故事而且我知道几乎没有关于Chrome扩展的术语。我大概一小时前开始使用谷歌搜索。

无论如何，这个问题。我试图在我经常访问的网站上进行扩展以替换单个gif。它是一个加载图像，所以它几乎出现在每一页上，而且它只是一个残暴的。通过脚本调用图像（是正确的单词吗？）...我认为它是通过浏览页面源来调用它，它将其称为ajax_loader？ CSS样式表为我提供了图像的URL。

所以，这是我的代码，基于谷歌搜索：

的manifest.json

{
    "manifest_version": 2,
    "version": "1.0",
    "name": "extensioname",
    "description": "extensiondescription",
    "content_scripts": [
        {
            "matches": ["websiteitselfurl.com*","URLofimagetobeblocked.gif"],
            "js": ["part2.js"]
        }
    ]
}

然后就是

part2.js

document.images[0].src = "replacementimage.gif";
document.images[0].height = "300";
document.images[0].width  = "300";

显然这些不是实际的网址，但是...... 所有这一切最终都是用替换的gif替换每个网页上的图像，无论它在哪里。甚至连我首先想要替换的网站上的加载图像都没有。我试过更改＆＃34;匹配＆＃34;中的值。我想到了一些不同的东西，包括最后的东西，以及......我认为可以做到的一切。我想重申一下，我对此完全不知所措，所以如果已经被问过我道歉，但我真的无法在任何地方找到答案，对于我的生活我不能让自己工作，而且我现在没有想法。我在这里注册只是为了问，因为我喜欢把头发撕掉它。

任何指导都会非常感激。谢谢！

Answer 1

考虑到您所指的是在外部网站（imgur）中托管的gif，您应该使用该图片的完整路径：https://i.imgur.com/Li7isRP.gif

的manifest.json

{
    "manifest_version": 2,
    "version": "1.0",
    "name": "extensioname",
    "description": "extensiondescription",
    "content_scripts": [
        {
            "matches": [
                "http://websiteitselfurl.com/*",     "https://websiteitselfurl.com/*"
            ],
            "js": [
                "content.js"
            ]
        }
    ]
}

content.js

var ajax_loader = document.getElementById("ajax-loader");
ajax_loader.style.setProperty('background', 'url("https://i.imgur.com/Li7isRP.gif")', 'important');
// If needed, you could also change width/height of ajax_loader to better match the new image.

Answer 2

以为我会为解决方案投入另一种可能的途径。由于您要替换动态加载的gif，因此最好只重定向请求，而不是在调用页面后尝试更改页面。使用webRequest api的东西对此很有用。例如：

<强>的manifest.json

{
  "name": "VF Sample",
  "version": "1.0.0",
  "description": "A sample for VF gif replacement",
  "manifest_version": 2,
  "permissions": [
    "webRequest","webRequestBlocking","http://vampirefreaks.com/*"
  ],
  "background": {
    "scripts": ["bgp.js"]
  }
}

<强> bgp.js

chrome.webRequest.onBeforeRequest.addListener(function(details){
  return {redirectUrl:"http://i.imgur.com/Li7isRP.gif"};
},
{urls: ["http://vampirefreaks.com/_img/site/ajax-loader*"]},["blocking"]);

制作Chrome扩展程序以替换单个图像

2 个答案: