15

I've just start out learning how to make extensions for google chrome. I have a very basic understanding so far, so I wanted to try something small.

Right now I am trying to get an image to append to a specific div on a specific page everytime that page loads. The extension loads properly but, the javascript code never seems to run and the image never gets loaded.

This is the manifest.json file I have so far:

{
    "manifest_version": 2,
    "name": "Icon Creator",
    "description": "Creates a custom icon for page",
    "version": "1.0",

    "content_scripts": [
    {
        "matches": ["file:///home/tijko/documents/learning/javascript/test_page.html"],
        "css": ["sample.css"],
        "js":["trial.js"]
    }
    ],
    "icons": {"icon": "icon.jpg"},
    "web_accessible_resources":["trial.js"]
}

and the javascript:

var test = function() {
    custom_icon = document.createElement("img");
    target = document.getElementById("location");
    custom_icon.src = "icon.png";
    target.appendChild(custom_icon);
}
test()
tijko
  • 7,599
  • 11
  • 44
  • 64

2 Answers2

35

Are you trying to load your own extension's icon.png? Right now you are trying to load icon.png on the domain and path of the local page. Instead, you should do:

custom_icon.src = chrome.runtime.getURL("icon.png");

to refer to your extension's icon.png.

Also, you must list icon.png in your web_accessible_resources. Furthermore, you don't need to list trial.js in your web_accessible_resources (except for very specialized use cases).

Finally, you need to approve your extension for access to file:// pages by checking the appropriate box under your extension's listing in chrome://extensions.

apsillers
  • 112,806
  • 17
  • 235
  • 239
  • Thanks for replying, I've gone ahead and made an edit to the `custom_icon.src = chrome.extension.getURL("icon.jpg")` and made sure to remove `trial.js` from `web_accessible_resources` then put in `icon.jpg`. Lastly, `file://` was already checked under `chrome://extensions`. Still no image with these changes. – tijko May 08 '13 at 17:44
  • @tijko Are you actually calling `test`? That is, is your JavaScript sample your entire content script? You need a `test()` invocation at the end or your function never actually runs. – apsillers May 08 '13 at 17:52
  • yes I have called the function `test` at the end of the `trial.js` file but this still doesn't work. That is when I started to think I needed a specific function like `addEventListener` for this. I've edited my post to show this. – tijko May 08 '13 at 18:08
  • As I was double checking the files, I found that the manifest path was off. So the `chrome.extension.getURL()` method did the trick. Really appreciate the help, Thanks! – tijko May 08 '13 at 18:58
  • 1
    You might want to update the method in your answer as it's been deprecated: https://developer.chrome.com/extensions/extension#method-getURL – Hayko Koryun Sep 25 '19 at 08:41
0

If you are compiling your extension with webpack, and images are being included via CSS (even in included libraries), add a webpack rule for images and such with type 'asset/inline'. They will be converted to Data URLs in the CSS. I tried to have it find them at the chrome extension URL but it said can't load chrome-extension://invalid/. I set the publicPath option in webpack. might have been doing it wrong.

See this for an example: https://webpack.js.org/loaders/css-loader/#assets

ShoryuKyzan
  • 1