初次尝试Chrome扩展开发——以幻灯片方式显示网页内的图片

使用Chrome浏览器很长时间了。每次在论坛里看图片的时候，总会觉得广告和文字太多，心里想如果能够全屏看图片就好了。
于是准备开发一个Chrome扩展,命名为imageGallery：

• 能以全屏幻灯片的方式浏览图片
• 能将尺寸比较小的图片过滤掉
• 支持快捷键

本人在工作中做的是桌面和嵌入式开发，只用过C/C++/C#，对javascript/jQuery没有怎么接触过。代码中如果存在什么问题，请大家原谅。

准备工作

首先是需要找一个jQuery的幻灯片插件。在比较几个插件之后，最后选择了GALLERIA。主要是它提供的全屏模式，比较符合我心中的要求。同时学习下Chrome的扩展开发文档，熟悉开发流程。

正式开始

1. 扩展清单文件（manifest.json）

创建imageGallery目录。在该目录下创建文件manifest.json。这里面包含了扩展的相关信息，以供Chrome使用。本文只对用到的字段做简单解释，可参见详细的介绍。
{ // 插件名称 "name": "imageGallery", // 插件版本,Chrome会根据插件的版本号大小，来判断是否需要升级 "version": "1.0", // 插件描述，显示在扩展管理页面（chrome://extensions/）中 "description": "show the images of the page in a slide", "icons": {"16": "icons\\gallery16.png", // 16*16, 作为扩展页面的favicon "48": "icons\\gallery48.png", // 48*48, 扩展管理页面（chrome://extensions/）中使用 "128": "icons\\gallery128.png"}, // 128*128 安装过程以及Chrome WebStore中使用 // 后台页面，本扩展中用来监控以下事件 // 1. 用户点击浏览器工具栏的扩展图标 // 2. Tab页更新事件 "background_page": "background.html", // 配置页面 "options_page": "options.html", // 权限 "permissions": [ "tabs", "http://*/*" // 允许扩展使用chrome.tabs或者chrome.windows模块 ], // 在web页面满足某种条件时，注入js或者css（存在一些限制，后面详细讲） "content_scripts": [ { "matches": ["http://*/*"], // 匹配任意web页面 "js": ["jquery-1.4.3.min.js", "galleria.js", "imageGallery.js", "themes\\fullscreen\\galleria.fullscreen.js"] } ], // 定义扩展在浏览器工具栏的显示 "browser_action": { "default_title": "Click to show image gallery", // 提示文本 "default_icon": "icons\\gallery48.png" // 显示在浏览器工具栏的扩展图标 } }

在imageGallery目录下，创建background.html和options.html，内容可以为空。同时将不同分辨率（16*16,48*48,128*128）的图标拷贝到icons目录下。确保manifest.json中指定的文件都存在，不然Chrome将无法载入该扩展。

2. 载入jQuery和Galleria

下载jQuery，保存在imageGallery目录下。本扩展中采用的版本是1.4.3。下载GALLERIA,将galleria.js保存在imageGallery目录下。使用fullscreen主题。保存在themes\fullscreen\下。
创建imageGallery.js，在里面输入：
if (Galleria){ console.log("Galleria is imported"); }
打开chrome://extensions/，选择开发人员模式，点击“载入正在开发的扩展程序...”，选择刚才创建的imageGallery目录。这样imageGallery扩展就被载入。
打开任意一个网页，比如http://www.google.com.hk,然后打开开发人员工具，可以看到Console输入了“Galleria is imported”，说明Galleria已经被载入。

3. 使用galleria显示页面中所有图片

移除imageGallery.js之前的测试代码，修改为如下：
function showGallery(){ if (Galleria){ if($("#img_Gallery").length == 0){ // 1. 如果不存在id为img_Gallery节点，则创建 $('
').appendTo($("body")); // 2. 将所有img节点附加img_Gallery $("img").each(function(){ $("#img_Gallery").append($(this)); }); // 3. 使用galleria显示 if($("#img_Gallery").children().length >0){ Galleria_loadTheme(); // 加载fullscreen theme，与正规的方式不同， // 对galleria.fullscreen.js做了点修改，方便使用， // 调用galleria $('#img_Gallery').galleria({ transition: 'fade', // 过渡效果 image_crop: false }); } } } }
在background.html中监听浏览器工具栏的扩展图标（browserAction）点击事件（onClicked），调用showGallery函数。在background.html添加如下代码：


通过chrome.tabs.executeScript接口，可以在Tab页中执行脚本，null代表当前Tab页。重新加载扩展后，单击扩展图标应该就可以将页面内的图片全屏显示。

4. 添加快捷键支持

在imageGallery.js中添加：
$("body").keydown(function (event){ // Alt + S if(event.keyCode == 83 && event.altKey){ showGallery(); } })
当用户按Alt+S时，执行showGallery，将页面内的图片全屏显示。　

5. 为扩展添加选项

在options.html添加：
="reloadOptions()">
在options.html中，将配置属性（最小高度，最小宽度，宽高比的最大值）保存在localStorage。然后修改background.html， 添加如下代码：
function loadOptions(tabId, changeInfo, tab) { var min_height = localStorage["min_height"] || 200; var min_width = localStorage["min_width"] || 200; var wh_ratio = localStorage["wh_ratio"] || 3; var options = "min_width = " + min_width + ";" + "min_height = " + min_height + ";" + "wh_ratio = " + wh_ratio + ";"; chrome.tabs.executeScript(tabId, {code: options}); } chrome.tabs.onUpdated.addListener(loadOptions);
监听tabs.onUpdated事件，将配置选项组成一段code，传到当前Tab页中。临时想到的办法，不知道有没有更标准的做法。
最后在imageGallery.js里面根据图片的宽度和高度来过滤：
$("img").each(function(){ /* filter small image */ if (this.width > min_width && this.height > min_height && (this.width / this.height) < wh_ratio && (this.height / this.width) < wh_ratio) { $("#img_Gallery").append($(this)); } });

感受

Chrome扩展的开发基本和网页开发一致，入门门槛还是很低的，也能利用到现有的很多js库，简单研究下就可以做出很实用的扩展。
大家下载这个扩展试试，有兴趣可以交流下。（Download/下载）

延伸阅读