Chrome瀏覽器擴展開發系列之六:options 頁面


options 頁面用以定制Chrome瀏覽器擴展程序的運行參數。

通過Chrome 瀏覽器的“工具 ->更多工具->擴展程序”,打開chrome://extensions頁面,可以看到有的Google Chrome擴展程序有“選項Options”鏈接,如下圖所示。單擊“選項Options”就可以彈出options頁面。

options page

對於Chrome 40之前的版本,定義options頁面,首先要在manifest.json文件中注冊如下:

{

...

"options_page": "options.html",

...

}

對於Chrome 40及之后的版本,定義options頁面,首先要在manifest.json文件中注冊如下:

{

...

"options_ui": {

"page": "options.html",// Required.

 

// Recommended.

"chrome_style": true,//默認值為false,為了保持風格一致建議true

 

// Not recommended; only provided for backwards compatibility,

// and will be unsupported in a future version of Chrome (TBD).

//"open_in_tab": true//默認值為false,表示以嵌入方式打開options頁面;

//true表示在新的tab中打開options頁面

},

...

}

然后,就可以根據需要的參數創建options.html文件,定義options頁面的內容。其中,往往要用到JavaScript代碼文件options.js,引用如下:

<script src="options.js"></script>

 

從Chrome 40及之后的版本,可以通過chrome.runtime.openOptionsPage(function callback)方法在JavaScript腳本中直接打開options頁面。

 

擴展中的JavaScript代碼要獲取options頁面的數據,只能通過消息機制。

可以使用chrome.runtime.sendMessage(string extensionId, any message, object options, functionresponseCallback)方法,發送一個消息並在回調函數在處理響應。

chrome.tabs.query(

{active: true, currentWindow: true},

function(tabs) {

chrome.runtime.sendMessage(//一次性發送消息並處理響應

tabs[0].id,

{greeting: "hello"},

null,

function(response) {

console.log(response.farewell);

});

});

 

也可以使用chrome.runtime.connect(string extensionId, object connectInfo)建立消息通道,不斷收發多個消息。詳見消息處理部分。

chrome.tabs.query(

{active: true, currentWindow: true},

function(tabs) {

var port = chrome.runtime.connect(//建立消息收發通道

tabs[0].id,

{name: "yisheng"}//通道名稱

);

});


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM