Chrome扩展开发教程

参考教程: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定义如下:

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

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

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

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

然后在popup.js中写:

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

 

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

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

$('document').ready(function() {
    $('#yclick').bind('click', 
        function(){alert("yes")
    }); 
});

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

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

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

 使用桌面通知:

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

var notification = webkitNotifications.createNotification(
        'images/email_open.png',  // icon url - can be relative
        '通知消息',  // notification title
        '明天放假!'  // notification body text
        );  
    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

设置方法如下所示:

"web_accessible_resources" : [
        "images/email_open.png"
    ],

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

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

扩展右键菜单:


manifest.json设置权限:

"permissions": [

"contextMenus"

]

background.js中写代码:

function background_init() {
    chrome.contextMenus.create({
        type: "normal",
        title: "访问邻购网",
        onclick: function(){chrome.tabs.create({url: "http://www.lingou.com"});}
    });
    chrome.contextMenus.create({
        type: "normal",
        title: "访问邻购云POS系统",
        onclick: function(){chrome.tabs.create({url: "http://pos.lingou.com"});}
    });
    chrome.browserAction.setBadgeText("abcd");

}
background_init();

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

相关推荐