用Javascript编写Chrome浏览器插件

2010-04-12 07:30　来源：天极网软件频道　作者：Claud Xiao　责任编辑：杨玲·yesky　评论(5)
 
 

　　我为Chrome浏览器开发了一款插件，当我向朋友展示自己的插件时，受到他们的羡慕和称赞，那感觉酷极了!通过这次开发，我发现整个开发过程比较简单，有Javascript基础的朋友，都可以开发出属于自己的Chrome插件。

　　插件开发流程

　　1.开发语言和软件
　　开发语言就是Javascript，开发软件选择一款自己熟悉的纯文本编辑器就可以了，例如系统自带的记事本，或者支持语法高亮的UltraEdit。

　　2.设计插件
　　一个完整的插件是由4个部分组成，分别是manifest.json、.js文件、图标和HTML文件，设计插件就是设计这4类文件。manifest.json的作用是定义插件的属性，例如名称、版本、类型等;HTML文件具体实现插件的功能;.js文件是一个跟浏览器互动的脚本。

　　3.载入插件
　　设计好上面几个文件后，就可以将插件载入浏览器中试用一下。首先将它们整理到同一个文件夹中，然后在Chrome的工具栏中选择“扩展程序”，进入扩展管理页，在右侧选择“开发人员模式”，再点击“载入正在开发的扩展程序”按钮，定位到这个文件夹，将整个文件夹载入Chrome中。

　　4.发布插件
　　插件试用没有问题后，不妨将它发布出去让更多人使用。首先将插件所在的文件夹压缩成一个ZIP文件(别顺手压缩成了RAR文件)。然后再到扩展管理页，点击右下角的“获得更多扩展程序”链接，进入Chrome官方插件下载页面，在这个网页的左下角，你能看到“发布扩展程序”的链接，点击链接，上传ZIP压缩文件、添加插件的使用说明和截图，就可以发布插件了。

　　插件设计过程

　　1.制作图标

　　图标的格式为PNG，大小为19×19像素的图标显示在地址栏右侧，大小为48×48像素的图标显示在扩展管理页。

　　2. manifest.json

　　manifest.json定义插件的属性，这个文件的格式比较固定，大家下载代码后，根据自己的实际需要进行简单的更改就可以用了。

以下是代码片段：

　　{"name": "Our Chrome Extension's Name"，
　　"version": "1.0"，
　　"description": "This is the first Chrome extension."，
　　"icons": { "48": "icon48.png" }， //定义图片的大小，可以自己更改
　　"page_action": { "default_icon": "icon19.png" }，//定义图片的名称，可以自己更改
　　"background_page": "background.html"，//定义HTML名称，可以自己更改
　　"permissions": [ "tabs" ]，
　　"content_scripts": [{
　　"matches": ["http://*.google.com/*"]，
　　"js": ["visit.js"]//定义.js文件名称，可以自己更改
　　}]}

　　3. .js文件

　　.js文件文件是连接浏览器和插件的桥梁，最基本的代码就是：chrome.extension.sendRequest();，它的作用是向Chrome的扩展管理程序发送一条请求消息，这条消息将被运行的插件HTML文件捕获。需要注意的是，在这个文件中，可以添加其他代码，例如一些优化代码。

　　4. HTML文件

　　HTML文件是插件的功能文件，插件要实现什么功能全靠这个文件。我以我开发的保持活跃在线插件为例，进行分析。我的插件，每隔一小段时间，随机打开论坛中的一个帖子。

　　在这个插件中，我用到了几个API：chrome.pageAction.show()，用来在浏览器地址栏右侧显示插件的图标;chrome.windows.getCurrent()，用来获取当前浏览器窗口的ID; chrome.tabs.create()，用来建立一个新的标签页;chrome.tabs.remove()，用来关闭打开的标签页。

　　这几个API比较基础，在插件开发中过程一般都用得到，如果要开发复杂的插件，则需要调用更多的API，到http://code.google.com/chrome/extensions去研究一下吧。

　　
//

　　var winid = 0;

　　var tabid = 0;

　　chrome.extension.onRequest.addListener( // 捕获.js文件中传来的请求消息

　　function(request，sender，sendResponse){ // 通过回调函数完成实际工作

　　chrome.pageAction.show(sender.tab.id);

　　chrome.windows.getCurrent(function(Win){ // 获取当前浏览器窗口的ID

　　winid = Win.id

　　});

　　circle();

　　}

　　);

　　function circle(){

　　radomURL = "http://bbs.pediy.com/showthread.php？t=" + Math.floor(100000 + Math.random()*6000); // 随机生成论坛一个帖子的URL

　　chrome.tabs.create({windowId:winid， url: radomURL， selected:false}， function(Tab){tabid = Tab.id}); // 打开上述URL

　　chrome.tabs.remove(tabid); //关闭这个标签页

　　setTimeout("circle()"， 60000); // 每隔60秒，重复上述操作

　　}

　　
// ]]>

以下是代码片段：

　<html><head><script>
　　var winid = 0;
　　var tabid = 0;
　　chrome.extension.onRequest.addListener（ // 捕获.js文件中传来的请求消息
　　function（request，sender，sendResponse）{ // 通过回调函数完成实际工作
　　chrome.pageAction.show（sender.tab.id）;
　　chrome.windows.getCurrent（function（Win）{ // 获取当前浏览器窗口的ID
　　winid = Win.id
　　}）;
　　circle（）;
　　}
　　）;
　　function circle（）{
　　radomURL = "http://bbs.pediy.com/showthread.php？t=" + Math.floor（100000 + Math.random（）*6000）; // 随机生成论坛一个帖子的URL
　　chrome.tabs.create（{windowId:winid， url: radomURL， selected:false}， function（Tab）{tabid = Tab.id}）; // 打开上述URL
　　chrome.tabs.remove（tabid）; //关闭这个标签页
　　setTimeout（"circle（）"， 60000）; // 每隔60秒，重复上述操作
　　}
　　</script></head></html>

 
//

 


用Javascript编写Chrome浏览器插件的更多相关文章

  1. chrome浏览器插件启动本地应用程序

    chrome浏览器插件启动本地应用程序 2014-04-20 00:04:30|  分类: 浏览器插件|举报|字号 订阅     下载LOFTER我的照片书  |     chrome的插件开发这里就 ...

  2. Rest Client(Rest接口调试工具，有保存功配置功能) chrome浏览器插件

    Rest Client(Rest接口调试工具,有保存功配置功能) chrome浏览器插件 下载地址 插件的操作很简单,下面是一些简单的实例. 1.安装 在谷歌应用商城搜索postman,如下图1-1所 ...

  3. chrome浏览器插件window resizer调试webapp页面大小

    chrome浏览器插件window resizer可以调整当前浏览器分辨率大小 可以自定义大小,以适合于andorid和iphone设备

  4. 使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取

    web scraper 下载:Web-Scraper_v0.2.0.10 使用 Chrome 浏览器插件 Web Scraper 可以轻松实现网页数据的爬取,不写代码,鼠标操作,点哪爬哪,还不用考虑爬 ...

  5. Javascript判断Chrome浏览器

    今天分享一下如何通过Javascript来判断Chrome浏览器,这里是通过userAgent判断的,检测一下userAgent返回的字符串里面是否包含“Chrome”, 具体怎么检测是通过index ...

  6. chrome浏览器插件开发经验（一）

    最近在进行chrome浏览器插件的开发,一些小的经验总结随笔. 1.首先,推荐360的chrome插件开发文档:http://open.chrome.360.cn/extension_dev/over ...

  7. 还在为百度网盘下载速度太慢烦恼?chrome浏览器插件帮你解决！

    百度网盘已然成为分享型网盘中一家独大的“大佬”了.时代就是这样不管你喜不喜欢,上网总会遇到些百度网盘共享的文件需要下载.然而,百度网盘对免费用户的限速已经到了“感人”的地步了,常常十多KB/秒的速度真 ...

  8. 强烈推荐 10 款珍藏的 Chrome 浏览器插件

    Firebug 的年代,我是火狐(Mozilla Firefox)浏览器的死忠:但后来不知道为什么,该插件停止了开发,导致我不得不寻求一个新的网页开发工具.那段时间,不少人开始推荐 Chrome 浏览 ...

  9. Google Chrome浏览器插件入门开发

    --1. 在html文件中引用js 文件 --2.在Google Chrome中开发简单插件 1.首先,简单说明一下在html 中引用js 文件: 将kittenbook.html 和 kittenb ...

随机推荐

  1. Write operations are not allowed in read-only mode错误

    (转+作者个人理解) 最近在配置 Structs, Spring 和Hibernate整合的问题: 开启OpenSessionInViewFilter来阻止延迟加载的错误的时候抛出了这个异常: org ...

  2. Linux初识（转）

    文件系统是linux的一个十分基础的知识,同时也是学习linux的必备知识. 本文将站在一个较高的视图来了解linux的文件系统,主要包括了linux磁盘分区和目录.挂载基本原理.文件存储结构.软链接 ...

  3. 动态加载 移除js file

    动态加载.移除.替换js/css文件 stylesheetjavascriptcssfunctionnull <script language="javascript"> ...

  4. replicate-do-db参数引起的MySQL复制错误及处理办法

    replicate-do-db配置在MySQL从库的my.cnf文件中,可以指定只复制哪个库的数据.但是这个参数有个问题就是主库如果在其他的schema环境下操作,其binlog不会被从库应用,从而出 ...

  5. Linux/Unix shell 自动发送AWR report(二)

    观察Oracle数据库性能,Oracle自带的awr 功能为我们提供了一个近乎完美的解决方案,通过awr特性我们可以随时从数据库提取awr报告.不过awrrpt.sql脚本执行时需要我们提供一些交互信 ...

  6. 如何调试Android Framework？

    Linus有一句名言广为人知:Read the fucking source code. 但其实,要深入理解某个软件.框架或者系统的工作原理,仅仅「看」代码是远远不够的.就拿Android Frame ...

  7. Scala下载安装配置（Mac）

    ---恢复内容开始--- 1.访问scala的官网这里下载最新版的scala. 2.解压缩文件包,可将其移动至/usr/local/share下 1 mv /download/scalapath /u ...

  8. 使用java开源工具httpClient及jsoup抓取解析网页数据

    今天做项目的时候遇到这样一个需求,需要在网页上展示今日黄历信息,数据格式如下 公历时间:2016年04月11日 星期一 农历时间:猴年三月初五 天干地支:丙申年 壬辰月 癸亥日 宜:求子 祈福 开光 ...

  9. OPENGL学习笔记整理（五）：着色语言

    有些事情本身就是十分奇怪的.在传统上,图形硬件的设计目的是用于快速执行相同的硬编译指令集.不同的计算步骤可以被跳过,参数可以被调整,但计算本身确实固定不变的.然而,随着技术的发展,却越来越变得可以编程 ...

  10. C++的类成员和类成员函数指针

    类成员函数指针: 用于访问类成员函数,和一般函数指针有区别. 类成员函数处理的是类数据成员,声明类成员函数指针的同时,还要指出具体是哪个类的函数指针才可以.调用时也要通过对象调用. 而对于类的静态成员 ...