場景：查詢ip地位地址
效果圖：
manifest.json
{
"manifest_version": 2,
"name": "查看我的 IP",
"version": "1.0",
"description": "查看我的電腦當前的公網 IP",
"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"/>
<style>
img {
width: 500px;
}
</style>
</head>
<body style="width:500px;min-height:100px;">
<div>這裏是popup：</div>
<div id="ip_div">正在查詢……</div>
<script type="text/javascript" src="popup.js"></script>
</body>
</html>
popup.js
function httpRequest(url, callback) {
var xhr = new XMLHttpRequest();
xhr.open('GET', url, true);
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
callback(xhr.responseText);
}
};
xhr.send();
}
httpRequest('http://pv.sohu.com/cityjson', function (ip) {
document.getElementById('ip_div').innerText = ip;
});