做了一个查看网站地区浏览器插件

显示地区插件主要就是利用ipip.net的开放出来的api,可以显示当前网站的国家、省份、城市、网络等信息,其实也没啥大用,就是省得每次都去网站查询一下了

360搜索扩展“显示地区”就可以安装插件,我本来想做个chrome版本的因为用的多,结果谷歌还要信用卡交5刀验证费还有地区等等限制嫌麻烦就做了个360的扩展,360提交还算快,不过还是吐槽下360插件审核过了都不给我发个邮件通知下,插件也没有作者啥的,不开心。。

做这个浏览器插件其实挺简单的,基本只要会写html,css,js就行,下面就贴一些主要的代码吧

代码很简单,一个弹出页面 popup.html,一个配置信息 manifest.json,2个js文件,一个 popup.html里面调用的 echo.js,一个是在后台运行的 background.js

chrome扩展,最重要的 manifest.json,定义了扩展需要用到每个文件及其功能权限等,其中background定义了持续在后台运行的脚本,permissions解决了跨域的问题。

manifest.json

{
    "manifest_version": 2,
    "name": "显示地区",
    "version": "1.0",
    "description": "显示当前网站所在地区",
    "icons": {
        "16": "images/icon16.png",
        "48": "images/icon48.png",
        "128": "images/icon128.png"
    },
    "browser_action": {
        "default_icon": {
            "19": "images/icon19.png",
            "38": "images/icon38.png"
        },
        "default_title": "显示地区",
        "default_popup": "popup.html"
    },
    "background":{
    	"scripts":["js/background.js"]
    },
    "permissions": [
        "tabs",
        "http://www.v1tx.com/",
        "http://freeapi.ipip.net/"
    ]
}

popup.html

这个主要是在弹出页面做个标记,方便js生成,每次启动popup页面就会调用echo.js

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style>
* {
 margin: 0;
 padding: 0;
}

body {
 width: 150px;
 height: 120px;
 padding:6px;
 background:#2347e3;

}

div {
 font-size: 16px;
}
p{color:#fff;}
</style>
</head>
<body>
<div id="add"></div>
<script src="js/echo.js"></script>
</body>
</html>

echo.js

主要是获取当前网页的域名,然后把域名信息发送到 background.js 进行下一步

window.onload = function(){
 var addHook = document.getElementById('add');
 chrome.tabs.getSelected(null, function(tab) {
 var url = tab.url;
 var domains = url.split('/');
 var domain = domains[2]; //得到当前页面的域名
 theUrl = 'http://www.v1tx.com/api/getip.php?site=' + domain;
 chrome.extension.sendRequest({greeting: theUrl}, function(response) {
 var citysArray = response.farewell;
 console.log(citysArray);
 var address =JSON.parse(citysArray);
 var country = address[0];
 var province = address[1];
 var city = address[2];
 var network = address[4];
 addHook.innerHTML = "<p>国家:" + country + "</p>" + "<p>省份:" + province + "</p>" + "<p>城市:" + city + "</p>" + "<p>网络:" + network + "</p>";
 });
 }) 
}

background.js

这个是运行在后台的脚本,监听来自echo.js的请求,一旦接收到域名,将会向指定ipip.net发送ajax请求,把ip转换成地区、城市等可读信息,并返回给echojs,最终输出到 popup弹出页面。

function httpRequest(url, callback){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();}
chrome.extension.onRequest.addListener(  function(request, sender, sendResponse) {    console.log(sender.tab ?                "from a content script:" + sender.tab.url :                "from the extension");    if (request.greeting == "hello"){      sendResponse({farewell: "goodbye"});    }    else{    var url = request.greeting;    httpRequest( url, function(ip){             theIp = ip;           var url = 'http://freeapi.ipip.net/' + theIp;           httpRequest(url, function(address){             console.log(address);                 sendResponse({farewell: address}); // snub them.               });    });        }
  });

发表评论

电子邮件地址不会被公开。 必填项已用*标注