【转帖】初次尝试Chrome扩展开发——以幻灯片方式显示网页内的图片
使用Chrome浏览器很长时间了。每次在论坛里看图片的时候，总会觉得广告和文字太多，心里想如果能够全屏看图片就好了。
于是准备开发一个Chrome扩展,命名为imageGallery：
- 能以全屏幻灯片的方式浏览图片
- 能将尺寸比较小的图片过滤掉
- 支持快捷键
本人在工作中做的是桌面和嵌入式开发，只用过C/C++/C#，对javascript/jQuery没有怎么接触过。代码中如果存在什么问题，请大家原谅。
准备工作
首先是需要找一个jQuery的幻灯片插件。在比较几个插件之后，最后选择了GALLERIA。主要是它提供的全屏模式，比较符合我心中的要求。同时学习下Chrome的扩展开发文档，熟悉开发流程。
正式开始
1. 扩展清单文件（manifest.json）
{
// 插件名称
"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节点，则创建
$('<div id="img_Gallery"></div>').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添加如下代码：
<html>
<head>
<script>
function loadImageSlide(tab) {
if(tab){
chrome.tabs.executeScript(null, {code: "showGallery()"});
}
}
chrome.browserAction.onClicked.addListener(loadImageSlide);
</script>
</head>
</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添加：
<html>
<head>
<script src="jquery-1.4.3.min.js"></script>
<style>
.main_div{
text-align: center;
width:500px;
margin-left: auto;
margin-right: auto;
}
.sub_div{
text-align: left;
}
</style>
<title>options</title>
</head>
<body onload="reloadOptions()">
<div class="main_div">
<!-- 最小高度 -->
<div class="sub_div">height > <input id="min_height"/> px</div>
<div class="sub_div">width > <input id="min_width"/> px</div>
<div class="sub_div">width-height ratio < <input id="wh_ratio"/> </div>
<div class="sub_div" style="font-size: 10; ">(width/height and height/width)</div>
<div class="sub_div">--------------------------------------------</div>
<div class="sub_div"><b>shortcut key: </b>
<ul>
<li>Alt + S: Show gallery</li>
</ul>
</div>
<div class="sub_div">
<button onclick="saveOptions()">Save</button>
</div>
</div>
<script>
function saveOptions(){
localStorage["min_height"] = $("#min_height").val();
localStorage["min_width"] = $("#min_width").val();
localStorage["wh_ratio"] = $("#wh_ratio").val();
reloadOptions();
}
function reloadOptions(){
min_height = localStorage["min_height"] ||200; // 默认值
min_width = localStorage["min_width"] ||200; // 默认值
wh_ratio = localStorage["wh_ratio"] ||3; // 默认值
$("#min_height").val(String(min_height));
$("#min_width").val(String(min_width));
$("#wh_ratio").val(String(wh_ratio));
}
</script>
</body>
</html>
在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/下载）