1. 程式人生 > >Chrome外掛開發

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程式碼,就會執行業務邏輯啦。
簡單寫到這……