Popup
This commit is contained in:
		
							parent
							
								
									2f09f1bae1
								
							
						
					
					
						commit
						483b8d48d2
					
				
							
								
								
									
										63
									
								
								popup.html
									
									
									
									
									
								
							
							
						
						
									
										63
									
								
								popup.html
									
									
									
									
									
								
							| 
						 | 
					@ -5,41 +5,68 @@
 | 
				
			||||||
    <style>
 | 
					    <style>
 | 
				
			||||||
      body {
 | 
					      body {
 | 
				
			||||||
        overflow: hidden;
 | 
					        overflow: hidden;
 | 
				
			||||||
        margin: 5px;
 | 
					        margin: 0;
 | 
				
			||||||
        padding: 5px;
 | 
					        padding: 5px;
 | 
				
			||||||
        background: #fff;
 | 
					        background: #fff;
 | 
				
			||||||
      }
 | 
					        width: 150px;
 | 
				
			||||||
 | 
					 | 
				
			||||||
      div:first-child {
 | 
					 | 
				
			||||||
        margin-top: 0px;
 | 
					 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
      
 | 
					      
 | 
				
			||||||
      div{
 | 
					      div{
 | 
				
			||||||
 | 
					        width: 150px;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      button {
 | 
				
			||||||
 | 
					        border: none;
 | 
				
			||||||
 | 
					        border-radius: 5px;
 | 
				
			||||||
        text-align: center;
 | 
					        text-align: center;
 | 
				
			||||||
        padding: 5px 3px;
 | 
					        padding: 5px 3px;
 | 
				
			||||||
        font-family: sans-serif;
 | 
					        font-family: sans-serif;
 | 
				
			||||||
        font-size: 1.4em;
 | 
					        font-size: 1em;
 | 
				
			||||||
        width: 110px;
 | 
					        width: 140px; 
 | 
				
			||||||
        margin-top: 5px;
 | 
					        margin-bottom: 10px;  
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					      
 | 
				
			||||||
 | 
					      .enable {
 | 
				
			||||||
 | 
					        color: #A43B00;
 | 
				
			||||||
        background: #FFE2BF;
 | 
					        background: #FFE2BF;
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
      div:hover {
 | 
					      
 | 
				
			||||||
 | 
					      .enable:hover {
 | 
				
			||||||
        background: #FFD19A;
 | 
					        background: #FFD19A;
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
      #enable {
 | 
					
 | 
				
			||||||
        border: 5px solid #FF8B00;
 | 
					      .disable {
 | 
				
			||||||
        color: #A43B00;
 | 
					        color: #fcf9fa;
 | 
				
			||||||
 | 
					        background: #b2aeaf;
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
      #disable {
 | 
					
 | 
				
			||||||
        border: 5px solid #FF8B00;
 | 
					      .disable:hover {
 | 
				
			||||||
        color: #A43B00;
 | 
					        background: #4c4b4c;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      #rule {
 | 
				
			||||||
 | 
					        color: #4c4b4c;
 | 
				
			||||||
 | 
					        background: #a5e569;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					      
 | 
				
			||||||
 | 
					      #rule:hover {
 | 
				
			||||||
 | 
					        background: #96d160;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      img {
 | 
				
			||||||
 | 
					        margin-left: auto;
 | 
				
			||||||
 | 
					        margin-right: auto;
 | 
				
			||||||
 | 
					        display: block;
 | 
				
			||||||
      }
 | 
					      }
 | 
				
			||||||
    </style>
 | 
					    </style>
 | 
				
			||||||
    <script src="popup.js"></script>
 | 
					    <script src="popup.js"></script>
 | 
				
			||||||
  </head>
 | 
					  </head>
 | 
				
			||||||
  <body>
 | 
					  <body>
 | 
				
			||||||
    <div id="enable"><b>Enable</b></div>
 | 
					    <div>
 | 
				
			||||||
    <div id="disable"><b>Disable</b></div><br>
 | 
					      <button id="status" class="enable" onclick="changeStatus()">Global Enable</button><br>
 | 
				
			||||||
	<img src="icon128.png"></img>
 | 
					      <button id="exception" class="enable" onclick="handleException()">Enable on page</button><br>
 | 
				
			||||||
 | 
					      <button id="rule">Add rule</button><br>
 | 
				
			||||||
 | 
					      <img src="icon96.png"></img>
 | 
				
			||||||
 | 
					    </div>
 | 
				
			||||||
  </body>
 | 
					  </body>
 | 
				
			||||||
</html>
 | 
					</html>
 | 
				
			||||||
							
								
								
									
										30
									
								
								popup.js
									
									
									
									
									
										Normal file
									
								
							
							
						
						
									
										30
									
								
								popup.js
									
									
									
									
									
										Normal file
									
								
							| 
						 | 
					@ -0,0 +1,30 @@
 | 
				
			||||||
 | 
					var status = "on";
 | 
				
			||||||
 | 
					      var exception = "off";
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      function changeStatus(){
 | 
				
			||||||
 | 
					        var element = document.getElementById('status');
 | 
				
			||||||
 | 
					        var val = "Global Enable";
 | 
				
			||||||
 | 
					        if(status == "on"){
 | 
				
			||||||
 | 
					          val = " Global Disable";
 | 
				
			||||||
 | 
					          status = "off";
 | 
				
			||||||
 | 
					          element.className = "disable";
 | 
				
			||||||
 | 
					        }else{
 | 
				
			||||||
 | 
					          status = "on";
 | 
				
			||||||
 | 
					          element.className = "enable";
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        element.innerHTML = val;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
 | 
					
 | 
				
			||||||
 | 
					      function handleException(){
 | 
				
			||||||
 | 
					        var element = document.getElementById('exception');
 | 
				
			||||||
 | 
					        var val = "Enable on page";
 | 
				
			||||||
 | 
					        if(exception == "off"){
 | 
				
			||||||
 | 
					          val = "Disable on page";
 | 
				
			||||||
 | 
					          exception = "on";
 | 
				
			||||||
 | 
					          element.className = "disable";
 | 
				
			||||||
 | 
					        }else{
 | 
				
			||||||
 | 
					          exception = "off";
 | 
				
			||||||
 | 
					          element.className = "enable";
 | 
				
			||||||
 | 
					        }
 | 
				
			||||||
 | 
					        element.innerHTML = val;
 | 
				
			||||||
 | 
					      }
 | 
				
			||||||
		Loading…
	
		Reference in New Issue
	
	Block a user