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

发布时间: 编辑:RILL 0人评论 6062次浏览 chrome插件开发
摘要 : Chrome浏览器扩展开发系列之六:options 页面

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

文章转自:https://www.cnblogs.com/champagne/p/4813658.html

查看更多

转载必须注明来自:https://huajiakeji.com/dev/2018-12/1749.html

30 Seconds of Knowledge

30 Seconds of Knowledge

0 人评论 5430 次人浏览 4.0分 4.0 分
30 Seconds of Knowledge Chrome学习插件,每次打开新标签页时,Google Chrome扩展程序都可以让你获得新的开发人员技能。
评论:(0)

已有 0 位网友发表了一针见血的评论,你还等什么?