使用2个按钮创建Chrome扩展程序

时间:2017-07-09 22:24:55

标签: javascript google-chrome-extension

你好,我是初学者,我想创建一个简单的chrome扩展供个人使用,使网页自动向下滚动。它适用于处理社交网络页面或其他自动上传资源。

我有2个按钮和2个javascript代码如果我点击第一个页面自动向下滚动而另一个将停止滚动

这是我发现开始滚动的代码:

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

并且此代码必须将其停止

clearInterval(scroll);

这是我创建的文件:

的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>
&#13;
&#13;
&#13;

谢谢

0 个答案:

没有答案