Chrome浏览器扩展开发系列之六：options 页面

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"}//通道名称

);

});