chrome擴展程序開發

時間  2019-12-07
標籤 chrome 擴展 程序 開發 欄目 Chrome 简体版
原文   原文鏈接

　　前幾天某懶產品經理提出了一個懶需求，大概是這樣的：想從咱們公司的cms後臺點擊進入另外一個第三方後臺的同時，將cms後臺的一些數據自動填充到那個第三方後臺的一些表單中。也就是說，之前他們須要把數據、文字一個一個拷貝粘貼到第三方後臺，如今他們不幹了，想讓我幫他們實現這個自動「搬遷」數據的過程。這該怎麼辦呢？那個第三方後臺也不是我能控制的了的啊，這時就要使用chrome擴展程序這個神器了，它能夠實現瀏覽器上多個頁面之間的數據傳遞呢！javascript

　　關於chrome擴展程序的開發，網上有一個比較完整的中文翻譯的開發文檔——http://open.chrome.360.cn/extension_dev/overview.html，有興趣能夠翻閱一下。chrome擴展程序能作的事情仍是挺多挺好玩的，不過這篇博文我只是想以一個很簡單的例子來說解一下它的基本開發過程，從代碼編寫到加載運行，最後再說明一下整個擴展程序的運行原理以及調試。這個簡單例子是這樣的：將一些QQ郵箱的帳號密碼寫在文件中，而後進入QQ郵箱登錄界面的時候帶入一個id參數，chrome擴展程序根據這個id去讀取QQ帳號密碼自動填充到登陸表單中，無需咱們手動輸入，而後這個擴展程序還要能記錄郵箱的登陸狀況。廢話很少說，這就開始了！html

　　首先建立一個空文件夾qqmail用於存放這個擴展程序全部的代碼文件，而後寫一個配置文件manifest.json，配置文件各個參數配置和意義以下：java

{
	"name": "QQ Mail Extention",//擴展程序名稱
	"version": "1.0",//版本
	"manifest_version": 2,//必定要爲2，不然會報錯
	"description": "This Extention can help you manifest_versionto login QQ Mail faster!",//擴展程序描述
	"browser_action": {
		"default_icon": "logo.png",//默認圖標
		"default_popup": "popup.html"//點擊圖標時彈出的頁面
	},
	"background": {
		"persistent": true,
		"scripts": ["background.js"]//擴展程序背景頁腳本
	},
	"content_scripts": [{
		"all_frames": true,//是否運行在頁面全部frame中，設置爲true時擴展程序在iframe中也能起做用
		"matches": ["*://*/*"],//定義那些頁面須要注入content script腳本
		"js": ["jq.1.8.2_dev.js","content_scripts.js"]//須要向頁面注入的content script腳本
	}],
	"permissions": [//擴展程序權限
		"tabs", "webNavigation"
	]
}　　

說明（browser_action和page_action只能選其中一個）：web

browser_action：擴展程序圖標在chrome地址欄以外，chrome主工具欄右側。定義處理事件適用於全部頁面。
page_action：擴展程序圖標在chrome地址欄以內右側。定義須要處理的頁面的事件，並非適用於全部頁面的。
擴展程序背景頁腳本：在以上配置中爲background.js，是一個獨立於全部頁面的腳本，經常使用於管理一些任務或狀態，可做爲不一樣頁面之間傳遞數據的橋樑。它會在擴展程序的整個生命週期都存在，同時，在同一時間只有一個實例處於活動狀態。chrome

　　接下來，編寫擴展程序彈窗頁面popup.html：json

<!DOCTYPE html>
<html>
	<head>
		<title>QQ郵箱快捷登陸插件</title>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<style>
			table{border-collapse:collapse}
			table td{padding:5px}
		</style>
	</head>
	<body style="height:150px;width:200px">
		<h3>當前QQ郵箱信息</h3>
		<div id="info"></div>
	</body>
	<script src="jq.1.8.2_dev.js"></script>
	<script src="popup.js"></script>
</html>

　　popup.html中引入了兩個js文件，一個是jQuery文件，另外一個則是用於刷新彈窗內容的popup.js，不過，這裏要先介紹一下擴展程序背景頁腳本background.js：瀏覽器

var qqmail = new function() {
	var I = this, info = {'hasInfo': 0},//當前郵箱信息
	accounts = {//全部QQ郵箱帳號配置
		1: {
			'username': '2******04@qq.com',//帳號
			'password': '1242444',//密碼
			'password2': '341222'//獨立密碼
		},
		2: {
			'username': '8834839@sina.com',
			'password': '1234245',
			'password2': '2141211'
		},
		3: {
			'username': '8110110109@qq.com',
			'password': '111111',
			'password2': '222222'
		}
	};
	
	I.setInfo = function(id) {//設置當前郵箱信息
		if(accounts[id]) {
			info = accounts[id];
			info.hasInfo = 1;
			I.setStatus(0);
		}
	};
	
	I.setStatus = function(i) {//設置當前郵箱狀態
		var status = {
			0: '未登陸',
			1: '還需輸入獨立密碼',
			2: '已登陸',
			3: '已退出登陸'
		};
		if(status[i]) info.status = status[i];
	};
	
	I.getInfo = function() {//獲取當前郵箱信息
		return info;
	};
};

chrome.runtime.onMessage.addListener(function(request, sender, sendResponse) {//監聽來自content_scripts.js的消息並做出響應
	var f = qqmail[request.cmd];
	if(typeof f === 'function') {
		var ret = f(request.par);
		if(typeof sendResponse == 'function') {
			sendResponse(ret);
		}
	}
});

這個文件主要記錄了一些QQ郵箱的帳號、密碼和獨立密碼，並維護當前登陸郵箱的登陸狀態，使用chrome.runtime.onMessage.addListener()監聽來自content script腳本的請求。函數

　　好了，如今回過頭來看看popup.js：工具

(function() {
	var fn = function() {
		var info = chrome.extension.getBackgroundPage().qqmail.getInfo(), s = '';
		if(info.hasInfo) {
			var cfg = {
				'username': '郵箱',
				'password': '密碼',
				'password2': '獨立密碼',
				'status': '登陸狀態'
			};
			s = '<table border="1">';
			$.each(info, function(k, v) {
				if(cfg[k]) s += '<tr><td>' + cfg[k] + '</td><td>' + v + '</td></tr>';
			});
			s += '</table>';
		} else {
			s = '尚無任何QQ郵箱信息......';
		}
		$('#info').html(s);
	};
	fn();
})();

這個js文件主要是經過chrome.extension.getBackgroundPage()與擴展程序背景頁腳本background.js取得聯繫，並調用其中的qqmail.getInfo()取得當前登陸郵箱的信息，刷新彈窗頁面popup.html的內容。ui

　　最後就是content script文件content_scripts.js：

(function() {
	var init = function() {
		if(location.href.indexOf('https://mail.qq.com/?id=') >= 0) {//QQ郵箱登陸主頁面
			var id = location.href.split('=')[1];
			send('setInfo', id);//初始化當前郵箱信息
		} else if(location.href.indexOf('https://xui.ptlogin2.qq.com/cgi-bin/xlogin') >= 0) {//QQ郵箱登陸表單iframe
			send('getInfo', function(ret) {//獲取當前郵箱信息填充登陸表單
				getObj('[name="u"]', function(o) {
					o.val(ret.username);
					$('[name="p"]').val(ret.password);
				});
			});
		} else if(location.href.indexOf('https://mail.qq.com/cgi-bin/loginpage?autologin') >= 0) {//填寫QQ郵箱獨立密碼
			send('setStatus', 1);//設置郵箱狀態
			send('getInfo', function(ret) {//獲取當前郵箱信息填充登陸表單
				getObj('[name="pp"]', function(o) {
					o.val(ret.password2);
				});
			});
		} else if(location.href.indexOf('https://mail.qq.com/cgi-bin/frame_html') >= 0) {//QQ郵箱成功登陸
			send('setStatus', 2);//設置郵箱狀態
		} else if(location.href.indexOf('https://mail.qq.com/cgi-bin/loginpage?t=wx_logout') >= 0) {//QQ郵箱退出登陸
			send('setStatus', 3);//設置郵箱狀態
		}
	},
	getObj = function(s, fn, tm, tmout) {//控件加載完成才獲取，防止控件還沒有加載完成而致使獲取不到對象
		tm = tm || 100;
		var t = setInterval(function() {
			var o = $(s);
			if(o[0]) {
				clearInterval(t);
				if(tmout && tmout > 0) {
					setTimeout(function() {
						fn(o);
					}, tmout);
				} else {
					fn(o);
				}
			}
		}, tm);
	};
	send = function(cmd, par, cb){//給background.js發消息
		if(typeof par == 'function'){
			cb = par;
			par = '';
		}
		chrome.runtime.sendMessage({cmd:cmd, par:par}, cb);
	};
	$(init);
})();　　

這個腳本是運行在chrome每個頁面的，主要工做就是判斷當前頁面是哪一個頁面並做出相應動做，使用chrome.runtime.sendMessage()從背景頁腳本請求數據、發送郵箱登錄狀態給背景頁。

　　好了，到這裏這個簡單的chrome擴展程序便開發完成了，目錄的全部文件以下：

代碼編寫完畢以後即可以開始加載這個擴展程序來運行了，在chrome上的操做示意圖以下：

點擊「加載已解壓的擴展文件」選中剛剛的目錄qqmail，加載以後信息以下：

 

至此，這個簡單的chrome擴展程序已經開始運行，接下來操做一下郵箱登陸過程，並逐步說明這個擴展程序的運行過程與原理。

　　加載以後點擊擴展程序圖標，彈窗頁面腳本popup.js便會請求背景頁腳本background.js，獲取郵箱信息，刷新彈窗頁面內容，因爲此時尚未進入QQ郵箱登陸頁面並傳id參數，因此background.js中尚未當前登陸郵箱的任何信息，因此彈窗頁面是這樣的：

接下來打開QQ郵箱登陸頁面並傳id，好比這樣：https://mail.qq.com/?id=1，進入這個頁面以後content script腳本content_scripts.js經過url匹配找到要執行的動做，即：取得參數id的值，並調用背景頁腳本background.js的qqmail.setInfo()函數，取得當前要登陸郵箱的信息並保存在info對象中。這時，因爲QQ郵箱登陸表單位於登陸頁面中的iframe中，擴展程序的content script腳本content_scripts.js也運行其中，經過腳本中第二個url匹配，發送消息給背景頁腳本background.js，調用其中的qqmail.getInfo()函數取得info對象中的帳號和密碼，自動填充到登陸表單中，這樣就無需咱們手動輸入了。此時再去點擊擴展程序圖標，彈窗腳本popup.js再次請求背景頁腳本background.js中的qqmail.getInfo()函數獲取當前登陸QQ郵箱信息，刷新彈窗頁面，效果是這樣的：

接下來，點擊登陸，進入獨立密碼填寫頁面，content script腳本content_scripts.js經過與背景頁腳本background.js通訊，作兩個動做：首先調用qqmail.setStatus()函數設置郵箱登陸狀態，而後調用qqmail.getInfo()函數取得獨立密碼並自動填充表單。此時再點擊擴展程序圖標，popup.js從新請求背景頁腳本刷新彈窗頁面以下：

 

一樣的，登陸成功、退出登陸時，content script腳本content_scripts.js也都會發消息給背景頁腳本background.js去修改當前登陸郵箱的登陸狀態，即更新info對象的值，點擊擴展圖標時彈窗頁面腳本popup.js也會請求背景頁腳本background.js獲取當前登陸郵箱狀態，刷新彈窗頁面。

　　好了，如今大概瞭解chrome擴展程序大概的運做原理了吧。整個擴展程序主要涉及三個js腳本文件：

1. 彈窗頁面腳本：每點擊一次擴展程序圖標則運行一次，主要負責經過與背景頁腳本通訊，請求數據，刷新彈窗內容。

2. content script腳本：運行於chrome中每一個打開的頁面，可與背景頁腳本通訊，可操做當前頁面。

3. 背景頁腳本：獨立於chrome任何頁面，存在於擴展程序整個生命週期，通常用於保存一些數據狀態，充當不一樣頁面之間數據交流的橋樑。

　　最後，簡單說一下chrome擴展程序開發過程當中的調試方法。彈窗頁面腳本的調試方法：右鍵擴展圖標，點擊「審查彈出內容」便可彈出調試窗口，對彈窗頁面進行抓包。content script腳本的調試方法則與通常調試相同，直接按「F12」按鈕便可。而背景頁腳本，因爲沒有具體頁面，故沒法直接調試，可經過彈窗頁面腳本和 content script腳本使用必定方法間接調試，由於這兩個腳本均可獲取到背景頁腳本中的數據啊。修改了擴展程序代碼以後，保存，而後直接在chrome擴展程序管理頁面點擊「從新加載」便可生效！

　　其實chrome擴展程序能作的事情還真挺多的，本文只是提供了一個很簡單的例子來講明它的開發過程與運行過程而已。通常來講，咱們能夠經過在某個第三方網頁的url末尾加上咱們自定義的參數，由咱們的chrome擴展程序的content script腳本根據這個參數去請求咱們本身的接口，獲取數據來填充這個網頁的表單，或是作一些其餘的操做來達到咱們的目的，也能夠在content script腳本中定義某個頁面的某個按鈕的點擊事件，在事件響應函數中就能夠作咱們想作的事情就是了，固然了，操做頁面上的內容以前，首先要先研究一下這個頁面的html代碼，否則你怎麼知道去操做哪些控件呢是吧。

　　本文到此結束，所述內容若有不妥，敬請諒解，歡迎指教，哈哈！

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程