Chrome扩张开发教程

2013-11-06

Chrome扩展开发教程{manifest_version : 2, // 必须有name: 测试扩展程序,version: 1.0.0,desc

Chrome扩展开发教程
{ "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对象。

热点排行

Web前端

Chrome扩张开发教程