Chrome擴充套件及應用開發 擴充套件頁面間的通訊

2022-06-23 22:27:14 字數 1573 閱讀 7464

chrome提供了4個有關擴充套件頁面間相互通訊的介面,分別是runtime.sendmessageruntime.onmessageruntime.connectruntime.onconnect。做為一部入門級教程,此節將只講解runtime.sendmessageruntime.onmessage介面,runtime.connectruntime.onconnect做為更高階的介面請讀者依據自己的興趣自行學習,你可以在得到有關這兩個介面的完整官方文件。

請注意,chrome提供的大部分api是不支援在content_scripts中執行的,但runtime.sendmessageruntime.onmessage可以在content_scripts中執行,所以擴充套件的其他頁面也可以同content_scripts相互通訊。

runtime.sendmessage完整的方法為:

chrome.runtime.sendmessage(extensionid, message, options, callback)
1 此屬性僅在擴充套件和網頁間通訊時才會用到。

runtime.onmessage完整的方法為:

chrome.runtime.onmessage.addlistener(callback)
此處的callback為必選引數,為**函式。callback接收到的引數有三個,分別是messagesendersendresponse,即訊息內容、訊息傳送者相關資訊和相應函式。其中sender物件包含4個屬性,分別是tabidurltlschannelidtab是發起訊息的標籤,有關標籤的內容可以參看4.5節的內容。

為了進一步說明,下面舉乙個例子。

在popup.html中執行如下**:

chrome.runtime.sendmessage('hello', function(response));
在background中執行如下**:

chrome.runtime.onmessage.addlistener(function(message, sender, sendresponse)

});

檢視popup.html頁面會發現有輸出「hello from background.」。

擴充套件內部通訊demo的執行畫面

Chrome 擴充套件程式開發

按chrome開發規範,我們首先建乙個資料夾,如d autoclickdemo 在該資料夾下新建乙個名為manifest.json的文字檔案,並按實際情況放乙個檔案,作為外掛程式的圖示。然後新建乙個名為myscript.js的js指令碼檔案,作為我們需要自定義執行的操作。最後,如果需要用到jquer...

chrome擴充套件程式開發

1 檢視及執行擴充套件程式 2 擴充套件的組成1 檢視擴充套件程式資訊 2 檢視popup頁面1 不可視的background頁面 2 可視頁面 browser action default icon 圖示 最好19px 19px default title 標題 default popup 彈出框...

開發chrome擴充套件程式

谷歌瀏覽器擴充套件程式官方文件 入門1.建立資料夾如 c demo 2.在該資料夾下建立名為manifest.json的檔案,內容格式為json格式,語法如下 3.在demo資料夾中至少包含 icon.png 圖示 a.html 外掛程式按鈕被點下時顯示的網頁 安裝1.開發版的chrome瀏覽器中 ...