jquery - 用于替换图像的 Chrome 插件

Question

我目前正在研究 Chrome 扩展程序的开发。我喜欢猫，我试图用猫的图像替换使用 img 标签的网站上的图像(来源:我的插件，“images”文件夹)。我不太确定我做错了什么，但是图像没有显示(当找不到图像的路径时，我得到显示的“损坏”图标)。

这是我的 JS 文件:

$(document).ready(function() {
    $("div").append('HI THIS IS DOG');  //added this as test and it works - DOGS EVERYWHERE
    var cat = chrome.extension.getURL("cat.jpg");
    $('img').each(function(index, image){  //this produces "broken" icon
        $(image).attr('src', cat);
    });
});

这是我的 list :

  {
    "manifest_version": 2,
    "name": "I love cats",
    "version": "1",
    "description": "My life is complete, cats everywhere!",
    "browser_action": {
    "name": "I love cats",
    "icons": ["icon.png"],
    "default_icon": "icon.png"
  },
  "content_scripts": [ {
    "css": ["basic.css"],
    "js": [ "jquery-1.12.0.min.js", "contentscript.js" ],
    "matches": [ "http://*/*", "https://*/*"]
  }]
}

我的图片位置不正确吗？或者我是否需要以某种方式将其添加到 list 中？我尝试使用 png，但我认为这没有任何区别。

Answer 1

您需要将资源声明为 web-accessible .

  "web_accessible_resources": [
    "cat.jpg"
  ],