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"}//通道名称
);
});
Chrome浏览器扩展开发系列之六:options 页面的更多相关文章
- Chrome浏览器扩展开发系列之十四
Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 时间:2015-10-08 16:17:59 阅读:1361 评论:0 收藏:0 ...
- Chrome浏览器扩展开发系列之十四:本地消息机制Native messagin
Chrome浏览器扩展开发系列之十四:本地消息机制Native messaging 2016-11-24 09:36 114人阅读 评论(0) 收藏 举报 分类: PPAPI(27) 通过将浏览器 ...
- Chrome浏览器扩展开发系列之七:override页面
Chrome浏览器通常提供了一些默认页面,如标签管理器页面chrome://bookmarks.浏览历史记录页面chrome://history或新建Tab页面chrome://newtab等. Ch ...
- Chrome浏览器扩展开发系列之十九:扩展开发示例
翻译总结了这么多的官网内容,下面以一款博主开发的“沪深股票价格变化实时追踪提醒”软件为例,介绍Chrome浏览器扩展程序的开发,开发环境为Eclipse IDE+Chrome Browser. “沪深 ...
- Chrome浏览器扩展开发系列之十六:扩展中可用的Chrome浏览器API
除了Chrome浏览器支持的chrome.* API之外,Chrome浏览器扩展还可以使用Chrome浏览器为Web页面或Chrome app提供的APIs.对于Chrome浏览器2支持的API,还可 ...
- Chrome浏览器扩展开发系列之十一:NPAPI插件的使用
在Chrome浏览器扩展中使用HTML和JavaScript非常容易,但是如何重用已有的非JavaScript遗留系统代码呢?答案是将NPAPI插件绑定到Chrome浏览器扩展,从而实现在Chrome ...
- Chrome浏览器扩展开发系列之十:桌面通知Notification
Desktop Notification也称为Web Notification,是在Web页面之外,以弹出桌面对话框的形式通知用户发生了某事件.Web Notification于2015.9.10成为 ...
- Chrome浏览器扩展开发系列之三:Google Chrome浏览器扩展的架构
1) 不可视的background页面 Google Chrome扩展往往包含一个不可见的background页面,Google Chrome扩展的主要业务逻辑都位于此.有两种类型的backgroun ...
- Chrome浏览器扩展开发系列之十八:扩展的软件国际化chrome.i18n API
i18n是internationalization 的简写,这里将讨论软件国际化的问题.熟悉软件国际化的朋友应该知道,软件国际化要求,页面中所有用户可见的字符串都必须置于资源属性文件中.资源属性文件中 ...
随机推荐
- 如何在Elasticsearch中安装中文分词器(IK)和拼音分词器?
声明:我使用的Elasticsearch的版本是5.4.0,安装分词器前请先安装maven 一:安装maven https://github.com/apache/maven 说明: 安装maven需 ...
- MySQL主从同步报错故障处理集锦
前言 在发生故障切换后,经常遇到的问题就是同步报错,下面是最近收集的报错信息. 记录删除失败 在master上删除一条记录,而slave上找不到 Last_SQL_Error: Could not e ...
- 常用统计分析 SQL 在 AWK 中的实现(转)
转自:http://my.oschina.net/leejun2005/blog/100710 最近有需求需要本地处理一些临时的数据,用做统计分析.如果单纯的 MYSQL 也能实现, 不过一堆临时数据 ...
- Gradle 使用Maven本地缓存
如果想使用Maven本地缓存,需要定义:build.gradle 文件下定义 build.gradle repositories { mavenLocal() } Gradle使用与Maven相同的策 ...
- 并行类加载与OSGI类加载
这回来分析一下OSGI的类加载机制. 先说一下OSGI能解决什么问题吧. 记得在上家公司的时候,经常参与上线.上线一般都是增加了一些功能或者修改了一些功能,然后将所有的代码重新部署.过程中要将之前的服 ...
- ATmega8仿真——外部中断的学习
前面我们学习了ATmega8的I/O口作为通用数字输入/输出口来用时对LED数码管控制和扫描按键的应用: 但ATmega8多数的I/O口都是复用口,除了作为通用数字I/O使用,还有其第二功能,这里我们 ...
- 简单VR照片 使用陀螺仪、姿态角(Roll、Pitch、Yaw )、四元数
最近在做一个类似VR照片的demo,跟全景图片也很像,只是VR照片与全景720度显示,我只做了180度.但我发现他们实现的原理有一丝相似,希望可以给一些想入行AR.VR的朋友一些提示吧. ...
- Mavnen的几种依赖关系
学习mavnen的时候有几种依赖关系 首先,说一下maven的依赖关系用来干什么? 就是用来控制编译.测试.运行三种classpath的关系 1.compile 的范围 当依赖的scope为compi ...
- OpenGL ES 2.0 渲染管线 学习笔记
图中展示整个OpenGL ES 2.0可编程管线 图中Vertex Shader和Fragment Shader 是可编程管线: Vertex Array/Buffer objects 顶点数据来源, ...
- java基础之集合篇
(一) 集合类位于JDK中java.util包中. 常用的集合类型分布在java.util.Collection和java.util.Map接口中. java.util.Collection=> ...