Chrome扩展开发教程

Chrome扩展开发教程

• 博客分类： 
• web

 

参考教程：http://open.chrome.360.cn/extension_dev/overview.html

360极速浏览器是使用谷歌浏览器内核构建的，其支持的扩展和谷歌浏览器相同，所以可以根据这个翻译过的谷歌浏览器扩展开发文档来学习。

 

看了很多关于chrome开发教程，很感谢作者的热心，不过在使用中多有疑惑，经过各处资料查找和查看google文档，学会了一些扩展开发的技巧，这里整理如下：

 

chrome浏览器扩展安装后可以实现如下功能：

1. 如果需要，在地址栏右侧放置一个小图标，点击小图标，会弹出浮动层，里面是一个html文档，这个文档可以包含html代码和js的引入（不可直接写js，而且所有引入的js必须在扩展包内，见：http://developer.chrome.com/extensions/contentSecurityPolicy.html）
2. 如果需要，我们可以重新定义chrome新建标签，也是一个html文档哦。
3. 使用桌面通知。
4. 扩展右键菜单。

暂时先这么多，我学会更多我再添加内容在这里。。。。。。。。。。

 

开发流程：

1：本地创建一个目录，用于存放扩展项目文件。

2：目录中写文件manifest.json，这个文件是扩展配置，由chrome浏览器读取并加载其中指定的内容。

3：实现manifest.json文件中的各个项目。

 

举例：

manifest.json定义如下：

 

Js代码  

1. {  
2.     "manifest_version" : 2, // 必须有  
3.     "name": "测试扩展程序",  
4.     "version": "1.0.0",  
5.     "description": "xxx开发团队",  
6.     "icons": {"128" : "logo.png" }, // 扩展图标设置  
7.     "permissions": [ // 扩展允许访问哪些地址  
8.         "http://*/*"  
9.     ],    
10.     "background": { // 后端一直运行的js，全局的，生命周期从浏览器打开到浏览器关闭  
11.         "scripts": ["background.js"]  
12.     },    
13.     "browser_action" : { // 扩展地址栏右侧一个图标，点击出现default_popup指定的页面  
14.         "default_title": "xx测试扩展",  
15.         "default_icon": "logo.png",  
16.         "default_popup" : "popup.html"  
17.     },    
18.     "chrome_url_overrides": { // 覆盖chrome新建标签  
19.         "newtab": "newtab.html"  
20.     }     
21. }  

详情参考：http://developer.chrome.com/extensions/manifest.html

 

然后在popup.html中写html源码，并包含必须存在于项目目录中的js文件即可，这就是说，html不能内嵌任何js代码，必须在html里指定class或id，然后在js文件中为其绑定动作。

比如写：<script src="popup.js"></script>

然后在popup.js中写：

Js代码  

1. document.addEventListener('DOMContentLoaded', function () {  
2.   document.querySelector('button').addEventListener('click', clickHandler);  
3.   main_run();  
4. });  

 

这里要注意的是，为了让页面全部加载后再执行js，不要在js里直接写js运行代码，而要包含在document.addEventListener函数中。

上述函数可以用jquery功能代替：

Js代码  

1. $('document').ready(function() {  
2.     $('#yclick').bind('click',   
3.         function(){alert("yes")  
4.     });   
5. });   

 

 

再建立background.js，写一些需要后台保留状态的代码。参照：http://dev.chromechina.com/thread-2255-1-1.html

 

为了让某些数据在下次浏览器打开还能继续使用，需要用到html5的本地存储功能。

 

 

-----------------------------------------------------------------------

 使用桌面通知：

为了使用一些功能，必须在manifest.json的permissions中设置，比如要使用桌面通知，就需要在这个字段设置：“notifications”。设置后，在需要的地方加入通知即可显示，比如：

Js代码  

1. var notification = webkitNotifications.createNotification(  
2.     'images/email_open.png',  // icon url - can be relative  
3.     '通知消息',  // notification title  
4.     '明天放假！'  // notification body text  
5.     );    
6. notification.show();  

 这里使用了images下的图片资源，需要在manifest.json中指定允许访问这个图片，否则会提示错误：Denying load of chrome-extension://{ext_id}/images/email_open.png. Resources must be listed in the web_accessible_resources manifest

设置方法如下所示：

Js代码  

1. "web_accessible_resources" : [  
2.     "images/email_open.png"  
3. ],  

 

-----------------------------------------------------------------------

 

 

 

-----------------------------------------------------------------------

扩展右键菜单：

manifest.json设置权限：

"permissions": [

"contextMenus"

]

background.js中写代码：

Js代码  

1. function background_init() {  
2.     chrome.contextMenus.create({  
3.         type: "normal",  
4.         title: "访问邻购网",  
5.         onclick: function(){chrome.tabs.create({url: "http://www.lingou.com"});}  
6.     });  
7.     chrome.contextMenus.create({  
8.         type: "normal",  
9.         title: "访问邻购云POS系统",  
10.         onclick: function(){chrome.tabs.create({url: "http://pos.lingou.com"});}  
11.     });  
12.     chrome.browserAction.setBadgeText("abcd");  
13.   
14. }  
15. background_init();  

 扩展鼠标右键在每个页面都起作用，所以放在共用的后端js中是最方便的，另外，background.js中用window.location.href是不行的，因为它不是某个页面调用的所以没有window对象。