Chrome扩展学习Demo：在popup里面显示我的 IP-蒲公英云

Chrome扩展学习Demo：在popup里面显示我的 IP

Dear 丶 2024-02-19 22:12 57阅读 0赞

场景：查询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;
});