Question

我正在创建一个扩展，其中有两个选项卡显示不同的值。我编写了用于创建选项卡的代码，它也在浏览器中工作..但是当我使用相同的代码进行我的Google扩展时，它无法正常工作。有人可以帮我解决这个问题吗。

<html>
<head>
<style type="text/css">
*{
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
     box-sizing: border-box;
 }
.tab_wrap{
     border:1px solid #999;
     max-width:300px;
     width: 100%;
 }
.tabs {
     width: 100%;
     margin: auto;
     overflow: hidden;  
     background: #F9F9F9;
  }
.tabs ul {
     list-style: none;
     overflow: hidden;
     padding: 0;
     margin: 0;     
  }
.tabs li a {
     width:50%; 
     color: #444444;
     display: block;
     float: left;
     font-weight:bold;  
     padding: 10px;
     text-align: center;
     text-decoration: none;
     border:none;
     border-left:1px solid #d9d9d9;
     border-bottom:1px solid #d9d9d9;   
  }
.tabs li a:hover {
     color: #7d7d7d;    
     background:#FFFFFF;
  }
.tabs li:first-child a {
     border-left:none;
  }
.tabs li a.active {
     background:#FFFFFF;
     border:none;
     border-left:1px solid #d9d9d9;
     border-bottom:1px solid #FFFFFF;   
  }
.tabs li:first-child a.active {
     border:none;
     border-bottom:1px solid #FFFFFF;   
  }
.tabs li:last-child a.active {
     border:none;
     border-left:1px solid #d9d9d9; 
     border-bottom:1px solid #FFFFFF;   
  }
.tab_content {
     background:#FFF;
     padding:0;
     display:none;  
  }
.tab_content.active{
     display:block; 
  }
.tab_content ul {
     margin:0px;
     padding:0px;
     list-style:none;   
  }
.tab_content li {
     display:block;
     overflow: hidden;  
     border-bottom:1px solid #d6dde0;   
  }
.tab_content li:last-child {
     border-bottom:none;
  }
.tab_content li a {
     display:block;
     list-style:none;
     overflow: hidden;  
     padding:10px;          
     text-decoration:none;
     color:#444444;
  }
.tab_content li a:hover {
     color:#000000;
     background:#F5F5F5;    
  }
.tab_content li small {
     color:#AAAAAA;
     font-size:11px;
     font-style:italic;
  }
.tab_content li a:hover small {
     color:#AAAAAA;
  }
</style>

 <script type="text/javascript" >
 function tabs(selectedtab) {   

     var s_tab_content = "tab_content_" + selectedtab;  
     var contents = document.getElementsByTagName("div");
     for(var x=0; x<contents.length; x++) {
         name = contents[x].getAttribute("name");
         if (name == 'tab_content') {
             if (contents[x].id == s_tab_content) {
             contents[x].style.display = "block";                       
             } else {
             contents[x].style.display = "none";
             }
         }
     }

    var s_tab = "tab_" + selectedtab;       
    var tabs = document.getElementsByTagName("a");
    for(var x=0; x<tabs.length; x++) {
        name = tabs[x].getAttribute("name");
         if (name == 'tab') {
             if (tabs[x].id == s_tab) {
             tabs[x].className = "active";                      
             } else {
             tabs[x].className = "";
             }
        }
     }    
 }
 </script>

 </head>
 <body>

 <div class="tab_wrap">           
     <div class="tabs">
         <ul>
             <li><a name="tab" id="tab_1" href="javascript:void(0)" onClick="tabs(1)" class="active">Tab 1</a></li>
             <li><a name="tab" id="tab_2" href="javascript:void(0)" onClick="tabs(2)">Tab 2</a></li>
         </ul>
     </div>                
     <div name="tab_content" id="tab_content_1" class="tab_content active">
         <ul>
             <li><a href="#">Article 1<br /><small>2012.01.01.</small></a></li>
             <li><a href="#">Article 2<br /><small>2012.01.02.</small></a></li>
             <li><a href="#">Article 3<br /><small>2012.01.03.</small></a></li>
             <li><a href="#">Article 4<br /><small>2012.01.04.</small></a></li>
             <li><a href="#">Article 5<br /><small>2012.01.05.</small></a></li>
         </ul>
     </div>
     <div name="tab_content" id="tab_content_2" class="tab_content">
         <ul>
             <li><a href="#">Article 1<br /><small>2012.01.01.</small></a></li>
             <li><a href="#">Article 2<br /><small>2012.01.02.</small></a></li>
             <li><a href="#">Article 3<br /><small>2012.01.03.</small></a></li>
         </ul>
     </div>
 </div> 

 </body>
 </html>

所以有人可以帮我解决这个问题。

谢谢

Answer 1

Chrome扩展程序不能包含内嵌脚本，而是必须将脚本放在文件中并引用该文件。

然后将标记的内容移动到文件中，然后引用该脚本。

<script src="scriptfile.js"></script>

如何在我的chrome扩展中创建一个Tab

1 个答案: