chrome插件网页抓取(一键保存网页为PDF过程中对Chrome插件的开发心得)

　　chrome插件网页抓取(一键保存网页为PDF过程中对Chrome插件的开发心得)

　　广为宣传：

　　Chrome插件一键保存网页为PDF1.1 release

　　最近在“一键保存网页为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"

}

　　必需属性：名称、版本、manifest_version

　　1、name，顾名思义就是你的插件的名字；

　　2、version 指的是你插件的版本号；

　　3、manifest_version 指定清单文件格式的版本。Chrome18之后应该都是2，所以直接把这个值设置为2就可以了；

　　推荐属性：描述、图标、default_locale

　　1、description 插件的描述，简单介绍了插件的用途；

　　2、icons插件图标，需要准备16*16（扩展信息栏）、48*48（扩展管理页面）、128*128（安装过程中使用）三个图标文件，建议是PNG格式，因为PNG对透明度的支持最好；

　　3、default_locale 国际化支持，支持哪些语言浏览器，虽然官方推荐，但我没用；

　　背景

　　这是一个重要的属性。如果你需要运行一些后台脚本，比如*敏*感*词*用户在扩展信息栏中按下你的插件图标，或者你想*敏*感*词*用户创建标签页，这时候就需要一个后台页面。可以指定一个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);

});

　　查看代码

　　看：

　　options_page

　　options_page 指定你的插件设置页面，这个看个人需要，不需要设置。

　　需要注意两点：

　　1、需要将JS写成JS文件然后导入；

　　2、 不能有HTML元素的内联事件（比如），需要通过JS给HTML元素绑定事件，比如：

　　

　　

　　$(document).ready(function () {

$("#btnOpenSetting").click(function () {

OpenSetting();

});

});

　　查看代码

　　浏览器动作

　　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

},

...

}

　　查看代码

　　权限

　　虽然权限不是 manifest.json 的必要属性，但我们开发插件是必要的。我们总是要向chrome申请一些权限才能完成我们的插件；

　　这里我只介绍一下我的插件中用到的权限（当然，有些权限最后其实是没用的）：

　　“标签”，访问浏览器标签

　　":9240/", AJAX访问localhost:9240

　　"activeTab", 获取当前活动的标签

　　"notifications"，浏览器通知（基于 HTML5 通知实现）

　　“storage”，storage，如果要存储一些设置，就需要用到