0

hello i'm beginner and i want to create a simple chrome extension for personal use that make a web page to automatically scroll down. it's applicable in dealing with social networks pages, or other auto-upload resources.

i have 2 buttons and 2 javascript code if i click on the first one the page automatically scroll down and the other will stop scrolling

this is the code i found to start scrolling :

var scroll = setInterval(function(){ window.scrollBy(0,1000); }, 2);

and this code must stop it

clearInterval(scroll);

this is the files i created :

manifest.json

{

   "name": "Start ScrollDown toolkit",
   "version": "1.0",
   "manifest_version": 2,
   "description": " description ",
   "browser_action": {
  "default_title":"Start ScrollDown toolkit",
  "default_popup": "mypopup.html",
  "default_icon": "icon.png"
   },
   "icons": {
   "64" : "icon.png"
   },

mypopup.html

<!doctype html>
<html>

 <head>
  <style type="text/css">
  body {
      background-image: url("bg.png");
   background-repeat: no-repeat;
   background-position: top center;
   margin: 0px;
   padding: 0px;
   font-family: Arial, Helvetica, Sans-serif;
   font-size: 13px;
   
  }
  .popupContainerDiv {
   width: 350px;
   min-height: 70px;
  }
  .button {
           border-radius: 4px;
           background-color: #00b5ad;
           border: none;
           color: #FFFFFF;
           text-align: center;
           font-size: 15px;
           padding: 9px;
           width: 150px;
           transition: all 0.5s;
           cursor: pointer;
           margin: 5px;
        }

        .button span {
           cursor: pointer;
           display: inline-block;
           position: relative;
           transition: 0.5s;
        }

        .button span:after {
           content: '\00bb';
           position: absolute;
           opacity: 0;
           top: 0;
           right: -20px;
           transition: 0.5s;
        }

        .button:hover span {
           padding-right: 25px;
        }

        .button:hover span:after {
           opacity: 1;
           right: 0;
        }
  </style>
  
 </head>
 <body>
  <div class="popupContainerDiv">
  <br /><br /><br /><br /><br />
   desicription text text text<br /><br />
   
<center><button class="button" onclick="start_scroll_down();"><span>Start Scroll </span></button>
<button class="button" onclick="stop_scroll_down();"><span>Stop Scroll </span></button></center>

   <center><img src="scroll.gif" alt="Scroll Down icon" height="50%" width="50%"></center>
   
  </div>
 
 </body>

</html>

Thank you

jamal bahadou
  • 39
  • 5
  • 2
    Inline code doesn't work on extension pages by default. Use a separate js file with event listeners for your buttons. Use chrome.tabs.executeScript to inject the scrolling code into the page. – wOxxOm Jul 10 '17 at 06:56
  • where i should Use chrome.tabs.executeScript . in background.js? and what about the 2 buttons where i should add it . thank you – jamal bahadou Jul 10 '17 at 12:03
  • See: [The Chrome extension popup is not working, click events are not handled](https://stackoverflow.com/a/17612988) and [onClick within Chrome Extension not working](https://stackoverflow.com/q/13591983) for the first part of your code request. – Makyen Jul 12 '17 at 03:29

0 Answers0