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();
});