Trying to create a chrome extension which scrolls down the page

Question

I want to create a chrome extension something like this

If i click on the extension icon page should start scrolling down, and keep scrolling until i click the icon again (toggle)

manifest.json is

{
    "name": "scrolldown",
    "description": "scroll down the page",
    "version": "0.1",
    "permissions": [
        "tabs",
        "<all_urls>"
    ],
    "browser_action": {
        "default_icon": "icon.png"
    },
    "background": {
       "scripts": [
            "background.js"
        ]
    },
    "manifest_version": 2
}

background.js is

var toggle=false;

chrome.browserAction.onClicked.addListener(function(tab) {
    toggle = !toggle;
    if (toggle) {
        var time = setInterval(function() {
            chrome.tabs.executeScript(tab.id,
                {
                    code: 'window.scrollBy(0, 1000);'
                }
            );
        }, 2000);
    } else {
        clearInterval(time);
    }

});

This code is half correct i.e If i click on the icon page start scrolling down , but if i click on icon again page does not stop . It keep scorlling down ,

i think there is something wrong in background.js

please help

yikes, maybe if you cleaned up your code, you (or especially other people) would have more luck debugging...! — Andrew, Mar 08 '17 at 02:33
no problem -- there you go :) i apologize that i haven't much experience with chrome extensions so i'm not sure i can help further :( — Andrew, Mar 08 '17 at 02:40
are you able to clear the interval via the developer's console? — Andrew, Mar 08 '17 at 02:46
I am not sure how to do that i mean how can i pass parameter to `clearInterval(param)` in console @Andrew — beginner, Mar 08 '17 at 02:51
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Closures — Daniel Herr, Mar 08 '17 at 02:55
If you can't do `clearInterval(time)` from the console then the problem is probably that `time` is inaccessible or outside the scope. Try instead writing `var time;` right under the `var toggle` declaration, then remove the keyword `var` on your setInterval call. If that fixes your issue, I'll repost as an answer — Andrew, Mar 08 '17 at 02:56
@Andrew Huraahhhh! It works, Thanks andrew , post it as an answer, And please explain reason behind it as well — beginner, Mar 08 '17 at 03:00

score 1 · Accepted Answer · edited May 23 '17 at 11:53

1

Your problem is that time is inaccessible from the global scope.

You should declare var time outside the function like so:

var toggle = false;
var time;

chrome.browserAction.onClicked.addListener(function(tab) {
    toggle = !toggle;
    if (toggle) {
        time = setInterval(function() {
            chrome.tabs.executeScript(tab.id,
                {
                    code: 'window.scrollBy(0, 1000);'
                }
            );
        }, 2000);
    } else {
        clearInterval(time);
    }

});

This puts time into the global scope.

For more info on scopes check out this question on StackOverflow, and read about JavaScript closures as well.

edited May 23 '17 at 11:53

Community

1
1

answered Mar 08 '17 at 03:05

Andrew

763
7
21

Andrew although i got the solution ,But even after reading those links i am still confused , i defined var time and accessing it within same function, So it should be accessible in `clearInterval(time)` – beginner Mar 08 '17 at 03:22
No worries. You're actually calling a new function every time you click the extension button, as the function is entirely defined within addListener; thus, it is not the same function every time. Does that make sense? I can edit the question for more clarity if you'd like. – Andrew Mar 08 '17 at 03:28
@beginner Do you still need help? – Andrew Mar 08 '17 at 03:58
I get it now , Thank you so much andrew , – beginner Mar 08 '17 at 04:48
No problem!! Happy coding :) – Andrew Mar 08 '17 at 05:11

Trying to create a chrome extension which scrolls down the page

1 Answers1