1

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

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？

4

2 回答 2

1

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

因此，您的代码不适用于加载外部 JPEG Icon iconUrl: "https://www.MyExternalURL.com/image.jpg"。

而是从https://www.MyExternalURL.com/image.jpg下载文件并将其内联，如方法 2 所示。

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

参考

于 2013-03-04T06:13:53.433 回答
1

通过 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);
于 2013-08-02T08:22:19.113 回答