Question

我是Chrome扩展程序开发的初学者，我正在尝试创建一个扩展程序，每次打开新选项卡时都会显示随机漫画。（我不需要随机化图片。链接会自动提供随机图像）

以下是我的文件，

newtab.html

<html>
    <head>
        <script src="newtab.js"></script>
        </head>
    <body>
    </body>
</html>

newtab.js

var ImageSource = 'http://explosm.net/comics/random',
parser = new DOMParser();

chrome.tabs.onCreated.addListener(function(tab) {
var xhr = new XMLHttpRequest();
xhr.open("GET", ImageSource, true);
xhr.onreadystatechange = function() {
    if(xhr.readyState == 4 )
    {
        var xml = parser.parseFromString(xhr.responseText, 'text/xml'),
            imageUrl = getValueForElementNode(xml, 'img');

        document.write('<div><img src="'+imageUrl+'"></div>');
        setTimeout(function() { notify.close(); }, 4000);
    }
}
xhr.send();
});

function getValueForElementNode(doc, node) {
return doc.getElementsByTagName(node)[7].childNodes[0].nodeValue;
}

的manifest.json

{
"name": "Comic of the tab",
"description": "Delivers random comic strip from your favourite series!",
"version": "1.0.0",
"manifest_version": 2,
"icons": {"128": "icon_128.png"},
"chrome_url_overrides" : { "newtab": "newtab.html"},
"permissions" : [
                "clipboardWrite",
                "webRequest",
                "http://*",
                "http://explosm.net/"
            ],
"background": {
        "scripts": ["newtab.js"]
}
}

我收到以下错误：

VM472 extensions :: uncaught_exception_handler：8事件处理程序出错 for tabs.onCreated：TypeError：无法读取属性'childNodes' 未定义 at getValueForElementNode（chrome-extension：//pnhbnidjljkmhmnomejbfniemnpembea/newtab.js:17:45）在chrome-extension：//pnhbnidjljkmhmnomejbfniemnpembea/newtab.js：9：28
XMLHttpRequest无法加载http://explosm.net/comics/random。请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，不允许访问“chrome-extension：// pnhbnidjljkmhmnomejbfniemnpembea”。

Answer 1

您在Chrome中遵守同源政策，这基本上意味着您不能从原产地（阅读＆＃34;网站＆＃34;）请求不属于您自己的页面。这甚至适用于Chrome扩展程序，但有一种方法可以超越这一点。像这样修改manifest.json：

"permissions": [
   "http://explosm.net/"
]

这将允许您向http://explosm.net发出请求（并在安装时通知用户）

此外，您必须在manifest.json中指定要覆盖的网页，如下所示：

"chrome_url_overrides": {
  "newtab": "mytab.html"
}

然后编写你的剧本，从爆炸中拉出漫画并在页面上显示

在Chrome上打开新标签页时显示图片

1 个答案: