Chrome外掛開發
編寫chrome外掛之前,需要熟悉一下相應的chrome外掛開發環境。
在chrome中編寫外掛和寫網頁應用基本一致,採用的是javascript+css+html的方式,所以對於用過chrome瀏覽器審閱過一些網頁的原始碼,寫過網頁或者指令碼的人而言,編寫chrome的外掛感覺到還是比較熟悉的。
一、chrome外掛和使用者的幾種互動方式
(1)、browser action:即在瀏覽器的右上角有一個新增的顯示外掛圖示的按鈕,使用者點選該按鈕即可以觸發外掛的應用邏輯;
(2)、backgroud javascript:這種情況下外掛沒有對應的圖示和按鈕,在chrome啟動時,外掛執行在自己的單獨的背景執行緒中。與使用者的互動方式通常是在某些相關網頁載入完之後,通過javascript對該網頁進行修改,將外掛邏輯嵌入到頁面html程式碼中。
(3)、page action:這種外掛形式在需要時在瀏覽器位址列中彈出一個圖示。
二、通過browser action實現外掛
2.1 程式的檔案清單
先來看看外掛的檔案清單,如下圖所示。其中youkuvip.png用於圖示的顯示,manifest.json是chrome外掛的基本配置檔案,popup.html用於下拉選單的構建,youkuvip.js是和popup.html對應的js檔案和html檔案。
2.2 manifest.json檔案
{ "manifest_version":2, "name":"one-click", "description":"chrome extension", "version":"1.0", "permissions":[ "https://*/*", "http://*/*" ], "browser_action":{ "default_icon":"youkuvip.png", "default_popup":"popup.html" } }
manifest.json是chrome外掛的配置檔案,其基本內容如上所示。”manifest_version”欄位預設設定為2。permissions欄位設定了外掛的基本許可權,即具有訪問所有http連結的許可權。browser_action欄位中default_icon和default_popup分別和之前的youkuvip.png,popup.html檔案相對應。
2.3 popup.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="jquery-3.2.1.js"></script> <script src="youkuvip.js"></script> </head> <body> <div style="width:200px;text-align:center" id="about-box" > <p><img src="youkuvip.png"style="width:48px;height:48px"/></p> <h2>優酷VIP助手</h2> <p>版本:v1.0.1</p> <p>作者:zxd</p> <p>@copyright 2017,不可用於商業用途</p> </div> </body> </html>
2.4 popup.js
擊該按鈕即可以觸發外掛的應用邏輯。業務邏輯程式碼。
2.5 將外掛安裝到chrome瀏覽器中
點選瀏覽器邊上的小按鈕,就會執行youkuvip.js檔案裡的js程式碼,就會執行業務邏輯啦。
簡單寫到這……