如何将普通HTML页面用作Chrome扩展程序？

时间：2017-12-23 18:43:14

标签： google-chrome-extension

我设计了我的网页并检查了所有代码。它像网页一样完美。但是，当我收集所有文件作为Chrome扩展文件。它不起作用。特别是＆＃34; TB＆＃34;按钮它不显示其他按钮 这是我的.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>

这是我的.JS文件

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";
  }

这是我的清单文件

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

我需要了解和理解：

  1. 是否需要开发任何特定的编程语言     扩展名？。
  2. 有没有软件可以给我最后的结果     不使用编码？
  3. 为什么我在使用时没有工作     正确的代码？

    4. 谢谢

0 个答案:

没有答案
相关问题
最新问题