广而告之:

Chrome插件之一键保存网页为PDF1.1发布

http://www.cnblogs.com/bdstjk/p/3179543.html

最近做“一键保存网页为PDF”过程中,对Chrome插件的开发也有些心得,在这里分享给大家。

在这里我将我用我插件作为例子给大家讲解,虽然我这篇文章是讲manifest.json文件,不过在这过程中会同时介绍一些相关的东西。

整个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"]
},
...
}

需要注意两点:

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

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

监听用户在扩展信息栏按下你的插件图标时,显示当前活动页的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();
});
});

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
},
...
}

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>

manifest.json就介绍到这里。

最后给大家看一个小例子:

make_page_red    

http://files.cnblogs.com/bdstjk/ChromeExtensions_make_page_red.zip

解压文件,使用chrome访问 chrome://extensions/,勾选开发者模式,点击加载正在开发的插件,选择解压目录即可。

版权所有:http://www.cnblogs.com/bdstjk/ 转载请保留文章出处。

参考:

http://kb.cnblogs.com/page/76134/

https://developer.chrome.com/extensions/api_index.html

https://developer.chrome.com/extensions/samples.html

Chrome插件开发之manifest.json的更多相关文章

  1. 插件开发之360 DroidPlugin源码分析(四)Activity预注册占坑

    请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52258434 在了解系统的activity,service,broa ...

  2. 插件开发之360 DroidPlugin源码分析(五)Service预注册占坑

    请尊重分享成果,转载请注明出处: http://blog.csdn.net/hejjunlin/article/details/52264977 在了解系统的activity,service,broa ...

  3. jQuery插件开发之boxScroll与marquee

    BoxScroll 常见图片轮播效果的简单实现.可以数字列表控制或者左右按键控制.逻辑很简单,下面的Marquee形成环,这个到了尽头得往回跑,看看注释就知道了. 图片轮播GitHub:https:/ ...

  4. jQuery插件开发之windowScroll

    回首望,曾经洋洋得意的代码现在不忍直视.曾经看起来碉堡的效果现在也能稍微弄点出来.社会在往前发展,人也得向前迈进. 参考于搜狗浏览器4.2版本首页的上下滚动效果.主要实现整个窗口的上下和左右滚动逻辑, ...

  5. 插件开发之360 DroidPlugin源码分析(二)Hook机制

    转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52124397 前言:新插件的开发,可以说是为插件开发者带来了福音,虽然还很多坑要填补, ...

  6. 项目开发之package.json

    Name 必须字段. 提示: 不要在name中包含js, node字样: 这个名字不能以点号或下划线开头: 这个名字不能包含有大写字母: 这个名字可能在require()方法中被调用,所以应该尽可能短 ...

  7. jQuery插件开发之datalist

    HTML5中定义了一种input框很好看的下拉列表--datalist,然而目前它的支持性并不好(万恶的IE,好在你要渐渐退役了...).于是最近更据需求写了一个小型datalist插件,兼容到IE8 ...

  8. Qgis插件开发之Qgis源码学习

    Qgis源码中的拖拽.zoomin/out等各个基础功能插件的实现位于qgis_app工程中. 具体头文件为: \QGIS\src\app\qgisapp.h 根据此类可以逐个找到Qgis的基础插件的 ...

  9. 插件开发之360 DroidPlugin源码分析(一)初识

    转载请注明出处:http://blog.csdn.net/hejjunlin/article/details/52123450 DroidPlugin的是什么? 一种新的插件机制,一种免安装的运行机制 ...

随机推荐

  1. 十. 图形界面(GUI)设计7.文本框和文本区的输入输出

    在GUI中,常用文本框和文本区实现数据的输入和输出.如果采用文本区输入,通常另设一个数据输入完成按钮.当数据输入结束时,点击这个按钮.事件处理程序利用getText()方法从文本区中读取字符串信息.对 ...

  2. 修复XCode7 Beta版无法使用iOS8.4真机调试的Bug

        在XCode7 Beta2下如果使用iOS8.4版的真机进行调试,XCode会提示:   "Could not find Developer Disk Image"   解 ...

  3. WPF附加属性的Set函数不调用的问题

    今天写程序的时候用到了附加属性,我是用VS内置的propa的代码段来实现的,代码如下: class Attach    {        public static bool GetIsEnabled ...

  4. JavaEE学习路线图

    http://www.cnblogs.com/gaoming7122/archive/2012/11/20/2778308.html

  5. 【java JVM】JVM中类的加载,加载class文件的原理机制

    暂时贴图一张,以后补充 解释: 1.符号引用替换为直接引用[参考:http://blog.csdn.net/maerdym/article/details/8087620] 在java中,一个java ...

  6. WebLogic Server 多租户资源管理(resource consume manager)

    WebLogic Server基于分区管理heap Size,CPU利用率等,具体的设置如下, 首先需要在setDomainEnv.cmd文件中java_option中加入如下字段 -XX:+Unlo ...

  7. JVM类加载的那些事

    原文出处: 占小狼 前言 Java源代码被编译成class字节码,最终需要加载到虚拟机中才能运行.整个生命周期包括:加载.验证.准备.解析.初始化.使用和卸载7个阶段.   加载 1.通过一个类的全限 ...

  8. apache poi合并单元格设置边框

    HSSFWorkbook wb = new HSSFWorkbook(); HSSFSheet sheet = wb.createSheet(); //创建一个样式 HSSFCellStyle sty ...

  9. spring注入之使用标签 @Autowired @Qualifier

      使用标签的缺点在于必需要有源代码(由于标签必须放在源代码上),当我们并没有程序源代码的时候.我们仅仅有使用xml进行配置. 比如我们在xml中配置某个类的属性            <bea ...

  10. Hadoop之Azkaban详解

    工作流调度器azkaban1 为什么需要工作流调度系统 1)一个完整的数据分析系统通常都是由大量任务单元组成:shell脚本程序,java程序,mapreduce程序.hive脚本等 2)各任务单元之 ...