chrome 外掛開發 之 ip地址顯示
阿新 • • 發佈：2019-01-29
1. 前言
2. 流程
2.1 編寫manifest.json
主要編寫外掛的一些配置， 版本號， 名字， 用到的圖示， 相應的popup.html， 跨站請求許可等。
{
"manifest_version": 2,
"name" : "檢視我的IP",
"version" : "1.0",
"description" : "檢視我的電腦當前的公網IP",
"icons":{
"16": "images/icon16.png",
"48": "images/icon48.png",
"128 2.2 popup.html
主要是關於彈出頁面的樣式設定， 以及相應的 js 檔案配置。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<<style type="text/css" media="screen">
* {
margin: 0;
padding: 0;
}
body{
width: 600px;
height: 100px;
}
div {
line-height: 30px;
font-size: 25px;
text-align: center;
}
</style 2.3 my_ip.js
這裡我們解析自己的ip 與 參考文章中不同， 我們選用了 http://www.ip.cn/ 這個網站， 但是， 這個網站提供的資料比較多， 需要進行一部分過濾。
2.3.1 過濾方法
過濾時候， 我們的目標是找到ip 資訊 和 地址資訊， 分析html 頁面原始碼可以發現， 我們需要的資料保留在 class = “well” 中。
由於我們通過XMLHttpRequest 提取得到的 html 原始碼在這裡成了字串格式的文字， 需要利用 DOMParser 將他解析成 DOM 文件模型後， 才能方便的使用 DOM 模型的有關操作提取資料內容。
function httpRequest(url, callback){
var xhr = new XMLHttpRequest();
xhr.open("GET", url, true);
xhr.onreadystatechange = function(){
if (xhr.readyState == 4){
var ip = xhr.responseText;
parser = new DOMParser();
xmlDoc = parser.parseFromString(ip, "text/html");
ip = xmlDoc.getElementsByClassName("well")[0].innerHTML;
callback(ip);
}
}
xhr.send();
}
httpRequest("http://www.ip.cn/", function(content){
var ip = content;
document.getElementById("ip_div").innerHTML = ip;
});3. 顯示效果
自此一個chrome 小外掛就這麼開發完畢啦~~
4. 遇到的一些問題
4.1 popup.html 的除錯
需要除錯這個頁面，不能夠通過點選icon的彈出頁面除錯，需要單獨開啟這個頁面才行，但是這個頁面具體的url是哪個呢？經過尋找，發現這樣的url是：
* chrome-extension://your app id/popup.html *
例如正在開發一款工具，popup.html的地址就是
chrome-extension://okbmjnfimbkiocogpepgjfhknknehime/popup.html
不僅是這個頁面，其他的頁面也可以通過這樣的方式來訪問和除錯。
補充：右鍵點選ICON，選擇“審查彈出內容”也能夠對popup.html進行除錯