一个简单的Chrome扩展——Back to Top(附源码) 博客分类: Javascript ChromeEXTHTML5CSS浏览器
在浏览长网页比如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扩展就完成了。
如上图所示,在扩展程序的管理页中,点击按钮,选定扩展所在的目录,你就可以载入你刚刚写好的扩展,在浏览器中进行调试了。
最后,依然附上源码。
感兴趣的同学依然可以对这款扩展进行完善:比如提供更多图标样式;提供滚动速度的选项;当页面长度超过一屏时才显示返回顶部图标等等。