0

i design my webpage and checked all the code. it works perfect as webpage. however, when i collect all the files to work as Chrome extension file. It doesn't work. specially the "TB" button it doesn't show the other buttons this is my .HTML

<!DOCTYPE HTML>
<html>
<head>
  <script src="popup.js"></script>
  <script src="http://code.jquery.com/jquery-latest.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Page</title>
<style type="text/css">
    body
{
   background-color: #FFFFFF;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
   margin: 0;
   padding: 0;
        height: 473px;
        width: 1315px;
    }

nav {

    max-width: 500px;
    border-right: 1px solid gray;
    border-top: 1px solid gray;
    position: absolute;left:50px;top:150px;

}

article {
    margin-left: 370px;
    padding: 1em;
    position: absolute; top:150px;
    overflow: hidden;
}
</style>
<style type="text/css">
a
{
   color: #0000FF;
   text-decoration: underline;
}
a:visited
{
   color: #800080;
}
a:active
{
   color: #FF0000;
}
a:hover
{
   color: #0000FF;
   text-decoration: underline;
}
#Button1
{
   border: 1px #A9A9A9 solid;
   background-color: #F0F0F0;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
}
#Button2
{
   border: 1px #A9A9A9 solid;
   background-color: #F0F0F0;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
}
#Button3
{
   border: 1px #A9A9A9 solid;
   background-color: #F0F0F0;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
}
.button_sub
{
   border: 1px #A9A9A9 solid;
   background-color: #F0F0F0;
   color: #000000;
   font-family: Arial;
   font-size: 13px;
}
</style>
</head>
<body>
<div>
<input type="button" id="Button1" value="TB" onclick="main_clicked(1)" style="position:absolute;left:100px;top:50px;width:96px;height:25px;z-index:1;">
</div>

<div id="tb_sub" class="sub_main" style=display:none;>
<input type="button" id="Button4" class="button_sub" value="G" onclick="sub_clicked(1)" style="position:absolute;left:50px;top:100px;width:96px;height:25px;z-index:5;">
<input type="button" id="Button5" class="button_sub" value="X" onclick="sub_clicked(2)" style="position:absolute;left:150px;top:100px;width:96px;height:25px;z-index:6;">
<input type="button" id="Button6" class="button_sub" value="MA" onclick="sub_clicked(3)" style="position:absolute;left:250px;top:100px;width:96px;height:25px;z-index:7;">
<input type="button" id="Button7" class="button_sub" value="T" onclick="sub_clicked(4)" style="position:absolute;left:350px;top:100px;width:96px;height:25px;z-index:8;">
<input type="button" id="Button8" class="button_sub" value="G" onclick="sub_clicked(5)" style="position:absolute;left:450px;top:100px;width:96px;height:25px;z-index:9;">
</div>

<div id="tb_y_sub" class="subsub" style=display:none;>
<nav>
  <ol>
    <li style="height:20px;" onmouseover="show('tb_y_sub1')" onmouseout="hide('tb_y_sub1')"><a href="#">Kids</a></li>
    <li style="height:20px;" onmouseover="show('tb_y_sub2')" onmouseout="hide('tb_y_sub2')"><a href="#">Hateful and Dergatory</a></li>
    <li style="height:20px;" onmouseover="show('tb_y_sub3')" onmouseout="hide('tb_y_sub3')"><a href="#">ILLEGAL ACTS AND SUBSTANCES</a></li>
    <li style="height:20px;" onmouseover="show('tb_y_sub4')" onmouseout="hide('tb_y_sub4')"><a href="#">SEXUAL CONTENT</a></li>
    <li style="height:20px;" onmouseover="show('tb_y_sub5')" onmouseout="hide('tb_y_sub5')"><a href="#">VIOLENCE, DEATH, TRAGEDY</a></li>
    <li style="height:20px;" onmouseover="show('tb_y_sub6')" onmouseout="hide('tb_y_sub6')"><a href="#">HARMFUL, DANGEROUS AND MEDICAL ACTS</a></li>
    <li style="height:20px;" onmouseover="show('tb_y_sub7')" onmouseout="hide('tb_y_sub7')"><a href="#">DEMEANING AND INCENDIARY CONTENT</a></li>
    <li style="height:20px;" onmouseover="show('tb_y_sub8')" onmouseout="hide('tb_y_sub8')"><a href="#">INAPPROPRIATE LANGUAGE</a></li>
  </ol>
</nav>

<article>
  <div id="tb_y_sub1" style=display:none;>
   <h1>Kids</h1>
   <ul data-count="even" style="list-style-type:none">
    <li>Kids Sub Policy</li>
    <li>Kids Sub Policy</li>
 </ul>
  </div>

  <div id="tb_y_sub2" style=display:none;>
   <h1>Hateful and Dergatory</h1>
   <ul data-count="even" style="list-style-type:none">
    <li>Hateful and Dergatory Sub Policy</li>
    <li>Hateful and Dergatory Sub Policy</li>
 </ul>
  </div>

  <div id="tb_y_sub3" style=display:none;>
   <h1>ILLEGAL ACTS AND SUBSTANCES</h1>
   <ul data-count="even" style="list-style-type:none">
    <li>ILLEGAL ACTS AND SUBSTANCES Sub Policy</li>
    <li>ILLEGAL ACTS AND SUBSTANCES Sub Policy</li>
 </ul>
  </div>

  <div id="tb_y_sub4" style=display:none;>
   <h1>SEXUAL CONTENT</h1>
   <ul data-count="even" style="list-style-type:none">
    <li>SEXUAL CONTENT Sub Policy</li>
    <li>SEXUAL CONTENT Sub Policy</li>
 </ul>
  </div>

  <div id="tb_y_sub5" style=display:none;>
   <h1>VIOLENCE, DEATH, TRAGEDY</h1>
   <ul data-count="even" style="list-style-type:none">
    <li>VIOLENCE, DEATH, TRAGEDY Sub Policy</li>
    <li>VIOLENCE, DEATH, TRAGEDY Sub Policy</li>
 </ul>
  </div>

  <div id="tb_y_sub6" style=display:none;>
   <h1>HARMFUL, DANGEROUS AND MEDICAL ACTS</h1>
   <ul data-count="even" style="list-style-type:none">
    <li>HARMFUL, DANGEROUS AND MEDICAL ACTS Sub Policy</li>
    <li>HARMFUL, DANGEROUS AND MEDICAL ACTS Sub Policy</li>
 </ul>
  </div>

  <div id="tb_y_sub7" style=display:none;>
   <h1>DEMEANING AND INCENDIARY CONTENT</h1>
   <ul data-count="even" style="list-style-type:none">
    <li>DEMEANING AND INCENDIARY CONTENT Sub Policy</li>
    <li>DEMEANING AND INCENDIARY CONTENT Sub Policy</li>
  </ul>
  </div>

  <div id="tb_y_sub8" style=display:none;>
   <h1>INAPPROPRIATE LANGUAGE</h1>
   <ul data-count="even" style="list-style-type:none">
    <li>INAPPROPRIATE LANGUAGE Sub Policy</li>
    <li>INAPPROPRIATE LANGUAGE Sub Policy</li>
   </ul>
  </div>
  </article>
  </div>

  <div id="tb_x_sub" class="subsub" style=display:none;>
<nav>
  <ol>
    <li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')"><a href="#">xPolicy 1</a></li>
    <li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')"><a href="#">xPolicy 2</a></li>
</ol>
</nav>

<article>
  <div id="sub1">
   <h1>Policy 1</h1>
   <ul data-count="even" style="list-style-type:none">
    <li>Sub Policy 1</li>
    <li>Sub Policy 1</li>

  </ul>
  </div>
  </article>
  </div>

  <div id="tb_ma_sub" class="subsub" style=display:none;>
<nav>
  <ol>
    <li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')"><a href="#">maPolicy 1</a></li>
    <li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')"><a href="#">maPolicy 2</a></li>
    </ol>
</nav>

<article>
  <div id="sub1">
   <h1>Policy 1</h1>
   <ul data-count="even" style="list-style-type:none">
    <li>Sub Policy 1</li>
    <li>Sub Policy 1</li>

  </ul>
  </div>
  </article>
  </div>

  <div id="tb_t_sub" class="subsub" style=display:none;>
<nav>
  <ol>
    <li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')"><a href="#">tPolicy 1</a></li>
    <li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')"><a href="#">tPolicy 2</a></li>
    </ol>
</nav>
<article>
  <div id="sub1">
   <h1>Policy 1</h1>
   <ul data-count="even" style="list-style-type:none">
    <li>Sub Policy 1</li>
    <li>Sub Policy 1</li>
  </ul>
  </div>
  </article>
  </div>

  <div id="tb_g_sub" class="subsub" style=display:none;>
<nav>
  <ol>
    <li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')"><a href="#">gPolicy 1</a></li>
    <li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')"><a href="#">gPolicy 2</a></li>
</ol>
</nav>
<article>
  <div id="sub1">
   <h1>Policy 1</h1>
   <ul data-count="even" style="list-style-type:none">
    <li>Sub Policy 1</li>
    <li>Sub Policy 1</li>
    </ul>
  </div>
  </article>
  </div>
  <div id="tb_pg_sub" class="subsub" style=display:none;>
<nav>
  <ol>
    <li style="height:20px;" onmouseover="show('sub1')" onmouseout="hide('sub1')"><a href="#">pgPolicy 1</a></li>
    <li style="height:20px;" onmouseover="show('sub2')" onmouseout="hide('sub2')"><a href="#">pgPolicy 2</a></li>
</ol>
</nav>
<article>
  <div id="sub1">
   <h1>Policy 1</h1>
   <ul data-count="even" style="list-style-type:none">
    <li>Sub Policy 1</li>
    <li>Sub Policy 1</li>
 </ul>
  </div>
  </article>
  </div>
 </body>
</html>

and this is my .JS file 

function main_clicked(x){
    document.getElementById("tb_sub").style.display = "none";
    document.getElementById("Button1").style.background='#F0F0F0';
    var elements = document.getElementsByClassName("button_sub");
    for(var i = 0, length = elements.length; i < length; i++) {
    if( elements[i].textContent == ''){
      elements[i].style.background='#F0F0F0';
    } 
   }
    document.getElementById("tb_y_sub").style.display = 'none';
    document.getElementById("tb_x_sub").style.display = 'none';
    document.getElementById("tb_ma_sub").style.display = 'none';
    document.getElementById("tb_t_sub").style.display = 'none';
    document.getElementById("tb_g_sub").style.display = 'none';
    if (x==1){
        document.getElementById("Button1").style.background='#42a7f4';
        document.getElementById("tb_sub").style.display = "block";
    }
  }

   function sub_clicked(x){
        var elements = document.getElementsByClassName("button_sub");
        for(var i = 0, length = elements.length; i < length; i++) {
        if( elements[i].textContent == ''){
          elements[i].style.background='#F0F0F0';
        } 
       }
        document.getElementById("tb_y_sub").style.display = 'none';
        document.getElementById("tb_x_sub").style.display = 'none';
        document.getElementById("tb_ma_sub").style.display = 'none';
        document.getElementById("tb_t_sub").style.display = 'none';
        document.getElementById("tb_g_sub").style.display = 'none';

        if (x==1){
            document.getElementById("Button4").style.background='#42a7f4';
            document.getElementById("tb_y_sub").style.display = 'block';

        }
        if (x==2){
            document.getElementById("Button5").style.background='#42a7f4';
            document.getElementById("tb_x_sub").style.display = 'block';

        }
        if (x==3){
            document.getElementById("Button6").style.background='#42a7f4';
            document.getElementById("tb_ma_sub").style.display = "block";
        }
        if (x==4){
            document.getElementById("Button7").style.background='#42a7f4';
            document.getElementById("tb_t_sub").style.display = "block";
        }
        if (x==5){
            document.getElementById("Button8").style.background='#42a7f4';
            document.getElementById("tb_g_sub").style.display = "block";
        }
     }
  function show(x) {
    document.getElementById(x).style.display = "block";
  }
  function hide(x) {
    document.getElementById(x).style.display = "none";
  }

and this is my manifest file 

{
"name": "Easypolicy",
"description": "Easypolicy",
"version": "1.0",   
"manifest_version": 2,
    "browser_action": {
    "default_icon": "icon.png",       
    "default_popup": "popup.html"
    }
}

i need to know and understand :

  1. is there any specific programming language required to develop the extension?.
  2. is there any software can give me the last result without using the coding?
  3. why it doesn't work while im using the right code?

thank you

Saqer Saleh
  • 21
  • 3
  • Inline code inside onclick and other attributes doesn't work in extension pages. – wOxxOm Dec 23 '17 at 22:11
  • Possible duplicate of [onClick within Chrome Extension not working](https://stackoverflow.com/questions/13591983/onclick-within-chrome-extension-not-working) – wOxxOm Dec 23 '17 at 22:12
  • add listeners in your pop.js. Also, put pop.js at end of the file. At first CSS then body and last is javascript. – Kumar Dec 24 '17 at 11:22

0 Answers0