记一次使用JS编写Chrome扩展程序的实践

文章介绍:这篇文章的内容很简单，很基础，大牛绕道，小白(如果比我还白的话)可以一看。

扩展是在Web浏览器内部运行的一种小程序，提供额外的服务，比如集成第三方站点或数据源，定制用户浏览器的体验。Google Chrome扩展就是一些文件集合，包括HTML，CSS，JavaScript，图像等，打包为一个zip文件(尽管其后缀是.crx).

扩展程序的基本功能是创建一个Web页面。能够使用浏览器给普通Web页面提供的全部界面元素，包括JavaScript库，CSS样式库，XMLHttpRequest对象等。

扩展程序能够与Web页面或服务器进行交互，还可以通过代码与浏览器功能(比如标签和选项卡)进行交互。

（1）建立简单的扩展程序

第一个步骤是在计算机上建立一个文件夹，用于保存扩展程序的代码。

每个扩展程序都有一个清单文件:manifest.json。它使用JSON格式，提供了关于扩展程序的重要信息。

这个清单文件包含了各种参数和选项，但是，这里我们将从一个基本的示例开始。

现在在新文件夹里创建一个文本文件，命名为manifest.json，输入如下内容:

{
	"name":"My first Extension",
	"version":"1.0",
	
	"manifest_version":2,
	"description":"Hello World extension.",
	"browser_action":{
		"default_icon":"icon.png",
		"default_popup":"popup.html"
	},
	"web_accessible_resources":[
		"icon.png",
		"popup.js"
		]
	}

在同意个文件夹中保存一个图标icon.png，再按照下面的程序清单新建popup.html文件，也保存到这个文件夹。

<!DOCTYPE html>
<html>
<head>
	<style>
		body{
			width:350px;
			}
		div{
			border:1px solid black;
			padding:20px;
			font: 20px normal helvetica,verdana,sans-serif;
			}
	</style>
	<script src="popup.js"></script>
</head>
<body>
</body>
</html>

如下是popup.js中包含JavaScript代码:

function sayHello(){
	var message = document.createTextNode("Hello World!");
	var out = document.createElement("div");
	out.appendChild(message);
	document.body.appendChild(out);
}
window.onload = sayHello;

这段代码要做的，就是在页面加载的时候，创建一个<div>元素，其中包含了消息"Hello world!",并且将该<div>添加到DOM的<body>元素中。下面在chrome的扩展页面中将插件加入进去，具体步骤如下:

进入chrome的添加扩展程序的页面:

选择加载已解压的扩展程序，我的chrome是中文版的，如果是英文版的可以选择Load unpacked Extensions，然后会弹出如下界面，选择自己编写的插件存放的文件夹就可以了。

加载扩展程序后，有些可能还需要手动去启用它，启用完成后，点击图标就会实现插件功能了，具体如下所示:

就这样，我们编写了一个扩展程序输出Hello World。

其他的编写功能更强的扩展程序的话, 额... 以后有需求的时候再研究研究...

记一次使用JS编写Chrome扩展程序的实践

猜你喜欢