閱讀485 返回首頁    go 阿裏雲 go 技術社區[雲棲]

Chrome（穀歌）瀏覽器擴展開發初探

        FF（火狐）瀏覽器插件已經完成了，確實也很好用，但是有些同學不習慣使用ff瀏覽器，喜歡使用穀歌瀏覽器，點擊這裏查看上篇問題。那麼我們就開發一個chrome的擴展，實現訂餐功能。
        在FF瀏覽器擴展中，我們使用xul定義FF的界麵，使用javascript實現處理邏輯，在穀歌瀏覽器中，我們同樣不需要學習activeX,也不需要學習com，隻是使用html和javascript即可實現開發穀歌瀏覽器擴展的功能，隻是為了簡單起見，我們這次手動點擊按鈕，出發訂餐操作。
         第一步先學習下穀歌插件知識，推薦兩篇不錯的問題Chrome插件開發之一: 搭建基本結構https://gdfans.net/?p=14&cpage=1，Chrome插件開發之二: 添磚加瓦https://gdfans.net/?p=210  。 相對於firefox瀏覽器，穀歌瀏覽器的擴展開發簡單的很多。關於基本入門上麵兩篇文章已經介紹的很詳細了。這裏順便說下穀歌擴展管理方麵的東東。你可以通過工具-》擴展程序來管理你的擴展，新開發的擴展可以通過

裏麵的“載入正在開發的擴展程序…”來打開正在開發擴展的目錄，即可在擴展程序中管理你的程序。開發完成後，也不用像FF擴展那樣需要手工打成zip，再修改為xpi後綴。而在穀歌瀏覽器中，隻需要按下“打包擴展程序”即可完成打包，打的包會有兩個，crx後綴的為打包文件，可以直接交給別人安裝，pem是私鑰文件，下次打包的時候使用。
有了以上知識，我做出來的穀歌瀏覽器擴展是這個樣子的

點擊“訂”按鈕觸發登陸網站並執行操作，詳細代碼點擊此處獲得。

附上兩篇介紹穀歌瀏覽器擴展的文章

1. 文件列表

本文引用項目 urlcmt 作為開發示例（urlcmt是一個可以對任意網頁進行評論的Chrome插件，你可以下載源代碼，或安裝此插件），為了讓插件正常工作，至少需要這幾個文件：

它們的作用分別是：

  • icon.png: 插件工具欄圖標
  • manifest.json: 控製整個插件行為的配置文件
  • popup.html: 點擊插件圖標後彈出的窗口，是插件的主界麵

如果希望插件具有更加合理的結構和功能，則還可以有以下文件：

他們的作用分別是：

  • imgs: 存放插件界麵圖片
  • background.html: 在此運行的代碼不會因為popup.html窗口消失而停止運行
  • icon_128.png: 在插件描述中作為插件的Logo
  • main.css: 插件界麵元件的樣式表
  • main.js: 插件中可以使用的js函數

2. 文件說明

manifest.json 為整個插件的主控文件，基本功能描述如下：

01 {
02     "name": "urlcmt",
03     "version": "1.0",
04     "description": "網頁評論 Comment the web !",
05     "default_locale": "zh_CN",
06     "browser_action": {
07         "default_icon": "icon.png",
08         "popup": "popup.html"
09     },
10     "icons": {
11         "128": "icon_128.png"
12     },
13     "permissions": [
14         "tabs",
15         "https://api.gdfans.net/"
16     ]
17 }

其中：

  • 第2行: 所有代碼思想的核心，它就是插件的名稱！
  • 第3行: 插件版本，發布插件時會生成一串密文，那時會用到
  • 第4行: 描述信息，會顯示在插件屬性裏
  • 第5行: 默認編碼為中文
  • 第7行: 指定插件圖標的路徑
  • 第8行: 指定 popup.html 文件的路徑
  • 第11行: 指定 128 像素大小的圖標的路徑
  • 第14行: 此權限支持讀取標簽（tab）中的信息
  • 第15行: 此權限支持向 https://api.gdfans.net/ 發送 Ajax 請求

popop.html 為整個插件的界麵，代碼如下：

01 <!DOCTYPE html>
02 <metahttp-equiv="Content-Type"content="text/html; charset=UTF-8"/>
03 <linkrel="stylesheet"href="main.css"/>
04 <scripttype="text/javascript"src="./url.js"></script>
05 <scripttype="text/javascript"src="./main.js"></script>
06  
07 <bodyonload="init()">
08     <divid="pop_msg"class="align_center colo_aaa valign_center"></div>
09     <divclass="submit_form align_center">
10         <formid="cmt_submit_form"onsubmit="submit_cmt();return false;"action="#"method="POST">
11             <textarearows="1"cols="6"id="cnt"class="align_left"onfocus="show_submit_form();"maxlength="200"></textarea>
12             <br/>
13             <divclass="align_right">
14                 <inputtype="submit"id="sbmt"value="submit">
15             </div>
16         </form>
17     </div>
18     <divid="cmt_cnt"></div>
19 </body>

這裏注意：

  • 第1行: 加上這個以後，顯示插件界麵時，不會在底部出現一大片空白區域
  • 其餘都和普通 web 頁麵開發相同，空的 div 供 Ajax 填充從服務端獲取的數據

3. 實現功能 – 插件初始化

有了 manifest.json 和 popup.html，就可以實現最基本的 hello world 的功能了，接下來需要為插件增加其它功能，這些功能可以用 Javascript & Ajax 實現，對此項技術不太熟悉的同學，請點擊這裏 查閱 w3c school 裏的教程。

這些 Javascript & Ajax 代碼可以寫在 main.js 中，因為不僅 popup.html 要用到，後續要介紹的 background.html 中也要用到，所以為了重用起見，還是放在單獨的文件裏比較好。main.js 中可以包含一個 init() 函數，用以進行插件的初始化工作

1 function init()
2 {
3     // 隱藏編寫評論的表單，以增大頁麵的可用區域
4     hide_submit_form();
5     // 從服務端獲取當前網頁的評論數據，並顯示在界麵上
6     refresh_cmt_cnt(1);
7 };

然後在 popup.html 的 body 標簽中，加上

1 <bodyonload="init()">

即可。

4. 實現功能 – 調用 Chrome API

Chrome為插件提供了可以通過 Javascript 調用的 API，在插件的 Js 代碼可以直接使用，例如想獲取當前標簽中的 URL 地址，並向服務端發送 Ajax 請求獲取這個 URL 對應的評論信息，可以這麼寫：

01 function refresh_cmt_cnt(page_no)
02 {
03     // 創建 Ajax 請求對象
04     varxhr =newXMLHttpRequest();
05  
06     // 使用Chrome提供的tab接口獲取當前選中的tab的信息
07     chrome.tabs.getSelected(null,function(tab) {
08         // 當 getSelected 函數執行成功以後會執行到這裏
09         varcmt_cnt_obj = document.getElementById("cmt_cnt");
10  
11         // 構造 POST 數據，可以通過 tab.url 來獲取標簽的 URL 地址
12         // encodeURIComponent 函數用來轉義特殊字符以免發生衝突
13         // 在服務端可以用 PHP 函數 urldecode 再轉義回來
14         varpost_data ='cmd=1505&alt=json&url='+
15                         encodeURIComponent(tab.url) +
16                         '&page_size=5&page_no='+ page_no;
17  
18         // 指定提交的目標地址
19         xhr.open("POST","https://api.gdfans.net/",
20                  true);
21         xhr.setRequestHeader("Content-Type",
22                              "application/x-www-form-urlencoded");
23  
24         xhr.onreadystatechange =function() {
25             if(xhr.readyState == 4) {
26                 // 當 Ajax 請求接收完所有返回數據時會執行到這裏
27                 // 因為服務端返回的數據為 json 格式，因此使用前需要解析以下
28                 varresp = JSON.parse(xhr.responseText);
29                 if(! resp) {
30                     show_popmsg(null,'獲取數據失敗', 3);
31                     returnfalse;
32                 }
33  
34                 // 解析完成以後就可以讀取返回的數據了
35                 if(resp.result == 1501) {
36                     clear_popmsg();
37                     returnfalse;
38                 }
39  
40                 // 將數據顯示在頁麵上
41                 for(varkeyin resp.data) {
42                     htmltxt += resp.data[key]['cmt'] +', ';
43                 }
44  
45                 cmt_cnt_obj.innerHTML = htmltxt +"\n";
46             }
47         }
48  
49         // 發送 Ajax 請求，Ajax 執行成功以後會調用上麵介紹的代碼
50         xhr.send(post_data);
51     });
52  
53     returntrue;
54 }

至此一個可以從服務端獲取 URL 評論數據的簡單插件就製作完成了，隻要你熟悉 Web 開發，開發 Chrome 插件就是小菜一碟～
好了，休息一會，接下來的文章再繼續分享其它內容 ^-^

接著上一篇文章《Chrome插件開發之一：搭建基本結構》開始說起，有了基本結構，urlcmt的基本功能已經實現了，接下來需要對插件進行完善和修飾，下麵介紹一些基本結構以外的內容。

1. 關於Background.html

popup.html中定義的Javascript變量會在popup.html頁麵關閉時被釋放，那麼如何保存一些一直需要使用的變量呢？這就是background.html的作用，background.html頁麵中定義的javascript變量會在Chrome瀏覽器生命期中一直存在，可以把需要一直存在的數據保存在這裏。

那麼我們如何在background.html中保持popup.html頁麵中的數據呢？可以這麼寫，先在background.html中定義好變量，例如以下保存用戶登錄信息的變量

1 var global_email ="";
2 var global_passwd ="";

然後在popup.html中用以下方式來引用這些變量，可以改變或者讀取變量的值

1 var bgpg = chrome.extension.getBackgroundPage();
2 bgpg.global_email = "somebody@domain.com";
3 bgpg.global_passwd = "password";

2. 將數據保存在磁盤

Chrome本身沒有提供用於保存變量的值的接口，不過可以通過Javascript操作Cookie保存數據，另外還有一種更加方便的保存數據方式，那就是使用HTML5的localStorage功能保存數據，這也是Chrome插件開發手冊中推薦的方式，例如我們希望保存剛才在background.html中定義的用戶登錄信息，隻需要執行以下代碼即可

1 localStorage['email'] = golbal_email;
2 localStorage['passwd'] = global_passwd;

這樣就算關閉了Chrome瀏覽器，用戶的登錄數據還是一樣不會丟失，下次啟動Chrome瀏覽器時，隻需要執行以下代碼就又可以獲取這些登錄數據了

1 global_email = localStorage['email'];
2 global_passwd = localStorage['passwd'];

3. 插件圖標右下角的數字

經常可以看見某些插件會在插件圖標的右下角顯示數字，可以很直觀的看到一些信息，還是非常有用的，Chrome插件開發文檔稱這個數字為badge，可以翻譯成徽章的意思。
如果想為自己的Chrome添加這個badge，可以使用以下代碼

1 // 在插件圖標的右下角顯示數字3
2 chrome.browserAction.setBadgeText({text: ‘3’});

有了上麵介紹的這些功能，插件能提供的服務就又進了一步，好了，今天的分享就到這裏，下次再介紹Chrome插件開發的其它內容。

參考資料
Chrome插件開發之一: 搭建基本結構https://gdfans.net/?p=14&cpage=1
Chrome插件開發之二: 添磚加瓦https://gdfans.net/?p=210https://gdfans.net/?p=210
Tutorial Google chrome Extentsionshttps://code.google.com/chrome/extensions/getstarted.html


最後更新：2017-04-02 06:51:53

  上一篇：go [usaco]單源最短路徑：3.3.5 Sweet Butter
  下一篇：go AlertDialog使用實例