chrome瀏覽器插件製作入門 - 技術

摘要：ChromeOS以及FirefoxOS的髮展錶現齣來web應用的強大動力，雖然現在還有不少的局限性，但web應用的優勢也在不斷凸顯。在特定的應用場景下Chrome應用能髮揮特有的簡潔、方便、靈活特性。那就讓我們一起學習製作簡單的Chrome插件。

ChromeOS以及FirefoxOS的髮展錶現齣來web應用的強大動力，雖然現在還有不少的局限性，但web應用的優勢也在不斷凸顯。在特定的應用場景下Chrome應用能髮揮特有的簡潔、方便、靈活特性。主要使用HTML、CSS、JS進行開髮，開髮難度相對較低。那就讓我們一起學習製作簡單的Chrome插件。

首先，我們爲什麽要用Chrome插件。在特定的場景下Chrome插件能以最小的代價達到我們想要的目的，比較廣爲人知的是瀏覽器上的12306搶票軟件（其實質就是一箇Chrome插件），還有較多的在線應用比如酷狗音樂、webQQ等的插件應用版，還有一些遊戲等。看看穀歌應用商店裡的那些韆奇百怪的應用就會感歎：原來每天隻用來瀏覽網頁的瀏覽器可以這兒強大，也就不會對Chrome髮展成爲OS感到特彆的不解。其次，我們要知道網頁不是隻有聯網纔能看到、隻不過大部分我們看到的是網絡上的網頁。使用web技術做前端顯示的效果隨著HTML5/CSS3的髮展也越來越好，深度linux的桌麵就使用一部分web技術，效果很贊。

舉箇例子：每天看人人上的各種廣告很頭疼，怎麽纔能屏蔽掉牠呢？當然有很多思路去實現，比如路由器去把廣告連接榦掉，還有一箇實現便是在瀏覽器解析完網頁後將廣告部分內容影藏或者去掉，而這箇工作Chrome插件實現起來正好方便。有時網站上的某些操作不方便，自己又實現無法忍受就可以去寫箇插件來改寫網頁。之所以能做到這些是因爲插件可以調用更多瀏覽器的API以及權限。當然這也導緻瞭插件的不安全性，比如一箇很定曏的應用卻申請瞭訪問全部網頁數據的權限（類似於現在某些垃圾android應用的權限請求），所以安裝第三方插件要謹慎，考慮到此方麵的原因新版本的穀歌瀏覽器默認是不允許安裝非應用商店的應用的（這也給開髮者一定程度上帶來一定的睏擾）。

曾經某互聯網企業搞過某箇活動需要單一頻繁的進行幾步網頁操作，作者就寫瞭箇插件讓瀏覽器自己後颱自己刷去瞭（雖然結果很慘）。這篇文章就以製作一箇簡單記事本插件爲樣例進行插件製作的學習。

資料：中文版Chrome應用介紹 https://crxdoc-zh.appspot.com/apps/about_apps 建議先將相關知識學習一下。

製作插件應用比較重要的意識是能離線的地方盡量離線，這樣可以保證應用的打開和關閉速度以及使用範圍。可以考慮線上進行數據的備份。

一、文件結構：

上圖是基本文件結構。主要就是入口的manifest文件（使用json語法），然後是各箇動作的頁麵以及用到的js文件CSS文件。

二、執行順序

應用有幾種執行事件，我們需要用到的是單擊彈齣pop窗體的一種，其他的可以在文章開頭給齣的文檔中查詢。還有一種每次網頁加載都會把JS加載進去（可以做好多好玩的事，比如進入特定網頁時進行特定操作，彈箇問好什麽的）。

三、實現思路

在瀏覽器的右上角有一箇notepad的小圖標，點擊圖標彈齣幾箇記事本列錶，列錶下方有添加、設置，記事本標題右方有刪除、編輯功能，點擊標題進入查看詳情頁麵。設置可以進行窗口大小，是否進行雲端衕步備份、賬號的設置等功能。

大概是有一箇主頁麵、添加頁麵設置頁麵、編輯頁麵。服務器端的數據更新功能等。還有若榦圖片、CSS、JS文件。

四、相關知識。

1.HTML、CSS、JS是基本知識。

2.html5的本地存儲。http://www.cnblogs.com/xiaowei0705/archive/2011/04/19/2021372.html

五、代碼實現

1.manifest.json

{
  "manifest_version": 2,
  "name": "CJL notepad",
  "description": "This extension HTML5 notepad.",
  "version": "1.0",
  "browser_action": {
    "default_icon": "assets/images/CJL.png",
    "default_popup": "popup.html"
  },
  "permissions": [
	"contextMenus"
  ]
}

2.popup.html

<!doctype html>
<html>
  <head>
    <title>notepad</title>
    <style>
      body {
        min-width: 380px;
        min-height: 280px;
      }
	  #list{
	  display:block;
	  }
	  li{
	  padding-top:20px;
	  }
	  a{
	  padding-top:5px;
	  }
	  #add{
	  display:none;
	  }
	  #edit{
	  display:none;
	  }
	  #message{
	  display:none;
	  }
	  #title{
	  width:90%
	  }
	  #content{
	  width:90%
	  }
    </style>
	<script src="assets/libs/jquery-1.7.2.min.js" type="text/javascript"></script>
	<script src="assets/scripts/popup.js"></script>
	<!-- id: title: content: addDate: editeDate:  -->
  </head>
  <body>
	<div id="list" >
	</div>
	<div id="edit" >
		標題<input id="title" />
		<br>
		內容<textarea id="content" ></textarea>
		<br>
		<a id="saveBut">保存</a><a id="resetBut">取消</a>
	</div>
	<br>
	<div id="message" >
	</div>
	<br>
	<a id="createBut">創建</a>
	<a id="reloadBut">刷新</a>
  </body>
</html>

3.popup.js

function create()
{
	$('#title').val();
	$('#content').val();
	$('#edit').show();
	
}
function save()
{
	if($('#title').val() == "")
	{
		$('#message').html("標題不能爲空");
		$('#message').show();
	}
	else
	{
		id        = Date.now();
		title     = $('#title').val();
		content   = $('#content').val();
		addDate   = Date.now();
		editeDate = Date.now();
		note={title:title,content:content,addDate:addDate,editeDate:editeDate};
		notes = JSON.parse(window.localStorage.getItem('notes'));
		if(notes == null)notes = new Object();
		notes[Date.now()] = note;
		window.localStorage.setItem('notes',JSON.stringify(notes));
	}
	$('#edit').hide();
	reloadList();
}
function reloadList()
{
	notes = JSON.parse(window.localStorage.getItem('notes'));
	html = "";
	html += "<ul>";
	for(note in notes)
	{
		html += "<li id=view"+note+">"+notes[note].title+"</li><a id=delete"+note+">刪除</a>";
	}
	html += "</ul>";
	$('#list').empty();
	$('#list').append(html);
	for(note in notes)
	{
		$("#view"+note).click(view);
		$("#delete"+note).click(dlt);
	}
	$('#message').hide();
}
function view()
{
	id = this.id.substr(4);
	$('#title').val(notes[id]['title']);
	$('#content').val(notes[id]['content']);
	$('#edit').show();
}
function dlt()
{
	id = this.id.substr(6);
	console.log(id+notes[id]);
	delete notes[id];
	console.log(notes);
	window.localStorage.setItem('notes',JSON.stringify(notes));
	reloadList();
}
$(document).ready(function(){
    $("#createBut").click(create);
	$("#saveBut").click(save);
	$("#resetBut").click(function(){$('#edit').hide()});
	$("#reloadBut").click(reloadList);
	reloadList();
});