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 οnlοad="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 οnclick="save_options()">Save</button> </body> </html>
轉載于:https://www.cnblogs.com/aquar/archive/2010/07/18/2890726.html
總結
以上是生活随笔為你收集整理的Develop chrome extension study的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 毕业了，总结一次
- 下一篇： SQL SERVER中直接循环写入数据