-1
我正在創建一個擴展，其中有兩個選項卡，顯示不同的值..我寫了創建選項卡的代碼，它在瀏覽器中也工作..但是當我使用相同的代碼爲我的谷歌擴展它沒有工作。有人可以幫助我這個..如何在我的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>
所以有人可以幫助我與此。
謝謝
在Chrome擴展中，您需要使用Tabs API，請參閱[此處]（https://developer.chrome.com/extensions/tabs#method-create）獲取文檔。確保在清單文件中包含'tabs'權限以使其可用。另外，請確保您的CSS和JS文件是外部的 - 內嵌腳本在chrome擴展中不起作用。 – 2015-01-04 11:36:21
我是鉻擴展新手。所以我可以舉一個例子來說明如何去做 – 2015-01-04 13:59:19
@ṧнʊß：給定OP的代碼，我相信OP指的是HTML文檔中的一個選項卡，而不是瀏覽器選項卡。 – 2015-01-04 14:22:43