如何在我的 chrome 扩展中创建选项卡答案

【问题标题】：How to create a Tab in my chrome extension如何在我的 chrome 扩展中创建选项卡
【发布时间】：2015-01-04 11:16:07
【问题描述】：

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

<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>

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

谢谢

【问题讨论】：

在 Chrome 扩展程序中，您需要使用 Tabs API，有关文档，请参阅 here。确保您在清单文件中包含 tabs 权限以使其正常工作。此外，请确保您的 CSS 和 JS 文件是外部文件 - 内联脚本在 chrome 扩展中不起作用。
我是 chrome 扩展的新手。那么我可以举一个例子来说明如何做到这一点
@ṧнʊß：鉴于 OP 的代码，我相信 OP 指的是 HTML 文档中的选项卡，而不是浏览器选项卡。
@Qantas94Heavy 你说得对！对不起！
@StephenRodriguez 对不起 - 我误解了“标签”这个词。请无视我所说的一切！！我只是看了你的代码，错过了重点。

标签： javascript html google-chrome google-chrome-extension tabs

【解决方案1】：

Chrome 扩展程序不能有内嵌脚本，您必须将脚本放在一个文件中并引用该文件。

所以将你的标签内容移动到一个文件中，然后引用脚本。

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

【讨论】：