基本上 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 附加在網站的最後面的
所以右下角是隨時都會出現,而左邊的是要點圖示才會出來的
而 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/ 裡,打開開發人員模式,載入未封裝項目 (選擇寫好外掛程式的目錄),這樣就行了。
留言