Develop chrome extension study
I spent a day in reading the chrome extension development. Its main point is aboout manifest.json and backgroud.html and popup.html.
http://code.google.com/chrome/extensions/ 官方文档
一个扩展的主要内容.crx本质上是一个zip压缩包包括： A manifest file：只是配置信息，没有任何可执行代码 One or more HTML files (unless the extension is a theme) Optional: One or more JavaScript files Optional: Any other files your extension needs — for example, image files 一个扩展中的所有页面可以互相访问，调用函数以及DOMs Content Scripts:如果需要和当前页面进行交互，可以使用内容脚本Content scripts，可以把它看作是当前载入页面的一部分。它可以获取页面的细节如DOMs，从而修改页面。类似于油猴脚本,但是不能和页面中的js交互。可以通过消息和Background Page交互，发送请求。 一个扩展只能有一个Browser Actions或者Page Actions。 Browser Actions:就是浏览器菜单栏上图标行为，可以对所有页面起作用,适合广泛的应用，不适合仅用于几个页面的应用。包括设置图标，提示文字和弹出页面。图标大小为19*19,Badge在icon上显示文本，4字符。 Page Actions：图标在地址栏里默认不显示，表示当前页可用的行为，如rss或者幻灯方式显示页面的图片。 Background Page:只要浏览器打开都在后台运行任务。关闭浏览器就自动结束。它可以根据状态实现UI包括Browser Actions和Page Actions，如setBadgeText()函数就要在该文件中进行设置。一些API函数也都在这里执行。它相当于一个后台程序。 API中很多函数是异步的，使用的是callback性质的回调函数，返回的值在函数的参数中。扩展的js运行在沙箱中。 支持Cross domain XMLHttpRequest，在Permission中指定域 chrome.i18n 本地化 debug调试：右键点击扩展图标->审查扩展内容 打开开发人员工具 选择sripts标签 单击需要的行号标记断点 在console下运行location.reload()重新执行Javascript脚本 右侧的工具栏中可以看到变量信息和调试工具。 事件处理：chrome.tabs.onCreated.addListener(function(tab) { appendToLog('tabs.onCreated --' + ' window: ' + tab.windowId + ' tab: ' + tab.id + ' index: ' + tab.index + ' url: ' + tab.url); }); 注册事件监听器用addListener(). addListener() 的参数通常定义为一个处理事件的函数，这个函数的参数由要处理的事件决定。例如chrome.tabs.onCreated()有一个Tab object作为参数描述新建的标签页。 通过var imageUrl = chrome.extension.getURL('mm.jpg'); 获取扩展中图片的实际完整地址 manifest.json [pre lang="javascript" line="1"]{ "name": "My First Extension", "version": "1.0", "description": "The first extension that I made.", "background_page": "background.html", "browser_action": { "default_icon": "icon.png", "default_title": "Extension Study" //"default_popup": "popup.html" }, "options_page": "options.html", "permissions": [ "tabs", "http://*/*", "https://*/*" ] }[/pre] background.html <html> <head> <script> //setBadgeBackgroundColor chrome.browserAction.setBadgeBackgroundColor({color:[255,255,25,126]}); //setBadageText on icon chrome.browserAction.setBadgeText({text:"12"}); var flag = true; var test = true; //React when a browser action's icon is clicked. chrome.browserAction.onClicked.addListener(function(tab) { //这个事件和popup相冲突，只能使用其中的一个 var viewTabUrl = chrome.extension.getURL('image.html'); var imageUrl = chrome.extension.getURL('mm.jpg');/* an image's URL */ var imageUrl2 = "http://farm5.static.flickr.com/4123/4800832578_6ee2927da7.jpg" if(flag){//只创建一次新标签 chrome.tabs.create({url: viewTabUrl}); flag = false; } //Look through all the pages in this extension to find one we can use. var views = chrome.extension.getViews(); for (var i = 0; i < views.length; i++) { var view = views[i]; //If this view has the right URL and hasn't been used yet... if (view.location.href == viewTabUrl) { //find the tab we want //...call one of its functions and set a property. if(test){//change image on each click view.setImageUrl(imageUrl); test = false; }else{ view.setImageUrl(imageUrl2); test = true; } break; //we're done } } }); </script> </head> <body></body> </html> an options.html <html> <head><title>My Test Extension Options</title></head> <script type="text/javascript"> // Saves options to localStorage. function save_options() { var select = document.getElementById("color"); var color = select.children[select.selectedIndex].value; localStorage["favorite_color"] = color; // Update status to let user know options were saved. var status = document.getElementById("status"); status.innerHTML = "Options Saved."; setTimeout(function() { status.innerHTML = ""; }, 750); } // Restores select box state to saved value from localStorage. function restore_options() { var favorite = localStorage["favorite_color"]; if (!favorite) { return; } var select = document.getElementById("color"); for (var i = 0; i < select.children.length; i++) { var child = select.children[i]; if (child.value == favorite) { child.selected = "true"; break; } } } </script> <body onload="restore_options()"> Favorite Color: <select id="color"> <option value="red">red</option> <option value="green">green</option> <option value="blue">blue</option> <option value="yellow">yellow</option> </select> <br> <button onclick="save_options()">Save</button> </body> </html>
![http://farm5.static.flickr.com/4123/4800832578_6ee2927da7.jpg"](http://farm5.static.flickr.com/4123/4800832578_6ee2927da7.jpg"){kind=link}