zoukankan      html  css  js  c++  java
  • 《Chrome浏览器插件开发》manifest.json文件

    插件的manifest.json文件:

    {
       
        "manifest_version": 2,
       
        "name": "保存网页为PDF",
       
        "version": "1.1.7.80",
       
        "description": "保存网页为PDF【作者:涂剑凯,邮箱:bdstjk@qq.com】",
     
        "icons":{"16":"Images/16.png","48":"Images/48.png","128":"Images/128.png"},
     
        "background": {
            "page": "background.html"
        },
     
        "options_page": "options.html",
       
        "browser_action":
        {
         
            "default_icon": "Images/16.png",
         
            "name": "保存网页为PDF"
       
        },
       
        "permissions": [
            "tabs",
            "http://localhost:9240/",
            "activeTab",
            "notifications","storage","http://*/"
        ],
     
        "update_url": "http://localhost:9240/SaveService/GetUpdateXML"
    }

    必须属性:name、version、manifest_version

    1、name 顾名思义就是你的插件的名称;

    2、version 指你的插件的版本号;

    3、manifest_version 指定清单文件格式的版本,在Chrome18之后,应该都是2,所以这个值直接设定为2就OK了;

    推荐属性:description、icons、default_locale 

    1、description 插件描述,简单介绍插件用途;

    2、icons 插件图标,需准备16*16(扩展信息栏)、48*48(扩展管理页面)、128*128(用在安装过程中)的三个图标文件,建议为PNG格式,因为PNG对透明的支持最好;

    3、default_locale 国际化支持,支持何种语言的浏览器,虽然官方推荐,不过我没用;

    background

    这是一个比较重要的属性,如果你需要运行一些后台脚本,比如监听用户在扩展信息栏按下你的插件图标,或者你要监听用户新建tab页,这个时候你就需要有一个background的页面。background你可以指定一个HTML页面(如我的插件),也可以指定一个JS文件,如:

    {
      "name": "My extension",
      ...
      "background": {
        "scripts": ["background.js"]
      },
      ...
    }

    复制代码
    {
      "name": "My extension",
      ...
      "background": {
        "scripts": ["background.js"]
      },
      ...
    }
    复制代码

    需要注意两点:

    1、是HTML不能写JS代码,JS代码需要写到JS文件中后引入;

    2、不能使用jquery(没有详细测试,可能是我没用正确);

    监听用户在扩展信息栏按下你的插件图标时,显示当前活动页的URL:

    chrome.browserAction.onClicked.addListener(function (tab) {
    alert(tab.url);
    });

    chrome.browserAction.onClicked.addListener(function (tab) {
    alert(tab.url);
    });

    参见:https://developer.chrome.com/extensions/background_pages.html

    options_page

    options_page指定你的插件设置页面,这个看个人需求而定,可以不设置。

    需要注意两点:

    1、你需要将JS写到一个JS文件中后引入;

    2、不能有HTML元素的内联事件(如<button onclick="...">),你需要通过JS给HTML元素绑定事件如:

    $(document).ready(function () {
        $("#btnOpenSetting").click(function () {
            OpenSetting();
        });
    });

    $(document).ready(function () {
        $("#btnOpenSetting").click(function () {
            OpenSetting();
        });
    });

    browser_action

    browser_action可以设置扩展信息栏的图标、图标悬浮提示、点击图标是弹出窗口(我的插件不需要弹出窗口所以未设置);

    给大家看一个完整例子:

    {
      "name": "My extension",
      ...
      "browser_action": {
        "default_icon": {                    // optional
          "19": "images/icon19.png",           // optional
          "38": "images/icon38.png"            // optional
        },
        "default_title": "Google Mail",      // optional; shown in tooltip
        "default_popup": "popup.html"        // optional
      },
      ...
    }

    复制代码
    {
      "name": "My extension",
      ...
      "browser_action": {
        "default_icon": {                    // optional
          "19": "images/icon19.png",           // optional
          "38": "images/icon38.png"            // optional
        },
        "default_title": "Google Mail",      // optional; shown in tooltip
        "default_popup": "popup.html"        // optional
      },
      ...
    }
    复制代码

    permissions

    permissions对于manifest.json来说虽然不是必要属性,但是对于我们开发插件来说却是必要的manifest.json,我们总要向chrome申请点权限,才能完成我们的插件;

    这里我就只介绍我的插件里面用到的权限(当然其实有点权限我最后也没用):

    "tabs", 访问浏览器选项卡
    "http://localhost:9240/", AJAX访问localhost:9240的权限
    "activeTab", 获取当前活动选项卡
    "notifications", 浏览器通知(基于HTML5的通知实现)
    "storage", 存储,希望存储一些设置的话,就需要用到
    "http://*/" 访问任意域名的权限

    update_url

    update_url指定自动更新地址,如果你是通过chrome官方发布插件,这个属性不需要设置;但如果跟我一样通过非官方发布,这个属性就很巴适了;你只需要第一次拖拽安装插件,以后都能自动更新了。这里给一个update_url需要返回的数据格式例子:

    <?xml version='1.0' encoding='UTF-8'?>
    <gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
      <app appid='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'>
        <updatecheck codebase='http://myhost.com/mytestextension/mte_v2.crx' version='2.0' />
      </app>
    </gupdate>

    <?xml version='1.0' encoding='UTF-8'?>
    <gupdate xmlns='http://www.google.com/update2/response' protocol='2.0'>
      <app appid='aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa'>
        <updatecheck codebase='http://myhost.com/mytestextension/mte_v2.crx' version='2.0' />
      </app>
    </gupdate>

    manifest.json就介绍到这里。

    板邓个人博客:http://8dseo.com
  • 相关阅读:
    nginx路径详解
    负载均衡
    http中消息头的安全配置及工作原理
    Tomcat的ErrorPage实现原理分析及阀门ErrorReportValve
    Tomcat中Logger组件
    NIO在Tomcat中的应用
    vue中强制生效css样式
    k8s中的Ingress
    xhr.withCredentials与 CORS 什么关系
    Redis Cluster集群
  • 原文地址:https://www.cnblogs.com/xbdeng/p/6081612.html
Copyright © 2011-2022 走看看