Chrome Extension 的 Content Script 小記錄

其實在這半年時間內寫過的 Extension 插件一共有三個.
但是比較大型的插件是為公司內部應用而開發.所以就沒有作記錄.
而近來因為簡化朋友的需要再次執筆.所以作點小記錄

Content Script 可以通過 manifest.json 這個檔案設定
這個東西通常可以對目前網頁中的內容作出某些改變.
可以想像成將你自身定義的 Script 掛載到網頁的 HTML 當中
所以當配合上 jQuery 這 Library 就可以幹很多很多的事..
而其中這下面會記錄兩種方法..

1. 當載入 Content 時自動進行 Content Script 的處理
2. 便是當按下插件 Icon 時才進行動作(通過背景方式實作)

方法1:

{
	"name": "Content Script Test Case",
	"version": "1.0",
	"description": "Content Script Test Case",
	"content_scripts": [{
		"matches": ["http://*.zeuik.com/*"],		// 注1
		"js": [ "jquery.js", "content.js" ],			// 依次加載執行順序
		"run_at": "document_start",				// 何時執行此動作
		"all_frames": true					// iframe 也加載
	}]
}

// 注1: 可參考 http://code.google.com/chrome/extensions/match_patterns.html

方法2:

{
	"name": "Browser Action Test Case",
	"version": "0.1",
	"description": "Content Script Test Case",
	"background_page": "background.html",
	"browser_action": {
		"default_icon": "icon.png",
	},
	"permissions": [ "tabs", "http://*/*" ]
}

chrome.browserAction.onClicked.addListener(function(tab) {
	chrome.tabs.executeScript(tab.id, {file: 'jquery.min.js'});
	chrome.tabs.executeScript(tab.id, {file: 'content.js'});
});

以上面個方法定義後.只需在同目錄中放入 jquery.js 和 content.js 即可
而 content.js 便是你需要執行的動作.只要按照一般的網頁編寫方法便可..