文章介绍:这篇文章的内容很简单,很基础,大牛绕道,小白(如果比我还白的话)可以一看。
扩展是在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。
其他的编写功能更强的扩展程序的话, 额... 以后有需求的时候再研究研究...