一个简单的Chrome扩展——Back to Top(附源码)

在浏览长网页比如twitter、facebook时，为了返回页面顶部，常常需要拖动浏览器的滚动条，实在不方便。于是我给自己的chrome写了这样一个扩展，能够快速地返回页面顶部。

猛击此处安装该扩展程序。

效果如下图所示：

有关chrome扩展的入门教程，请参阅http://code.google.com/chrome/extensions/getstarted.html。

先来介绍一下这款扩展的思路：在页面右下角插入一个返回页面顶部的图标，点击该图标，便滚动页面。当然，也支持快捷键操作。

下面先来看一下该扩展的目录结构。

top.js用于在网页中插入一个图标，该脚本只在顶层被注入，以免网页的每一个frame中都会生成一个图标。代码如下：

 

function initIcon(addIcon){
	ext_btt_addIcon=addIcon;
	changeUi();
}

function changeUi(){
	var a=document.getElementById('ext_btt');
	if(a!=null)
		a.parentNode.removeChild(a);
		
	if(ext_btt_addIcon){
		var a=document.createElement('a');
		a.id='ext_btt';
		a.style.zIndex=19881211;
		a.href='#';
		var img=document.createElement('img');
		var imgURL = chrome.extension.getURL('images/icon.png');
		img.src=imgURL;
		img.width=32;
		img.height=32;
		img.style.border='none';
		a.appendChild(img);
		a.onclick=function(){
			chrome.extension.sendRequest({});
			return false;
		};
		document.body.appendChild(a);
	}
}

 

frame.js用于在网页的每一个frame中添加滚动的代码，该脚本必须注入到每一个frame中。比如在gmail中，收件箱的主体部分其实是一个子frame，如果不注入每一个frame，则无法实现回到顶部的效果。代码如下：

 

document.onkeydown=function(){
	if(!ext_btt_hotkeys) return;
	var a=window.event.keyCode; 
	if((a==38)&&(event.altKey)) {
		chrome.extension.sendRequest({});
	}
};

function initHotkeys(hotkeys){
	ext_btt_hotkeys=hotkeys;
}

function goTop(animation, acceleration, time) {
	if(!animation){
		window.scrollTo(0, 0);
		return;
	}
	acceleration = acceleration || 0.3;
	time = time || 20;
 
	var x1 = 0;
	var y1 = 0;
	var x2 = 0;
	var y2 = 0;
	var x3 = 0;
	var y3 = 0;
 
	if (document.documentElement) {
		x1 = document.documentElement.scrollLeft || 0;
		y1 = document.documentElement.scrollTop || 0;
	}
	if (document.body) {
		x2 = document.body.scrollLeft || 0;
		y2 = document.body.scrollTop || 0;
	}
	var x3 = window.scrollX || 0;
	var y3 = window.scrollY || 0;
 
	var x = Math.max(x1, Math.max(x2, x3));
	var y = Math.max(y1, Math.max(y2, y3));
 
	var speed = 1 + acceleration;
	window.scrollTo(Math.floor(x / speed), Math.floor(y / speed));
 
	if(x > 0 || y > 0) {
		var invokeFunction = "goTop('" + animation + "', " + acceleration + ", " + time + ")";
		window.setTimeout(invokeFunction, time);
	}
}

 

style.css用于设定插入网页的图标的样式。

下面让我们来看一看background.html。

这个文件好比一个应用程序的main函数。代码如下：

 

<script>
chrome.browserAction.onClicked.addListener(function(tab) {
	chrome.tabs.executeScript(null, {code: "goTop(" + string2Bool(localStorage.animation) + ");", allFrames: true});
});
chrome.tabs.onUpdated.addListener(function(tabId, changeInfo, tab) {
	initialize(tabId);
});
chrome.tabs.onSelectionChanged.addListener(function(tabId, selectInfo) {
	initialize(tabId);
});
chrome.extension.onRequest.addListener(
  function() {
    chrome.tabs.executeScript(null, {code: "goTop(" + string2Bool(localStorage.animation) + ");", allFrames: true});
});

function initialize(tabId){
	chrome.tabs.executeScript(tabId, {file: "top.js"});
	chrome.tabs.insertCSS(tabId, {file: "style.css"});
	chrome.tabs.executeScript(tabId, {file: "frame.js", allFrames: true}, function(){
		chrome.tabs.executeScript(tabId,
							{code: "initIcon(" + string2Bool(localStorage.addIcon) + ");"});
		chrome.tabs.executeScript(tabId,
							{code: "initHotkeys(" + string2Bool(localStorage.hotkeys) + ");", allFrames: true});
	});
}

function string2Bool(string){
	return string=='false'?false:true;
}
</script>

 具体的API使用方法，请查阅Tabs（用于控制标签页行为）的文档：http://code.google.com/chrome/extensions/tabs.html。

 

最后，再来看看options.html这个文件。该文件是扩展的选项文件。在chrome中，选项值是通过html5的localstorage来存储的。这里，我们提供了三个选项：

 选项值是bool值。值得注意的是，localstorage会将bool值的true或false转换为string类型的"true"和"false"来存储，对照background.html你会发现，string2Bool这个函数提供了两者间的转换。

好的，至此，我们的back to top扩展就完成了。

如上图所示，在扩展程序的管理页中，点击按钮，选定扩展所在的目录，你就可以载入你刚刚写好的扩展，在浏览器中进行调试了。

 

最后，依然附上源码。

感兴趣的同学依然可以对这款扩展进行完善：比如提供更多图标样式；提供滚动速度的选项；当页面长度超过一屏时才显示返回顶部图标等等。

评论

4 楼 yrjie 2012-09-15  

谢谢LZ吖,正在学习chrome插件,有问题的话可以问你么?

3 楼 zhc0822 2011-12-03  

ZeaLoVe 写道

为什么你这么好的文章老被踩啊。。。

^_^，可能是因为写得太浅显了吧。

2 楼 ZeaLoVe 2011-12-03  

为什么你这么好的文章老被踩啊。。。

1 楼 andyjackson 2011-03-24  

几天不见，楼主又发新东东啦 必须赞