场景：在popup页面获取某个网站的资源。
效果图：
代码截图：
manifest.json
{
"manifest_version": 2,
"name": "跨域获取图片",
"version": "1.0",
"description": "popup页面获取图片",
"icons": {
"48": "icon.png"
},
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"http://*/*", // 可以通过executeScript或者insertCSS访问的网站
"https://*/*"// 可以通过executeScript或者insertCSS访问的网站
]
}
popup.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
<title>跨域获取图片</title>
<style>
img {
width: 500px;
}
</style>
</head>
<body style="width:500px;min-height:100px;">
<div>这里是popup：跨域获取图片</div>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
popup.js
var imageGenerator = {
searchOnRenwey: 'https://www.baidu.com/company/renwey_home/banner_images',
requestImages: function () {
var req = new XMLHttpRequest();
req.open('GET', this.searchOnRenwey, true);
// req.setRequestHeader('Authorization', token);
req.send();
req.onload = function () {
if (req.readyState === 4 && req.status === 200) {
var resultData = JSON.parse(req.responseText);
for (var i = 0; i < resultData.total; i++) {
var img = document.createElement('img');
img.src = resultData.data[i].imageUrl;
img.setAttribute('alt', resultData.data[i].imageName);
document.body.appendChild(img);
}
}
};
}
};
document.addEventListener('DOMContentLoaded', function () {
imageGenerator.requestImages();
});