Как создать вкладку в моем расширении chrome

-1

Я создаю расширение, которое имеет две вкладки, показывающие разные значения. Я написал код для создания вкладки, и он также работал в браузере. Но когда я использовал тот же код для моего расширения Google это не сработало. Может кто-то помочь мне с этим.Как создать вкладку в моем расширении chrome

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

так может кто-то помочь мне с этим.

спасибо

источник

2015-01-04 Stephen Rodriguez

В Extension Chrome, необходимо использовать API Вкладки см [здесь] (https://developer.chrome.com/extensions/tabs#method-create) для документации. Убедитесь, что вы включили в файл манифеста разрешение 'tabs' для этого. Кроме того, убедитесь, что ваши файлы CSS и JS являются внешними. Встроенные скрипты не работают в расширениях chrome. –

Я новичок в хром-расширениях. поэтому я могу привести пример того, как это сделать. –

@ ṧнʊß: учитывая код OP, я считаю, что OP ссылается на вкладку внутри HTML-документа, а не на вкладку браузера. –

расширений Chrome не может иметь в онлайн-сценарии, вместо этого вы должны поместить скрипт в файл и ссылку на файл.

Так перемещайте содержимое своего тега в файл, а затем ссылайтесь на скрипт.

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

источник

2015-01-04 19:39:57 Alex

Как создать вкладку в моем расширении chrome

ответ

Смежные вопросы