摘要:配置文件每一個擴展都有一個格式的文件,叫。此消息發送后會觸發擴展內每個頁面的事件。和持續長時間的保持會話需要在和擴展建立一個長時間存在的通道。內容腳本發送消息到擴展程序建立通道,并給通道命名利用通道發送一條消息。
這次的練習是做一個Chrome的擴展,分享一下入門開發過程。因為在消息傳遞那塊糾結了特別久,所以我會重點總結消息傳遞那塊。
這次做這個插件的功能很簡單,就是點擊按鈕后可以對當前網頁的模塊進行選擇隱藏。 做這個插件一方面是練習實例,還有一方面是,有的時候查資料啊,邊上總有很多花花綠綠動來動去的小廣告! 很煩有木有,還根本不能關閉!就算有關閉按鈕,點擊了竟然還跳轉到廣告頁面了(?Д?≡?Д?) 所以就想做個小插件,讓自己可以選擇隱藏這些不想看的模塊。配置文件
每一個擴展都有一個JSON格式的manifest文件,叫manifest.json。
所以第一步我們將創建一個manifest.json文件。如下:
{ "manifest_version": 2, //固定的 "name": "Cissy"s First Extension", //插件名稱 "version": "1.0", //插件使用的版本 "description": "The first extension that CC made.", //插件的描述 "browser_action": { //插件加載后生成圖標 "default_icon": "cc.gif",//圖標的圖片 "default_title": "Hello CC", //鼠標移到圖標顯示的文字 "default_popup": "popup.html" //單擊圖標執行的文件 }, "permissions": [ //允許插件訪問的url "http://*/", "bookmarks", "tabs", "history" ], "background":{//background script即插件運行的環境 "page":"background.html" // "scripts": ["js/jquery-1.9.1.min.js","js/background.js"]//數組.chrome會在擴展啟動時自動創建一個包含所有指定腳本的頁面 }, "content_scripts": [{ //對頁面內容進行操作的腳本 "matches": ["http://*/*","https://*/*"], //滿足什么條件執行該插件 "js": ["js/jquery-1.9.1.min.js", "js/js.js"], "run_at": "document_start", //在document加載時執行該腳本 }] }
每個字段的信息我都用注釋標明了,接下來就重點說下一些重要字段。
需要注意:
browser_actionchrome不允許擴展中的HTML頁面內直接內嵌js腳本,而要求所有的腳本都作為外部src來引入
如果browser action擁有一個popup(即設置了default_popup),popup 可以包含任意你想要的HTML內容,并且會自適應大小。popup 會在用戶點擊圖標后出現。若沒有設置default_popup,將執行chrome.browserAction.onClicked的內容,若沒有設置,就什么都不執行了。也就是如果設置了default_popup,就不會執行chrome.browserAction.onClicked了。
和browser_action對應的還有一個page_action,區別在于:Browser Action對在瀏覽器中加載的所有網頁都生效;Page Action針對特定的網頁生效。一個Extension最多可以有一個Browser Action或者Page Action。這里選用Browser Action。
backgroundbackground是插件的運行環境。若設置了scripts字段,瀏覽器的擴展系統會自動根據scripts字段指定的所有js文件自動生成背景頁。也可以直接page字段,指定背景頁。兩者只能設置一個。
一般情況下,我們會讓將擴展的主要邏輯都放在 background 中比較便于管理。其它頁面可以通過消息傳遞的機制與 background 進行通訊。理論上 content script 與 popup 之間也可以傳遞消息,但不建議這么做。
消息傳遞由于插件的js運行環境有區別,所以消息傳遞機制是一個重要內容。
一次簡單的請求如果僅需要給你自己的擴展的另外一部分發送一個消息(可選的是否得到答復),你可以簡單地使用chrome.extension.sendRequest()或者chrome.tabs.sendRequest()方法。這個方法可以幫助你傳送一次JSON序列化消息從content script到擴展,反之亦然。如果接受消息的一方存在的話,可選的回調參數允許處理傳回來的消息。
sendRequest() 是Chrome33之前的API,33之后還是使用sendMessage()吧。
內容腳本發送消息到擴展程序
chrome.extension.sendMessage({hello: "Cissy"}, function(response) { console.log(response.farewell); });
擴展程序發送消息到內容腳本
chrome.tabs.sendMessage(tab.id, {hello: "Cissy"}, function(response) { console.log(response.farewell); });
接收消息
chrome.extension.sendMessage()向擴展內的其它監聽者發送一條消息。此消息發送后會觸發擴展內每個頁面的chrome.extension.onMessage()事件。
我用的是長時間的保持連接,原理差不多,就是調用接口的區別,所以就不具體介紹這個了 詳細的可以看開發文檔
長時間的保持連接 background 和 popup同一個Extension的Extension Page(包括background、popup、tab、infobar、notification)都是運行在同一個進程中的,所以background 和 popup 之間可以直接相互調用對方的方法,不需要消息傳遞。
popup調用background中變量或方法
var bg = chrome.extension.getBackgroundPage();//獲取background頁面 console.log(bg.a);//調用background的變量或方法。
background調用popup中變量或方法
var pop = chrome.extension.getViews({type:"popup"});//獲取popup頁面 console.log(pop[0].b);//調用第一個popup的變量或方法。
這里要注意一定要指明type,如果沒有指定,則獲取Background Page之外的所有Extension Page的window對象 。(??ˇ?ˇ??)這個地方真的糾結好久。然后就是background是一個運行在擴展進程中的HTML頁面。它在你的擴展的整個生命周期都存在,而popup是在你點擊了圖標之后才存在,所以,在獲取popup變量時,請確認popup已打開。
background 和 content持續長時間的保持會話需要在content script和擴展建立一個長時間存在的通道。當建立連接,兩端都有一個Port 對象通過這個連接發送和接收消息。
內容腳本發送消息到擴展程序
var bac = chrome.extension.connect({name: "ConToBg"});//建立通道,并給通道命名 bac.postMessage({hello: "Cissy"});//利用通道發送一條消息。
擴展程序發送消息到內容腳本
擴展程序發送消息到內容腳本與前面類似,但需要指定哪個標簽需要連接,(獲取tab.id的方法我試了很多,但只有下面這個有效,所以如果大家有什么其他有效的方法,求求求分享!!)
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {//獲取當前Tab var cab = chrome.tabs.connect(tabId, {name: "BgToCon"});//建立通道,指定tabId,并命名 cab.postMessage({ hello: "Cissy"});//利用通道發送一條消息。 }
接收消息
為了處理正在等待的連接,需要用chrome.extension.onConnect 事件監聽器,對于content script或者擴展頁面,這個方法都是一樣的
chrome.extension.onConnect.addListener(function(bac) {//監聽是否連接,bac為Port對象 bac.onMessage.addListener(function(msg) {//監聽是否收到消息,msg為消息對象 console.log(msg.hello); }) })安裝調試
設置 —>拓展程序—>加載已解壓的拓展程序—>選擇文件就行了,記得要打開開發者模式哦
總結插件功能的開發我就不寫了,實現起來比較簡單,這篇文章就當是chrome拓展開發的學習筆記了,不足之處還望指出,最后還是放一下插件源碼吧,寫的比較亂很多沒用到的代碼也沒刪掉,因為是練習中用到的。嗯嗯好了去吃飯。
參考資料:
官方文檔
360極速瀏覽器開發文檔
Chromium擴展(Extension)機制簡要介紹和學習計劃
Chrome插件開發入門(二)——消息傳遞機制
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/80422.html
摘要:一般而言,擴展會對用戶瀏覽的頁面進行相應的操作和一些數據傳遞,本案例的本質是,當用戶瀏覽網頁版微博時,擴展會向當前頁面注入預先寫好的,這樣便對微博網頁版進行了樣式重構。采用這樣的方法依次處理所有你不想看到的元素,你的微博便會簡潔很多。 0x00. 前言 微博現在也是變得越來越臃腫,廣告越來越多,早已不再是微博了,這讓微博深度用戶的我感到十分焦灼。由于之前就嘗試寫過 Chrome 插件,...
摘要:以下示例將阻止所有對的請求。從存儲請求和阻止請求的對象中刪除當前選項卡的屬性。收聽消息告知后臺進程阻止的列表已被用戶更新。兩者都提供類似的功能和事件處理程序。 前言 當我們瀏覽網站時,都會發送許多請求來獲取網頁內容。這些請求中有些是重要的,而有些是我們不需要,因為它們可能是廣告或建議等。在本文中,將創建一個有助于阻止和取消阻止所選URL的Chrome擴展插件,讓你選擇你打開的網址及該打...
摘要:今天給大家介紹的這款網頁調試工具不僅可以調試簡單的腳本等簡單的網頁基本信息,它還可以發送幾乎所有類型的請求在發送網絡請求方面可以說是插件類產品中的代表產品之一。 用戶在開發或者調試網絡程序或者是網頁B/S模式的程序的時候是需要一些方法來跟蹤網頁請求的,用戶可以使用一些網絡的監視工具比如著名的Firebug等網頁調試工具。今天給大家介紹的這款網頁調試工具不僅可以調試簡單的css、html...
摘要:擴展及應用介紹與區別介紹支持開發者為其編寫各種各樣的擴展與應用來擴充其功能。用處安裝擴展之后,就會讀取擴展中的文件。結語以上就是第一章的總結,接下來的筆記,敬請期待原書項目代碼下載擴展及其應用開發 讀書筆記介紹 寒假想自己做一個chrome擴展,便從圖書館借了這本書。同時,為了培養自己的好習慣,做沉淀,便讀一章寫一篇總結,全書總共10章,將會分為10篇博文。歡迎大家多多指正,也希望大家...
摘要:谷歌出品的瀏覽器是一個功能強大的現代瀏覽器,許多人都喜歡使用它。在這里,我們給大家帶來應用程序的另一個有趣的收集專注于網頁設計和開發的款最重要的擴展程序。讓您從谷歌字體目錄中的字體選擇帶有幾個文本樣式選項的字體,并在當前選項卡中預覽。 谷歌出品的Chrome 瀏覽器是一個功能強大的現代瀏覽器,許多人都喜歡使用它。在這里,我們給大家帶來 Chrome 應用程序的另一個有趣的收集——專注于...
閱讀 2431·2021-09-22 15:41
閱讀 1448·2021-08-19 10:54
閱讀 1755·2019-08-23 15:11
閱讀 3402·2019-08-23 10:23
閱讀 1428·2019-08-22 16:28
閱讀 799·2019-08-22 15:11
閱讀 739·2019-08-22 14:53
閱讀 710·2019-08-22 13:49