参考

Question

我正在尝试使用以下内容打开一个丰富的通知：

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

但由于某些原因，这不起作用，但如果我用以下内容替换选项：

var options = {
    templateType: "basic",
    title: request.name,
    message: request.message,
    iconUrl: chrome.runtime.getURL("/images/cat.png"),
};

通知效果很好。

以下是我的清单文件中的重要内容

{
"manifest_version": 2,
"name": ...,
"description": ...,
"version": ...,
"icons": { 
    ...
},
"content_scripts": [
    ...
],
"background": {
    "scripts": ["background.js"]
},
"permissions": [
    "tabs", 
    "experimental"
],
"web_accessible_resources": [
    "https://www.MyExternalURL.com/*"
]

}

我应该如何使用外部图像作为iconURL？

Answer 1

脚本和对象资源只能从扩展程序包中加载，而不能从Web上加载。这可确保您的扩展程序仅执行您特别批准的代码，从而防止活动网络攻击者恶意重定向您的资源请求。

因此，您的代码无法加载外部JPEG图标iconUrl: "https://www.MyExternalURL.com/image.jpg"。

而是从https://www.MyExternalURL.com/image.jpg下载文件并将其置于方法＃2中。

web_accessible_resources 以上的内容不接受HTTP URL（S）的任何内容，它只接受一个字符串数组，指定打包资源的路径（相对于包根）预计可以在网页的上下文中使用。

参考

Answer 2

通过Ajax获取外部图像的blob，应用转换它的数据URI。

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

chrome.experimental.notification（丰富通知）和外部URL

2 个答案:

参考