欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识！
您现在的位置是： 首页

Chrome Extension的manifest.json文件 Chrome Extensionmanifest

程序员文章站 2022-05-23 09:02:41
...

近期看到隔壁组开发写了一个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

上一篇： 96层3D闪存产量将扩大：加速SSD价格下跌

下一篇： 佩奇：微软以专利手段打压Android将自食其果

推荐阅读