Previous Article Next Article 怎麼寫一個 Google Chrome 外掛 Extension 擴充功能
Posted in WWW

怎麼寫一個 Google Chrome 外掛 Extension 擴充功能

怎麼寫一個 Google Chrome 外掛 Extension 擴充功能 Posted on 2019 年 09 月 10 日Leave a comment

基本上 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 擴充功能
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/ 裡,打開開發人員模式,載入未封裝項目 (選擇寫好外掛程式的目錄),這樣就行了。

發佈留言

發佈留言必須填寫的電子郵件地址不會公開。 必填欄位標示為 *