SmoothScroll - Google Chrome/Chromium Extension

manifest.json
Show


01 | {

02 |   "name": "SmoothScroll",

03 |   "version": "0.5",

04 |   "description": "This extension adds smooth scrolling 

05 |           behaviour to Google Chrome/Chromium",

06 |   "update_url": "http://chromium.exxe.ath.cx/smoothscroll/update.xml",

07 |   "permissions": ["tabs"],

08 |   "options_page": "options_page/options.html",

09 |   "background_page": "background.html",

10 |   "icons": { "128": "128.png", 

11 |              "48": "48.png",

12 |              "32": "32.png",

13 |              "16": "16.png" },

14 |   "content_scripts": [

15 |     {

16 |       "matches": ["http://*/*","https://*/*","file://*/*","ftp://*/*"],

17 |       "js": ["sscr.js"],

18 |       "run_at": "document_start"

19 |     }

20 |   ]

21 | }

sscr.js
Show


001 | // SmoothScroll v0.5
002 | 
003 | // Frame Variables
004 | var frame = false;
005 | var noscrollframe = false;
006 | var yoff = 0;
007 | 
008 | // Scroll Variables
009 | // tweakables
010 | var framerate = 50;  // hz
011 | var animtime = 400;  // faster than picasa
012 | var scrollsz = 95;  // pixels
013 | 
014 | // less tweakables
015 | var PulseScale = 8;        // ratio of 'tail' to 'acceleration'
016 | var PulseNormalize = 1;
017 | 
018 | ComputePulseScale();
019 | var scrolls;
020 | // Keyboard Settings
021 | var keyboardsupport = false;
022 | var arrscroll = 40; //in px
023 | var arrframes = 6;
024 | var pgscroll = 800; //in px
025 | var pgframes = 20;
026 | 
027 | // Other Variables
028 | var sTop = 1337;
029 | var delta = 0;
030 | var initdone = false;
031 | var d = 10;
032 | 
033 | var port = chrome.extension.connect({name: "smoothscroll"});
034 |   port.onMessage.addListener(function(settings) {
035 |       framerate = settings.framerate;
036 |       animtime = settings.animtime;
037 |       scrollsz = settings.scrollsz;
038 |       
039 |       PulseScale = settings.PulseScale;
040 |       PulseNormalize = settings.PulseNormalize;
041 |       
042 |       keyboardsupport = settings.keyboardsupport;
043 |       arrscroll = settings.arrscroll;
044 |       arrframes = settings.arrframes;
045 |       pgscroll = settings.pgscroll;
046 |       pgframes = settings.pgframes;
047 |       
048 |       scrolls = setupScrolls();
049 |       
050 |       if (keyboardsupport== "true")
051 |         document.onkeydown = keypress;
052 | });
053 | 
054 | function onloadf() {
055 |     if (!scrolls)
056 |         scrolls = setupScrolls();
057 |     if (top != self)  { // Checks if this script is running in a frame
058 |         frame=true;
059 |         //if (document.documentElement.scrollHeight < (document.documentElement.clientHeight+10)) 
060 |         if (document.body.scrollHeight <= (document.body.clientHeight+10))
061 |             noscrollframe=true;
062 |     }
063 |     var underlay = document.createElement('div');
064 |     underlay.setAttribute("style","z-index: -1; position:absolute; top:0px; left: 0px; width: 100%; height: "+document.body.scrollHeight+"px;");
065 |     document.body.appendChild(underlay);
066 |     /* This fixes a bug where the areas left and right 
067 |     to the content does not trigger the onmousewheel event 
068 |     on some pages */
069 |     
070 |     initdone=true;
071 | }
072 | 
073 | function wheel(event){
074 |     if (initdone==false) onloadf();
075 |     var scroll=true;
076 |     var prevent = false;
077 |     var src = window.event.srcElement;
078 |     var scrollup = true;
079 |     var scrolldown = true;
080 |     var lastdelta = delta;
081 |     
082 |     delta = 0;
083 |     if (event.wheelDelta)  
084 |         delta = event.wheelDelta/120;
085 | 
086 |     do {
087 |         if (document.body.scrollHeight == src.scrollHeight) { 
088 |             scroll=true;
089 |             break;
090 |         }    
091 |         else {
092 |             if ((src.clientHeight+10) < src.scrollHeight) {
093 |             overflow = document.defaultView.getComputedStyle(src,"").getPropertyValue("overflow");
094 |                     if (overflow=="scroll" || overflow=="auto") {
095 |                         prevent = true;
096 |                         if (src.scrollTop == sTop) {
097 |                             if (src.scrollTop == 0) {
098 |                                 scrollup = true;
099 |                                 scrolldown = false;
100 |                             }
101 |                             else {
102 |                             scrolldown = true;
103 |                             scrollup = false;
104 |                             }
105 |                         } else { 
106 |                             scroll = false;
107 |                         }
108 |                         sTop = src.scrollTop;
109 |                         scrollelm(delta,src,1); //Fixes a bug
110 |                         for (var i=0; i < 10; i++) {
111 |                             d = 10;
112 |                             setTimeout(function () {
113 |                             scrollelm(delta,src,d)
114 |                             }, i * 1000 / framerate + 1);
115 |                         }
116 |                         break;
117 |                     }
118 |             }
119 |         }
120 |     } while(src = src.parentElement)
121 |     
122 |     if (frame==true) {
123 |         if (noscrollframe==true) { 
124 |             scroll=false;
125 |         }
126 |         else {
127 |             if ((yoff==window.pageYOffset) && (lastdelta<0)) {
128 |                 //The last scroll downwards did nothing
129 |                 scrollup=true;
130 |                 scrolldown=false;
131 |             }
132 |             if ((yoff==window.pageYOffset) && (lastdelta>0)) {
133 |                 //The last scroll upwards did nothing
134 |                 scrollup=false;
135 |                 scrolldown=true;
136 |             }
137 |         yoff = window.pageYOffset;    
138 |         }
139 |     }
140 |     if (scroll==true) {
141 |         if (((scrolldown==true) && (delta < 0)) || ((scrollup==true) && (delta > 0))) {
142 |             handle(delta);
143 |             if (event.preventDefault)
144 |                 event.preventDefault();
145 |             event.returnValue = false;
146 |         }
147 |     }
148 |     if (prevent == true) {
149 |     // Prevention for scrollable html elements
150 |     if (event.preventDefault)
151 |                 event.preventDefault();
152 |             event.returnValue = false;
153 |     }
154 |     
155 |     //Debug
156 |     //console.log("scrollup "+scrollup);
157 |     //console.log("scrolldown "+scrolldown);
158 |     //console.log("scroll "+scroll);
159 |     //console.log("frame "+frame);
160 |     //console.log("prevent "+prevent);
161 |     //console.log("noscrframe "+noscrollframe);
162 |     //console.log(document.documentElement.scrollHeight);
163 |     //console.log(document.documentElement.clientHeight+10);
164 | }
165 | 
166 | // viscous fluid with a pulse for part and decay for the rest
167 | function Pulse_(x)
168 | {
169 |   var val;
170 |   
171 |   // test
172 |   x = x * PulseScale;
173 |   if (x < 1) {val = x - (1 - Math.exp(-x));} 
174 |   else {
175 |     // the previous animation ended here:
176 |     var start = Math.exp(-1);
177 | 
178 |     // simple viscous drag
179 |     x -= 1;
180 |     var expx = 1 - Math.exp(-x);
181 |     val = start + (expx * (1.0 - start));
182 |   }
183 | 
184 |   return val * PulseNormalize;
185 | }
186 | 
187 | function ComputePulseScale()
188 | {
189 |   PulseNormalize = 1 / Pulse_(1);
190 | }
191 | 
192 | // viscous fluid with a pulse for part and decay for the rest
193 | function Pulse(x)
194 | {
195 |   if (x >= 1) return 1;
196 |   if (x <= 0) return 0;
197 | 
198 |   if (PulseNormalize == 1) {
199 |     ComputePulseScale();
200 |   }
201 | 
202 |   return Pulse_(x);
203 | }
204 | 
205 | function setupScrolls() {
206 | 
207 |     scrolls = new Array();
208 |     
209 |     var last = 0;
210 |     var frm = parseInt(framerate * animtime / 1000);
211 |     
212 |     for (var i = 0; i < frm; i++) {
213 | 
214 |     // scroll is [0, 1]
215 |     var scroll = (i + 1) / frm;
216 |     // transform [0, 1] -> [0, 1]:
217 |     scroll = Pulse(scroll);
218 | 
219 |     // scale and quantize to int so our pixel difference works:
220 |     var iscroll = parseInt(scrollsz * scroll + 0.99);
221 |     
222 |     scrolls.push(iscroll - last);
223 |     last = iscroll;
224 |     }
225 |     
226 |     return scrolls;
227 | }
228 | 
229 | function handle(delta) {
230 |     for (var i=0; i < scrolls.length; i++) {
231 |         setTimeout ('window.scrollBy( 0 ,' + -delta * scrolls[i] + ');', i * 1000 / framerate + 1);
232 |     }
233 | }
234 | 
235 | function scrollelm(delta,src,d) {
236 |     if (delta > 0) {
237 |     src.scrollTop -= d;
238 |         } else {
239 |     src.scrollTop += d;
240 |     }
241 | }
242 | 
243 | 
244 | function keypress()
245 | {
246 |     if(window.event) {
247 |         if(event.keyCode==38) {
248 |             arrscrollwindow(1);
249 |             event.preventDefault();
250 |         }
251 |         if(event.keyCode==40) {
252 |             arrscrollwindow(-1);
253 |             event.preventDefault();
254 |         }
255 |         if(event.keyCode==33) {
256 |             pgscrollwindow(1);
257 |             event.preventDefault();
258 |         }
259 |         if(event.keyCode==34) {
260 |             pgscrollwindow(-1);
261 |             event.preventDefault();
262 |         }
263 |     }
264 | }
265 | 
266 | function arrscrollwindow(delta) {
267 |     for (var i=0; i < arrframes; i++) {
268 |         setTimeout ('window.scrollBy( 0 ,' + -delta * (arrscroll/arrframes) + ');', i * 25);
269 |     }
270 | }
271 | 
272 | function pgscrollwindow(delta) {
273 |     for (var i=0; i < pgframes; i++) {
274 |         setTimeout ('window.scrollBy( 0 ,' + -delta * (pgscroll/pgframes) + ');', i * 25);
275 |     }
276 | }
277 | 
278 | window.onmousewheel = wheel;
279 | window.onload = onloadf;
280 | 
281 | /****************************************************
282 | 
283 |  Contact me at patrickb1991@ gmail . com
284 | 
285 | *****************************************************/

background.html
Show


01 | <script>
02 | // Fetch version number of SmoothScroll
03 | function get_manifest(callback){ 
04 |   var xhr = new XMLHttpRequest(); 
05 |   xhr.onload = function(){ 
06 |       callback(JSON.parse(xhr.responseText)); 
07 |   }; 
08 |   xhr.open('GET','./manifest.json',true); 
09 |   xhr.send(null); 
10 | } 
11 | 
12 | get_manifest(function(manifest){ 
13 |     version = manifest.version; 
14 |     init();
15 | });
16 | 
17 | function init() {
18 | // If installed
19 | if (!localStorage.version) {
20 |     localStorage.version = version;
21 |     // Set the default settings
22 |     localStorage.framerate = 50;
23 |     localStorage.animtime = 400;
24 |     localStorage.scrollsz = 95;
25 | 
26 |     localStorage.PulseScale = 8;
27 |     localStorage.PulseNormalize = 1;
28 |     
29 |     localStorage.keyboardsupport = false;
30 |     localStorage.arrscroll = 40;
31 |     localStorage.arrframes = 6;
32 |     localStorage.pgscroll = 800;
33 |     localStorage.pgframes = 20;
34 |     
35 |     chrome.tabs.create({url: "chrome-extension://cccpiddacjljmfbbgeimpelpndgpoknn/options_page/options.html"});
36 | } 
37 | 
38 | // If updated do something
39 | if (localStorage.version != version) {
40 |     localStorage.version = version;
41 |     // This should be replaced by an infobar once the API is ready
42 |     // chrome.tabs.create({url: "chrome-extension://cccpiddacjljmfbbgeimpelpndgpoknn/options_page/options.html"});
43 | }
44 | }
45 | 
46 | // If content scripts connect send the settings
47 | chrome.extension.onConnect.addListener(function(port){
48 |     if(port.name == 'smoothscroll') {
49 |     port.postMessage(localStorage);
50 | }
51 | });
52 | </script>

options.html
Show


001 | <html>
002 | <head><title>SmoothScroll Options</title>
003 | <style type="text/css">
004 | body {
005 |          font-size: 13.4px;
006 |          font-family: Verdana, sans-serif;
007 |          color: #C8C8C8;
008 |          text-align: center;
009 |          margin: auto;
010 |          background-color: #000000;
011 |          }
012 | input {
013 |          color: #00CCFF;
014 |          background-color: transparent;
015 |          padding: 3px;
016 |          -webkit-border-radius: 4px;
017 |          border: 1px solid white;
018 |          width: 38px;
019 |          outline: none;
020 |          text-align: center;
021 | }
022 | 
023 | .title {
024 |          margin: 30px;
025 |          color: #4400CC;
026 |          font-size: 40px;
027 |          background-image:url(headerbackground.jpg);
028 |          width: 800px;
029 |          height: 130px;
030 |          background-repeat: no-repeat;
031 |          background-position: bottom center;
032 |          text-align: left;
033 |          font-weight: bold;
034 | }
035 | a {
036 |         text-decoration: none;
037 |         color: #F1F1F1;
038 | }
039 | 
040 | a:hover {
041 |         text-decoration: underline;
042 |         color: #F9F9F9;
043 | }
044 | </style>
045 | <script type=text/javascript src="../sscr.js"></script>
046 | <script>
047 | function saving() {
048 | var varsafe = true;    
049 | framerate = document.getElementById('framerate').value;
050 | animtime = document.getElementById('animtime').value;
051 | scrollsz = document.getElementById('scrollsz').value;
052 | 
053 | PulseScale = document.getElementById('PulseScale').value;
054 | PulseNormalize = document.getElementById('PulseNormalize').value;
055 | 
056 | keyboardsupport = document.getElementById('keyboardsupport').checked;
057 | arrscroll = document.getElementById('arrscroll').value;
058 | arrframes = document.getElementById('arrframes').value;
059 | pgscroll = document.getElementById('pgscroll').value;
060 | pgframes = document.getElementById('pgframes').value;
061 | 
062 | if ((framerate != parseInt(framerate)) || 
063 | (animtime != parseInt(animtime)) ||
064 | (scrollsz != parseInt(scrollsz)) ||
065 | (PulseScale != parseInt(PulseScale)) ||
066 | (PulseNormalize != parseInt(PulseNormalize)) ||
067 | (arrscroll != parseInt(arrscroll)) ||
068 | (arrframes != parseInt(arrframes)) ||
069 | (pgscroll != parseInt(pgscroll)) || 
070 | (pgframes != parseInt(pgframes))) 
071 | { 
072 |   alert("Numeric Values Only!");
073 |   varsafe = false;
074 | }
075 | 
076 | if (varsafe == true) {
077 |     localStorage.framerate = framerate;
078 |     localStorage.animtime = animtime;
079 |     localStorage.scrollsz = scrollsz;
080 | 
081 |     localStorage.PulseScale = PulseScale;
082 |     localStorage.PulseNormalize = PulseNormalize;
083 | 
084 |     localStorage.keyboardsupport = keyboardsupport;
085 |     localStorage.arrscroll = arrscroll;
086 |     localStorage.arrframes = arrframes;
087 |     localStorage.pgscroll = pgscroll;
088 |     localStorage.pgframes = pgframes;
089 | 
090 |   var saving = document.getElementById("saving");
091 |   saving.innerHTML = "Settings saved!";
092 |   var message = document.getElementById("message");
093 |   message.innerHTML = "<a href=\"#\" onclick=\"reload()\">Reload this page and test the new scroll settings!</a>";
094 |     setTimeout(function() {
095 |     saving.innerHTML = "&nbsp;";
096 |   }, 1500);
097 | }
098 | }
099 | 
100 | function reload() {
101 | window.location.reload();
102 | }
103 | </script>
104 | </head>
105 | <body style="width: 100%; background-color: black; text-align: center;">
106 | <center>
107 | 
108 | <script language="JavaScript">
109 | function init() {
110 | var framerate = localStorage.framerate;
111 | var animtime = localStorage.animtime;
112 | var scrollsz = localStorage.scrollsz;
113 | 
114 | var PulseScale = localStorage.PulseScale;
115 | var PulseNormalize = localStorage.PulseNormalize;
116 | 
117 | var keyboardsupport = localStorage.keyboardsupport;
118 | var arrscroll = localStorage.arrscroll;
119 | var arrframes = localStorage.arrframes;
120 | var pgscroll = localStorage.pgscroll;
121 | var pgframes = localStorage.pgframes;
122 | 
123 | document.getElementById('framerate').value=framerate;
124 | document.getElementById('animtime').value=animtime;
125 | document.getElementById('scrollsz').value=scrollsz;
126 | 
127 | document.getElementById('PulseScale').value=PulseScale;
128 | document.getElementById('PulseNormalize').value=PulseNormalize;
129 | 
130 | //Fixes a strange bug
131 | if (keyboardsupport == "true") {
132 | document.getElementById('keyboardsupport').checked = true;
133 | }
134 | 
135 | document.getElementById('arrscroll').value=arrscroll;
136 | document.getElementById('arrframes').value=arrframes;
137 | document.getElementById('pgscroll').value=pgscroll;
138 | document.getElementById('pgframes').value=pgframes;
139 | }
140 | 
141 | function get_manifest(callback){
142 |   var xhr = new XMLHttpRequest();
143 |   xhr.onload = function(){
144 |       callback(JSON.parse(xhr.responseText));
145 |   };
146 |   xhr.open('GET','../manifest.json',true);
147 |   xhr.send(null);
148 | }
149 | 
150 | get_manifest(function(manifest){
151 |     version = manifest.version;
152 |     document.getElementById("version").innerHTML=version;
153 | 
154 | });
155 | 
156 | window.onload=init;
157 | 
158 | // Restores select box state to saved value from localStorage.
159 | //function restore_options() {
160 | 
161 | //}
162 | </script>
163 | 
164 | <div class="title">SmoothScroll <span style="color: #CBCBCB; font-size: 22px; font-weight: normal;"> Version <span id="version"></span></span></div>
165 | <div style="border: 3px solid #28AEA8; -webkit-border-radius: 20px; width: 800px; text-align: left; padding: 30px">
166 | 
167 | <span style="font-size: 16px; color: #00CCFF"><b>Scroll Settings</b></span>
168 | <hr style="width:100%; border: 1px dotted white; margin: 0px;"><br>
169 | <br>
170 | <table width="400px" border="0" cellpadding="0" cellspacing="2" style="font-size: 12px; margin-left: 6px">
171 |  <tr>
172 |   <td>Frames per second</td>
173 |   <td><input id="framerate" type="text" size="1" maxlength="2"> </td>
174 |    <td><span style="color: #00CCFF; font-size: 12px;"> <i>Default value: 50</i></span></td>
175 |  </tr>
176 |  <tr>
177 |   <td>Animation time in milliseconds </td>
178 |   <td><input id="animtime" type="text" size="1" maxlength="3"> </td>
179 |   <td><span style="color: #00CCFF; font-size: 12px;"> <i>Default value: 400</i></span></td>
180 |  </tr>
181 |  <tr>
182 |   <td>Stride size per scroll in pixel</td>
183 |   <td><input id="scrollsz" type="text" size="1" maxlength="3"> </td>
184 |   <td><span style="color: #00CCFF; font-size: 12px;"> <i>Default value: 95</i></span></td>
185 |  </tr>
186 | </table>
187 | <br>
188 | <br>
189 | 
190 | <b>Pulse Algorithm</b><br><br>
191 | 
192 | <table width="345px" border="0" cellpadding="0" cellspacing="2" style="font-size: 12px; margin-left: 6px">
193 |  <tr>
194 |   <td>Pulse Scale</td>
195 |   <td><input id="PulseScale" type="text" size="1" maxlength="2"></td>
196 |      <td><span style="color: #00CCFF; font-size: 12px;"> <i>Default value: 8</i></span></td>
197 |  </tr>
198 |  <tr>
199 |   <td>Pulse Normalize</td>
200 |   <td><input id="PulseNormalize" type="text" size="1" maxlength="2"></td>
201 |      <td><span style="color: #00CCFF; font-size: 12px;"> <i>Default value: 1</i></span></td>
202 |  </tr>
203 | </table>
204 | 
205 | <br><br>
206 | <span style="font-size: 16px; color: #00CCFF"><b>Keyboard Settings</b></span>
207 | <hr style="width:100%; border: 1px dotted white; margin: 0px;"><br>
208 | <input type="checkbox" id="keyboardsupport">Enable <b>experimental</b> keyboard support <br><br>
209 | 
210 | <table width="460px" border="0" cellpadding="0" cellspacing="2" style="font-size: 12px; margin-left: 39px">
211 |  <tr>
212 |   <td>Arrow key stride size per scroll in pixel</td>
213 |   <td><input id="arrscroll" type="text" size="1" maxlength="3"> </td>
214 |   <td><span style="color: #00CCFF; font-size: 12px;"> <i>Default value: 40</i></span></td>
215 |  </tr>
216 |  <tr>
217 |   <td>Frames per arrow key scroll</td>
218 |   <td><input id="arrframes" type="text" size="1" maxlength="2"> </td>
219 |   <td><span style="color: #00CCFF; font-size: 12px;"> <i>Default value: 6</i></span></td>
220 |  </tr>
221 |   <tr>
222 |   <td>---</td>
223 |   <td></td>
224 |  </tr>
225 |  <tr>
226 |   <td>PgUp/PgDown stride size per scroll in pixel</td>
227 |   <td><input id="pgscroll" type="text" size="1" maxlength="4"> </td>
228 |   <td><span style="color: #00CCFF; font-size: 12px;"> <i>Default value: 800</i></span></td>
229 |  </tr>
230 |   <tr>
231 |   <td>Frames per PgUp/PgDown scroll</td>
232 |   <td><input id="pgframes" type="text" size="1" maxlength="2"> </td>
233 |   <td><span style="color: #00CCFF; font-size: 12px;"> <i>Default value: 20</i></span></td>
234 |  </tr>
235 | </table>
236 | <br>
237 | 
238 | <button onclick="saving()" style="cursor:pointer; padding: 4px;font-size: 15px; background-color: transparent; -webkit-border-radius: 4px; border: 1px solid white; color: white">Save Settings</button>
239 | <br><div id="saving" style="color: #00CCFF; font-size: 12px; font-weight: bold">&nbsp;</div>
240 | <br><div id="message" style="color: #00CCFF; font-size: 11px;"></div>
241 | <br><br><br>
242 | <span style="font-size: 16px; color: #00CCFF"><b>Links</b></span>
243 | <hr style="width:100%; border: 1px dotted white; margin: 0px;"><br>
244 |  - <a href="http://chromium.exxe.ath.cx/smoothscroll/">Source Code, Known Issues, Bug Report, ...</a><br>
245 |  - <a href="http://stereopsis.com/stopping/">Pulse Algorithm by Michael Herf</a><br>
246 | </div>
247 | 
248 | <small>Patrick Brunner | patrickb1991&#64;gmail.com</small>
249 | <br><br><br><br><br><br>
250 | </center>
251 | </body>
252 | </html>