广而告之: Chrome插件之一键保存网页为PDF1.1发布 |
最近做“一键保存网页为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就介绍到这里。
最后给大家看一个小例子:
http://files.cnblogs.com/bdstjk/ChromeExtensions_make_page_red.zip
解压文件,使用chrome访问 chrome://extensions/,勾选开发者模式,点击加载正在开发的插件,选择解压目录即可。
版权所有:http://www.cnblogs.com/bdstjk/ 转载请保留文章出处。
参考:
http://kb.cnblogs.com/page/76134/
相关推荐
Chrome插件小demo,自动打印文字,实现第一个chrome插件开发demo
1:目前不支持标准发布版本的Chrome插件扩展,不过也有消息马上就开发了,对于我们这个不是问题.4.0使用中 2:创建一个所必要的文件夹,名字任意,用于存放所需文件,开发后,可以通过Chrome打包提交 3:manifest.json文件,...
自动填充manifest.json并创建适当大小的图标,因此您不必这样做。 在开发模式下,它还会在服务器的根目录处创建一个index.html ,以便在扩展的各部分之间轻松导航,并提供指向chrome中实际扩展页面的链接(例如...
对于chrome插件来说,最核心的应该是manifest.json这个配置文件了,利用它我们可以定义在什么时机在什么网页执行什么脚本,有一些什么行为,下面先看一下manifest.json的格式: { // 扩展名称 name: MyExtension,...
Advanced Rest Application Chrome插件安装Advanced Rest Application时需要的definitions.json
这是一套完整的chrome浏览器插件学习源码,基于vue.js,涵盖了manifest.json基本配置、background后台数据运行、ajax请求、localStorage本地数据操作等常见功能,非常适合插件入门学习。
插件基础结构,下载后即可使用所有带代码和文件都有注释,manifest.json 为主要的配置文件,不可删除,里面内容看需求更改
本文实例讲述了基于Python开发chrome插件的方法。分享给大家供大家参考,具体如下: 谷歌Chrome插件是使用HTML、JavaScript和CSS编写的。如果你之前从来没有写过Chrome插件,我建议你读一下这个。在这篇教程中,我们...
新版的chrome不能通过传统的方工安装插件,这时候你就需要有一个好的工具可以安装插件,这就是一个。很方便的。
manifest.json的文件 3、打开这个 manifest.json文件,可以理解为配置文件 :slightly_smiling_face: 包含以下内容 代码如下: { “name”: “My First Extension”,//扩展的名字 “version”: “1.0”, //版本 ...
然后,将此插件导入 Chrome。 // manifest.json"permissions": [ "http://owl.example.com/"] // config.jsvar config = { owlUrl : "http://owl.example.com"}特征当您在 Google 中搜索时,此扩展程序会在 Owl 中...
使用Vue开发Chrome插件的模板最近看了一些Chrome 插件开发的内容, 想要使用Vue的单文件来编写,但是没有现成的webpack打包方式,自己写了一个,第一次自己编写webpack的配置文件目录结构│ .babelrc.js│ .gitignore...
要开启评估平台,查看平台和保存平台,感觉非常繁琐,开发了一款可以获取评估平台数据,查看项目排期和直接保存数据到数据库的chrome插件,由于我需要使用之前vue封装的一个日历插件,这里就用vue来开发这个插件。...
chrome自定义插件实例,实现访问网页先调用自定义js脚本,可以用于日常自动点赞,自动访问等等访问情景
在Chrome中,需要按如下方式安装,找到ffactivex的安装目录,新建一个“manifest.json”文本文件,拷贝下列内容后保存: { "name": "ActiveX hosting plugin for Firefox", "version": "1.37.0.0", "description": ...
这是个本人编写的Chrome小插件,主要用于刷论坛在线时长,下载完解压后,打开Chrome浏览器设置选项,选扩展程序,勾选开发者模式,再点击加载正在开发的扩展程序选择解压的文件夹加载。注:使用时候需要把manifest....
你好 Chrome扩展程序每天都会用小部件和新图像替换新的标签页。 实时示例: : Chrome商店链接: : ... 由于Chrome插件的CSP政策,我们不能拥有内联脚本,除非我们在content_security_policy字段的manifest.jso
Axure原型在浏览器上查看时需要插件,而chrome商店又无法连接,所以特意提供此插件让大家能方便的安装插件,查看原型。 现在直接拖拽安装是不成功了的,需要下载下来之后解压到文件夹,然后在扩展程序-》加载已解压...
在Chrome上:在地址栏中输入chrome://extensions/激活“开发人员模式”点击“加载解包”选择包含manifest.json的文件夹用法单击操作栏中的浏览器窗口符号(浏览器的右上角)。应该会打开一个新的标签,显示一个空的...
闪电日历标签一个用于Lightning日历的小型插件(Mozilla Thunderbird插件),其中添加了一些选项卡,以便在几个月/几周/几天之间...“构建”插件压缩chrome连同文件夹中manifest.json , background.js , experiments