Chrome Extension的manifest.json文件

近期看到隔壁组开发写了一个Chrome扩展来提升Agile Planning的效率，动了也想鼓捣鼓捣的心思。然后上网百度（确实有点low了）一些资料来研究Chrome扩展具体是个啥东西~

主要参考资料来自于图灵社区的开源电子书籍：《Chrome扩展及应用开发》。感谢作者Sneezry和图灵社区的工作。其他的资料建议直接参考Google的官方文档：https://developer.chrome.com/extensions/getstarted 当然Google的东西还是需要自备梯子的，不方便使用梯子的看上面那本书来入个门应该够了。

Chrome扩展以及应用简单来说就是一系列文件的集合，这些文件包括HTML，CSS，JavaScript，图片以及manifest.json等。都是使用前端的技术开发，对于前端熟悉的同学在搞清楚基本结构和API之后应该可以轻松搞定。对于我这样的初级菜鸟来说，可以借这个机会结合实践来学习前端的知识。

扩展和应用是很像的东西，两者有很多共享的属性定义。扩展只能运行在Chrome内部，需要先运行Chrome再运行扩展。应用则可以直接调用Blink内核来独立工作。

在组成扩展或应用的一系列文件中，manifest.json是一个必备且必须叫这个名字的文件。这个文件是Chrome读取扩展/应用的入口，浏览器根据此文件来进行扩展的渲染。文件内容是按照一定格式描述的扩展/应用的相关信息，如扩展名称、版本、更新地址、请求的权限、扩展的UI界面入口等等。从文件的“扩展名”就可以看出，文件使用的是json格式来保存的信息，关于json格式的语法请自行百度~（很简单的）。

manifest中的大部分属性对于扩展和应用来说是共用的，个别的只能适用于其中一种，不能同时出现在同一个manifest文件中。

Chrome扩展的manifest必须包含：name, version, manifest_version

Chrome应用的manifest必须包含：name, version, manifest_version, app

其中manifest_version属性的值现在只能是2

其他常用可选属性有：browser_action, page_action, background, permission, options_page, content_scripts.

至此其实可以开始写一个很简单extension练手（例子来自上面那本书）。

目标是完成一个扩展，点击之后可以显示当前的时间。

首先是manifest.json文件

{
	"manifest_version": 2,
	"name": "我的时钟",
	"version": "0.0.1.0",
	"description": "First Chrome Extension",
	"browser_action":{
		"default_title": "My Clcok",
		"default_popup": "popup.html"
	}
}

在上面的文件中，我们可以看到name属性定义了扩展的名称。description属性我们可以自己写一些对扩展的描述。version属性则定义了改扩展现在的版本，它最多可以有三个.分隔的四段数字组成，每段数字不超过65535且不能以0开头，但是可以为0. 如果扩展后续进行更新的话，新版本号必须比旧版本号高，比较顺序则从左向右分段比较。以上三个信息都将在扩展安装之后显示在Chrome的extension management页面。

browser_action属性指定扩展在浏览器中的行为。default_title为鼠标悬停在扩展图标上时显示的文字信息，default_popup是一个html文件地址，是指定扩展被点击后所显示的页面文件位置。

在看懂manifest中各个都是干嘛的之后，自然就该开始写那个popup.html

<html>
<head>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}

body {
	width: 200px;
	height: 100px;
}

div {
	line-height: 100px;
	font-size: 42px;
	font: Ariel;
	text-align: center;
}
</style>
</head>
<body>
<div id="clock_div"></div>
<script src="./my_clock.js"></script>
</body>
</html>

由于我们所显示的并不是一个完整HTML页面，所以其中省略了很多标准的tag，当然写出来也没问题，只是没啥用而已。另外值得注意的是其中通过script标签引用了一个外部的js文件。这是由于Chrome并不允许在HTML中直接嵌入JavaScript代码，inline-script也是被禁止的。所以引入外部js文件来实现事件以及元素与事件的绑定。

so……接下就需要实现那个my_clock.js

function my_clock(el){
	var today = new Date();
	var h = today.getHours();
	var m = today.getMinutes();
	var s = today.getSeconds();
	m = m>10?m:('0'+m);
	s = s>10?s:('0'+s);
	el.innerHTML = h +":"+m+":"+s;
	setTimeout(function(){my_clock(el)},1000);
}

var clock_div = document.getElementById('clock_div');
my_clock(clock_div);

当当~~当~到此一个简单的显示时间的扩展就完成，将其加载到Chrome之中就可以看效果啦~（怎么加载？嘿嘿，你猜~~or百度一下？）

Chrome Extension的manifest.json文件

猜你喜欢