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

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

> 场景：查询ip地位地址

效果图：

![20190819105921663.png][]

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;
    });

[20190819105921663.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/01/29/ee7e32a2ed7a43d2bf6259976b9e5424.png

发表评论取消回复

表情：

评论列表（有 0 条评论，24人围观）

还没有评论，来说两句吧...

相关阅读

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

> 场景：查询ip地位地址效果图： ![20190819105921663.png][] manifest.json { "manifest_ve

Dear 丶/ 2024年02月19日 22:12/ 0 赞/ 25 阅读

相关 Chrome扩展学习Demo(三)：将浏览器地址栏的网址转换为二维码

> 场景：将当前地址栏网址转换为二维码效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6L

蔚落/ 2024年02月19日 22:06/ 0 赞/ 23 阅读

相关 Chrome扩展学习Demo(二)：通过js向页面填充数据

> 场景：向各个登录页面填充账号和密码。效果图：github.com/login ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_

ゝ一纸荒年。/ 2024年02月19日 22:02/ 0 赞/ 25 阅读

相关 Chrome扩展学习Demo(一)：在popup里面跨域获取资源

> 场景：在popup页面获取某个网站的资源。效果图： ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0c

缺乏、安全感/ 2024年02月19日 22:02/ 0 赞/ 15 阅读

相关 Chrome扩展学习总结

<table> <tbody> <tr> <td style="width:156px;"><strong>资料</strong></td> <td

拼搏现实的明天。/ 2024年02月19日 22:01/ 0 赞/ 17 阅读

相关 chrome扩展在popup、background、content之间通信解决传输文件问题

文章目录背景介绍案例介绍代码示例 popup页面，上传文件页面 popup页面，js上传代码，file文件转base64

朴灿烈づ我的快乐病毒、/ 2023年10月14日 11:37/ 0 赞/ 20 阅读

相关 chrome扩展控制popup页面动态切换

文章目录 1、通过控制元素的显示隐藏达到popup页面切换的效果 2、通过监听页面重新加载完成不同popup的切换 3、直接修改popup页面locat

妖狐艹你老母/ 2023年10月14日 09:02/ 0 赞/ 39 阅读

相关 chrome里面的一些技巧

1. 求数组长度求数组长度一般采用的是`define count_of(arg) (sizeof(arg) / sizeof(arg[0]))，但这个宏对于指针在编译是不报

ゝ一世哀愁。/ 2022年09月30日 11:44/ 0 赞/ 238 阅读

相关 chrome里面的about Scheme

对about Scheme进行处理的地方： D:/project/chrome/src/src/chrome/browser/browser\_url\_handler.cc

ゝ一世哀愁。/ 2022年09月30日 00:36/ 0 赞/ 219 阅读

相关 van-popup在wepy的显示与隐藏

<van-popup wx:if="{{show}}" show="{{ show }}" position="bottom" @close="closeClick">

野性酷女/ 2021年09月12日 05:18/ 0 赞/ 484 阅读