小白菜的博客

一个具有程序员所有缺点的程序员的博客

记一次使用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。

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

阅读更多
个人分类: javascript idea实现
想对作者说点什么? 我来说一句

没有更多推荐了,返回首页

不良信息举报

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

最多只允许输入30个字

加入CSDN,享受更精准的内容推荐,与500万程序员共同成长!
关闭
关闭