chrome.experimental.notification (Rich notifications) and external URLs - google-chrome-extension

Question

I'm trying to open up a rich notification using the following:
var options = {
templateType: "basic",
title: "John Doe",
message: "Lorem ipsum",
iconUrl: "https://www.MyExternalURL.com/image.jpg"
};
chrome.experimental.notification.create("notifyId", options, function(id) {
console.log("Succesfully created notification");
});
But for some reason this does not work, but if I replace the options with the following:
var options = {
templateType: "basic",
title: request.name,
message: request.message,
iconUrl: chrome.runtime.getURL("/images/cat.png"),
};
And the notification works perfectly.
Here are the important stuff in my manifest file
{
"manifest_version": 2,
"name": ...,
"description": ...,
"version": ...,
"icons": {
...
},
"content_scripts": [
...
],
"background": {
"scripts": ["background.js"]
},
"permissions": [
"tabs",
"experimental"
],
"web_accessible_resources": [
"https://www.MyExternalURL.com/*"
]
}
How should I use an external image as the iconURL?

Answer 1

Script and object resources can only be loaded from the extension's package, not from the web at large. This ensures that your extension only executes the code you've specifically approved, preventing an active network attacker from maliciously redirecting your request for a resource.
So, your code does not work for loading an external JPEG Icon iconUrl: "https://www.MyExternalURL.com/image.jpg".
Instead download the file from https://www.MyExternalURL.com/image.jpg and put it inline as in approach #2.
More over web_accessible_resources does not accept any content with HTTP URL(S), it only accepts an array of strings specifying the paths (relative to the package root) of packaged resources that are expected to be usable in the context of a web page.
Reference
CSP
Web Accessible Resources

Answer 2

Fetching the blob of an external image by Ajax, apply data URI that is converted it.
var options = {
type: "basic",
title: "TITLE",
message: "MESSAGE"
};
var xhr = new XMLHttpRequest();
xhr.open("GET", "https://www.MyExternalURL.com/image.jpg");
xhr.responseType = "blob";
xhr.onload = function(){
var blob = this.response;
options.iconUrl = window.URL.createObjectURL(blob);
chrome.notifications.create("notifyId", options, function(notId){});
};
xhr.send(null);