zoukankan      html  css  js  c++  java
  • 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"}//通道名称

    );

    });

  • 相关阅读:
    生成对抗性网络GAN
    一些程序员好用的网站
    TED演讲积累。
    JQuery$.extend()用法
    jQuery中判断数组
    input标签中的accpet
    gitlab的添加密钥
    Linux—Ubuntu14.0.5 修改gitlab管理员的密码
    Linux—Ubuntu14.0.5安装gitlab
    Linux—Ubuntu14.0.5安装Redis
  • 原文地址:https://www.cnblogs.com/h2zZhou/p/7250381.html
Copyright © 2011-2022 走看看