基本上 Google Chrome 外掛 Extension 擴充功能 >> 它就是一個 HTML + JS + CSS 系統，就像在寫網頁一樣。
官網的說明文件 > 這裡。
因為我是拿別人的外掛 (Website IP) 來改的 (這樣比較快)，再稍作調整。
Website IP 本身的功能就是找網站的 IP，那我的目的是除了這個外，還要得知它的 ISP、國家是誰，並檢查 SSL 、WHOIS 等等。
底下就是這功能的實作。
首先建一個目錄，裡面要有一個檔 manifest.json ，Chrome 就是先找它來開始一連串的程序。
manifest.json 內容
{
"name": "My Extension", // 外掛名稱
"description" : "My Extension", // 描述
"version": "1.0", // 照著官網的
"manifest_version": 2, // 照著官網的
// "browser_action": { // 針對大部份的網址
"page_action": { // 針對特定的網域
"default_title": "My Extension", // 這個顯示在 Chrome URL 旁的外掛圖示，滑鼠過去它會 popup 出來
"default_popup": "popup.html", // 點擊圖示 popup 出來的內容
"default_icon": "/icon.png" // 圖示
},
"icons": { // 不同 size 的圖示，這裡我都是同一個
"128": "/icon.png",
"16": "/icon.png",
"48": "/icon.png"
},
"permissions": [ "tabs", "http://*/*", "https://*/*", "webRequest" ], // 這個外掛要用到的權限
"background": {
"scripts": [ "background.js" ] // 背景下在跑的程式
},
"content_scripts": [ { // 算是前景，要用到的東西
"all_frames": false,
"css": [ "ip.css" ],
"js": [ "jquery-1.7.2.min.js", "ip.js" ],
"matches": [ "http://*/*", "https://*/*" ],
"run_at": "document_end"
} ],
"web_accessible_resources": [
"ip.json"
]
}
我目錄內容就長這樣子
background.js 它是一個背景執行的程式，開一個網頁時就是它在處理，用它的找 IP 功能
bootstrap.min.css 這個不用多說什麼了
icon.png
ip.css
ip.js 我要呈現什麼都由它
ip.json 這是我用來辨識 IP 是什麼 (特殊意義的)，例如 {"8.8.8.8": "Google DNS IP"}
jquery-1.7.2.min.js 這個也不用多說什麼
manifest.json 主程式
popup.css 它是 popup.html 需要的 CSS
popup.html 它是一個網頁，點擊圖示時會顯示它的內容
README.md
所以我會變動到的程式大致上是這四支
ip.js ip.json manifest.json popup.html
效果是這個樣子
左邊的框框是 popup.html 的呈現
右下角的框框是靠 ip.js 去 append 附加在網站的最後面的
所以右下角是隨時都會出現，而左邊的是要點圖示才會出來的
Google Chrome 外掛 Extension 擴充功能
而 ip.js 讓結果呈現畫面 (Website IP 原本有的，我有調整過)
chrome.extension.sendMessage({name: "getIP"}, function(response) {
var finalIP = response.domainToIP;
chrome.extension.sendMessage({name: "getOptions"}, function(response) {
var websiteIP_status = response.enableDisableIP;
if (websiteIP_status == "Disable" || typeof websiteIP_status == 'undefined') {
if (finalIP)
{
$("body").append('<div id="chrome_websiteIP" class="chrome_websiteIP_' + setPosition + '">' + 'IP: ' + finalIP + '</div>');
parseOwner(finalIP);
parseIP(finalIP);
}
}
});
});
我再多加了 parseIP() (找國家、 ISP) 與 parseOwner() (讀定義好的 ip.json 內容)，都呈現在右下角
parseOwner() 讀 ip.json 內容呈現
function parseOwner(ip) {
if (valid_ip(ip) || valid_ipv6(ip))
{
$.getJSON(chrome.runtime.getURL('ip.json'), function(data) {
// 有讀到，但有時後會顯示不出來，只好讓它 delay 一下，似乎就正常
setTimeout(function(){
if (data && data[ip])
{
// alert('1' + data[ip]);
html_append('Owner1', data[ip]);
}
else
{
parseOwner2(ip);
}
}, 500);
});
}
}
parseIP() 找國家、ISP
用 api.ipdata.co 的 API 去抓的，一天 1500 個 request 免費
function parseIP(ip) {
if (valid_ip(ip))
{
if ( ! ip.match(/^(192.168|10|172.16|172.17|172.18|172.19|172.20|172.21|172.22|172.23|172.24|172.25|172.26|172.27|172.28|172.29|172.30|172.31)\./))
{
var url = 'https://api.ipdata.co/' + ip + '?api-key=6ba2761a7e3dcce74ce9eXXXXXXXXXXXXXXXXxxxxxxxxxxxx';
var ajax_data = {};
$.ajax({
url : url,
type: "GET",
data: ajax_data,
success: function(data, textStatus, jqXHR)
{
// pre_j(data);
html_append('Country', data['country_name']);
html_append('ISP', data['organisation']);
// html_append('ASN', data['asn']);
},
error: function(jqXHR, textStatus, errorThrown)
{
html_append('Country', jqXHR + ', ' + textStatus + ', ' + errorThrown);
}
});
}
}
}
而 popup 的 SSL 、WHOIS 是自己弄個 PHP API 作的，作法與上面的 parseIP 大同小異
到這裡就可以把它掛到 Chrome 裡面了
在 chrome://extensions/ 裡，打開開發人員模式，載入未封裝項目 (選擇寫好外掛程式的目錄)，這樣就行了。
留言