你的分享就是我们的动力 ---﹥

开发google浏览器chrome的JS插件

时间:2013-06-05 15:55来源:www.chengxuyuans.com 点击:

做测验,目标是编写一个JS插件,并安装在chrome浏览器里头,当我们通过使用chrome打开该网址的时候,页面的按钮自动变成可用状态。下面是开始步骤:

1、开始编写chrome的JS插件程序。既然要写chrome插件,肯定要按chrome开发规范来做。根据规范,首先建一个文件夹,如c:\jsdemo\,在该文件夹下新建一个名为manifest.json 的文本文件,并按实际情况放一个图片文件,作为插件的图标。文本的内容和解释如下:

文本内容:

{
"manifest_version": 2,
"name": "My First Extension",
"version": "1.0",
"description": "The first extension that I made.",
"browser_action": {
"default_icon": "xml.gif"
},
"permissions": [
"http://*/",
"bookmarks",
"tabs",
"history"
] ,
"content_scripts": [
{
"matches": ["http://58.22.105.164:7002/jdha-client/flowassistant/*"],
"css": ["mystyles.css"],
"js": ["test.js"]
}
]
}

2、从上面的定义可以看出,该插件将会在浏览器打开我们指定的网址的时候,会自动加载test.js这个脚本文件,现在我们开始编写test.js文件,内容如下:

document.getElementById("btn1").disabled=false;

3、到此,我们的插件程序编写完毕了,我们开始将插件安装在 chrome浏览器里头,步骤如下2图:

 

点击chrome右上角的图标--》工具--》扩展程序,显示下图:

选择"开发者模式"--》"载入正在开发的扩展程序"--》选择我们新建的脚本文件夹;如果修改了脚本,可以点击"重新加载",安装完毕后,在chrome的右上角就会出现这个插件的图标。到此步骤,恭喜你,开发完毕!

4、开始测验吧:

打开网址

http://58.22.105.164:7002/jdha-client/flowassistant/3.jsp ,我们发现这里的按钮已经变成可用状态了。

5、你已经掌握了chrome的JS插件开发的基本技能,赶紧开动脑筋吧,你是否可以用这个技能,去干很多坏事?哈哈哈哈哈

6、官网的开发指南:

https://developer.chrome.com/extensions/getstarted.html

https://developer.chrome.com/extensions/content_scripts.html

转载注明地址:http://www.chengxuyuans.com/javascript/63981.html