Question

我是chrome-extension的新手，目前正在研究它。我正在阅读http://talks.codegram.com/creating-basic-chrome-extensions#/basic_example_4 css调整已经有效但不能改变图像...

mainifest.json

{
  "name": "TrollFaces",
  "version" : "0.0.1",
  "manifest_version" : 2,
  "description": "Must turn Codegram team members pics into troll faces.",
  "permissions": ["tabs", "http://*/*", "background"],
  "browser_action": {"default_icon": "16x16.png","default_popup": "popup.html"},
  "content_scripts": [
    {
      // Change 'matches' attribute to load content
      // script only in pages you want to.
      "js": ["jquery.min.js", "contentscript.js"],
      "matches": ["http://*/*"],
      "css": ["basics.css"]
    }
  ]
}

contentscript.js

$(document).ready(function() {
  // Trollface image must be at 'my_extension/images/trollface.jpg'.
  var trollface = chrome.extension.getURL("images/trollface.jpeg");
  $('#content article img').each(function(index, image){
    $(image).attr('src', trollface);
  });
});

在未显示的照片上使用检查元素

<img alt="Txus" height="150" src="chrome-extension://fdigngaajlfopnpffgcapbdekkbicngb/images/trollface.jpeg" width="225">

Answer 1

为了使图像（或任何资源）“在网页的上下文中可用”，您必须将其声明为 Web可访问资源 manifest.json 的 relevant section 。 E.g：

在manifest.json中：

...
"web_accessible_resources": [
    "images/trollface.jpeg"
],
...

为什么chrome-extension不会改变图像？

1 个答案: