欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

一个简单的Chrome扩展——Back to Top(附源码) 博客分类: Javascript ChromeEXTHTML5CSS浏览器 

程序员文章站 2024-03-14 16:04:52
...

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

猛击此处安装该扩展程序

效果如下图所示:


一个简单的Chrome扩展——Back to Top(附源码)
            
    
    博客分类: Javascript ChromeEXTHTML5CSS浏览器 

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

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

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


一个简单的Chrome扩展——Back to Top(附源码)
            
    
    博客分类: Javascript ChromeEXTHTML5CSS浏览器 


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来存储的。这里,我们提供了三个选项:


一个简单的Chrome扩展——Back to Top(附源码)
            
    
    博客分类: Javascript ChromeEXTHTML5CSS浏览器 
 选项值是bool值。值得注意的是,localstorage会将bool值的true或false转换为string类型的"true"和"false"来存储,对照background.html你会发现,string2Bool这个函数提供了两者间的转换。

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


一个简单的Chrome扩展——Back to Top(附源码)
            
    
    博客分类: Javascript ChromeEXTHTML5CSS浏览器 

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

 

最后,依然附上源码。

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

  • 一个简单的Chrome扩展——Back to Top(附源码)
            
    
    博客分类: Javascript ChromeEXTHTML5CSS浏览器 
  • 大小: 2.9 KB
  • 一个简单的Chrome扩展——Back to Top(附源码)
            
    
    博客分类: Javascript ChromeEXTHTML5CSS浏览器 
  • 大小: 2.4 KB
  • 一个简单的Chrome扩展——Back to Top(附源码)
            
    
    博客分类: Javascript ChromeEXTHTML5CSS浏览器 
  • 大小: 3.8 KB
  • 一个简单的Chrome扩展——Back to Top(附源码)
            
    
    博客分类: Javascript ChromeEXTHTML5CSS浏览器 
  • 大小: 30.7 KB