options 頁面用以定製Chrome瀏覽器擴充套件程式的執行引數。
通過Chrome 瀏覽器的“工具 ->更多工具->擴充套件程式”,開啟chrome://extensions頁面,可以看到有的Google Chrome擴充套件程式有“選項Options”連結,如下圖所示。單擊“選項Options”就可以彈出options頁面。
對於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"}//通道名稱
);
});