實現一個簡單的chrome插件

fjcgreat 發布于2019-08-29 17:31 / 1561人閱讀

摘要：小結本文只是簡單分享了如何開發一個簡單的谷歌瀏覽器插件，以及一些注意事項，并且提到了如何授權和使用谷歌插件，重點介紹了插件開發必備的入口文件和插件中幾個重要環境以及環境之間的通信。

我們在上網的時候，都會用到瀏覽器，但是瀏覽器并非擁有我們想要的所有功能，我們可以根據自己的需要，實現自己的插件來滿足需求。比如網頁中經常會有大量的廣告，如果你希望擁有一個純凈的網頁，可以實現一個插件來刪除網頁中的廣告部分，如果你覺得瀏覽器自帶的下載工具不太方便，可實現一個插件來管理下載的所有文件，文本以實現一個記錄所有打開的網頁地址為例，分享一下對瀏覽器插件開發的認識。

要實現一個瀏覽器插件，需要從一個配置文件開始，這個配置文件就是manifest.json文件，任何插件的實現都離不開這個JSON格式的文件。

初識manifest.json文件

設置基本信息

           "manifest_version": 2, // 文件版本，基本不變
           "name": "Record Web Address Extension", // 這里輸入插件名稱
           "version": "1.0.1", // 自己實現的插件版本，在打包完插件的時候，根據這個字段來判斷插件是否需要更新
           "description": "The first extension that yangyanjun made.", // 這里輸入對此插件的詳細描述 以上幾個字段給插件添加一個入口。

設置入口信息

           "browser_action": { 
               "default_icon": "pinzhi_logo.png",
               "default_title": "記錄瀏覽地址", 
               "default_popup": "popup.html" 
            }

"browser_action" 字段配置好之后，插件加載后在瀏覽器的地址欄右側就會生成一個入口圖標，如下圖所示。

"default_icon"字段配置圖標的地址，

"default_title"字段配置鼠標移到圖標上顯示的文字，

"default_popup"配置單擊圖標所執行的文件。

需要注意的是，這里的文件地址都是相對路徑，相對于manifest.json文件。

3.設置此插件所能訪問的瀏覽器權限

            "permissions": [ 
                "http://*/*",
                "https://*/*",
                "tabs",
                "storage"
            ]

"permissions"字段是一個數組，列出本插件所使用到的瀏覽器權限，如果這里沒有授權，則插件是無法使用的。此插件用到的瀏覽器的權限。

4.設置插件后臺頁面。

    "background":{
        "page":"background.html"
    }

"background"字段表明插件所運行的環境，在瀏覽器前臺看不到的頁面，需要打開擴展程序的開發者模式才能看到。如下圖所示：

5.設置對頁面內容進行操作的腳本

    "content_scripts": [{  //對頁面內容進行操作的腳本
         "matches": ["http://*/*","https://*/*"],  
         "js": ["js/jquery-1.9.1.min.js", "js/js.js"],
         "run_at": "document_start",  
         "all_frames": true
    }]

"matches"字段設置執行該腳本的環境，比如本插件的該腳本在http或https協議下才執行，在其他協議的網頁中是不執行內容腳本的。
"js"字段依次加載腳本文件地址。
"run_at"指定在document加載時執行該腳本

插件中幾個環境的總結

popup.html: 點擊插件圖標所顯示的頁面，只有點擊圖標才會顯示，這可區別于background.html的運行周期。這個頁面中運行的js腳本叫做popup.js，它會在每次點擊插件入口圖標時重新載入。 popup.html頁面如下圖所示：

background.html: 這個頁面是插件運行的后臺頁面，沒有顯示在窗口中，與當前瀏覽頁面無關。這個頁面存在于插件運行的整個周期。插件啟動后就常駐后臺，只有一個,這個頁面運行的js腳本叫做background.js。

content.js：這個是注入在web頁面中的JavaScript腳本,可以是多個，如上所述，可以設置注入條件。

注意：chrome不允許擴展中的HTML頁面內直接內嵌js腳本，要求所有的腳本都作為外部src來引入。

三個主要部分消息傳遞總結

popup調用background中變量或方法：

   let bgMessage = chrome.extension.getBackgroundPage(); //可直接獲取background頁面
   console.log(bgMessage.tabUrl);  //直接調用background的變量或方法。

background調用popup中變量或方法：

   let popMessage = chrome.extension.getViews({type:"popup"});//可直接獲取popup頁面
   console.log(popMessage[0].name); // 調用第一個popup的變量或方法。

注意：因為個Extension可以同時擁有若干個頁面。這些頁面分為五種類型為除了background和popup頁面外，還有tab：像正常網頁一樣在瀏覽器的Tab中打開的頁面、infobar：在瀏覽器頂部信息欄顯示的信息頁面、notification：在瀏覽器底部顯示的通知頁面。它們分別代表在不同窗口打開的頁面。所以這里一定要指定獲取頁面的type類型，如果沒有指定，則獲取Background Page之外的所有Extension Page的window對象。

內容腳本發消息給background

   chrome.runtime.sendMessage({conyent: message || "我是content-script"},
   function(response) {
           console.log("來自background的回復：" + response);
       }
   );

background監聽內容腳本所發送的消息，并作出回應

   chrome.runtime.onMessage.addListener(function(request, sender, sendResponse)
   {
    ...
    sendResponse(JSON.stringify(request)); // 監聽到消息之后，對收到的消息做一些處理并做出回應
   });

本插件實現的兩個重要點

獲取當前tab頁面的url

這部分邏輯要寫在background.js中，可以直接使用谷歌提供的插件接口來獲取當前頁面的url
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
    console.log(tab.url) //可以獲取當前頁面的url地址
}）

將獲取的url地址存儲起來

 可以使用谷歌的storage來存儲，由于在manifest.json中已經授予了storage權限，所以這里可以直接使用   
 chrome.storage.local.set({"address": tabUrl}, function() {
    console.log("success")
  } )

可以選擇同步的方式或者本地方式存儲，若選擇前者(sync), 存儲的數據會自動同步到你登錄的任何Chrome瀏覽器。若選擇storage.local，則只能夠將數據存儲在當前登錄的設備本地。詳細用法可參見 https://developer.chrome.com/...

加載調試

設置 —>拓展程序—>加載已解壓的拓展程序—>選擇manifest.json所在的文件夾即可

注意：代碼修改之后，需要重新加載文件。

小結

本文只是簡單分享了如何開發一個簡單的谷歌瀏覽器插件，以及一些注意事項，并且提到了如何授權和使用谷歌插件api，重點介紹了插件開發必備的manifest.json入口文件和插件中幾個重要環境以及環境之間的通信。本文內容并不是很全面，就當是chrome插件開發的學習筆記，不足之處還望指出。本文內容并未完結，在以后學習的過程中，會不斷補充。

參考資料：
https://developer.chrome.com/...
https://developer.chrome.com/...
https://blog.csdn.net/luoshen...

GPU云服務器云服務器 js實現的簡單特效 chrome webrtc插件 Chrome 插件 webrtc 用c實現簡單的shell

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/114383.html

實現一個簡單的chrome插件

摘要：小結本文只是簡單分享了如何開發一個簡單的谷歌瀏覽器插件，以及一些注意事項，并且提到了如何授權和使用谷歌插件，重點介紹了插件開發必備的入口文件和插件中幾個重要環境以及環境之間的通信。我們在上網的時候，都會用到瀏覽器，但是瀏覽器并非擁有我們想要的所有功能，我們可以根據自己的需要，實現自己的插件來滿足需求。比如網頁中經常會有大量的廣告，如果你希望擁有一個純凈的網頁，可以實現一個插件來刪除網...

rubyshen 2019-08-23 13:58 評論0 收藏0
實現一個簡單的chrome插件

摘要：小結本文只是簡單分享了如何開發一個簡單的谷歌瀏覽器插件，以及一些注意事項，并且提到了如何授權和使用谷歌插件，重點介紹了插件開發必備的入口文件和插件中幾個重要環境以及環境之間的通信。我們在上網的時候，都會用到瀏覽器，但是瀏覽器并非擁有我們想要的所有功能，我們可以根據自己的需要，實現自己的插件來滿足需求。比如網頁中經常會有大量的廣告，如果你希望擁有一個純凈的網頁，可以實現一個插件來刪除網...

lieeps 2019-08-02 12:12 評論0 收藏0
Chrome插件開發入門：如何實現一鍵上班賴皮

摘要：老板查崗時，一個快捷鍵，立即關閉所有賴皮頁面。上傳，發布插件。從零開始，開發簡單的一鍵賴皮插件的上班族都在使用瀏覽器賴皮，所以我們選擇采用插件來實現功能。很多人介紹過Chrome插件，但必須要說，插件開發就是擺弄一個小玩具，第一要素是實用，其次是好玩。單純羅列各種功能是非常無趣的。所以把一篇舊文拿出來與大家分享。人，活著就是為了賴皮。作為一個合格的開發人員，把30%的時間用...

acrazing 2019-08-23 14:05 評論0 收藏0
使用LeanCloud服務做一站式Chrome插件開發——Favorite Image

摘要：云存儲問題，帳號系統，多端同步最開始只想做瀏覽器本地的存儲，使用提供的存在本地就。具體解決方案云存儲及帳號系統使用提供的存儲服務解決。 0. 目錄要開發的是什么項目 1.1 想法開端 1.2 應該有什么功能? 開發需要解決的核心問題具體解決方案 3.1 帳號系統 3.2 存儲服務 3.3 使用`LeanEngine`做反防盜鏈中轉接口 3.4 Chrome 插件實現對去...

JohnLui 2019-08-20 14:06 評論0 收藏0
五分鐘實現一個chrome插件(含源碼)

摘要：找了一下網上應用商店，其實已經有很多款類似插件，但往往太過陳舊或者性能較差，不能夠滿足個人需求，估自己搗鼓了一個插件。代碼已經在github更新了 https://github.com/abc-club/c... 請移步github。另外喜歡的話請star。求star求star求star 本文已同步到 https://github.com/abc-club/f... 背景很多網站都...

mengbo 2019-08-26 10:59 評論0 收藏0