第一个chrome插件

上周抽了点时间看了下chrome扩展的制作，于是想到公司里在开发环境测试的时候相当地繁琐，需要手动地将url地址从com变到daily，那就写个插件试试。

需求：将输入的taobao.com修改为daily.taobao.net

 

chrome扩展是由一些列js和html组成，由一个json格式的文件来定义，名为manifest.json，这个名字貌似是固定的，官方有一些demo，大致看一下就知道怎么写了，详细的话还需要查询api。

 

manifest.json：

 

{
	"name": "daily domain Extension",
	"version": "1.0",
	"description": "The first extension that I made.",
	"background_page": "background.html",
	"page_action": {
	"default_icon": "icon.png",
	"default_title":"toggle daily and real environment"
	},
	"content_scripts": 
	[{
	  "js": [ "devdomain_finder.js"],
	  "matches": [ "http://*.taobao.com/*", "https://*.taobao.net/*" ],
	  "run_at": "document_start"
	}],
	"permissions": ["tabs"]
}

devdomain_finder.js:

 

var domain_dev = {
	
	toDev:function(url, domain) {
		//www.taobao.com -> www.daily.taobao.net
		var domain_url = domain.replace("taobao.com", "daily.taobao.net");
		return "http://"+ domain_url + url.slice(url.indexOf("taobao.com")+"taobao.com".length);
	},
	
	isTaobaoDev:function(domain){
		if(domain == ""){
			return false;
		}
		if(domain.indexOf("taobao.com") != -1) {
			return true;
		}
		return false;
	}
};

if(domain_dev.isTaobaoDev(document.domain)){
	chrome.extension.sendRequest({href: domain_dev.toDev(location.href, document.domain)});
}

 

 

background.html

 

<script>
chrome.extension.onRequest.addListener(function(request, sender) {
	chrome.pageAction.show(sender.tab.id);
	
	chrome.pageAction.onClicked.addListener(function(tab){
		chrome.tabs.update(tab.id, {url:request.href});
	});
});
</script>

最后才发现一个简单的功能实现起来竟然要写这么多。。。。