CODEWITHSUNDEEP
google-chromegoogle-chrome-extension
user2454455
user2454455

Reputation:

Why chrome-extension doesn't change the images?

I am new to chrome-extension and currently studying it. Im reading http://talks.codegram.com/creating-basic-chrome-extensions#/basic_example_4 the css tweaks already works but not with the changing of image...

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

using inspect element over the photo which is not displaying

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

Upvotes: 1

Views: 261

Answers (1)

gkalpak
gkalpak

Reputation: 48211

In order for the image (or any resource) to be "usable in the context of a web page" you have to declare it as a web accessible resource in the relevant section of your manifest.json. E.g.:

In manifest.json:

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

Upvotes: 1

Related Questions