I'm trying to make an extension for google meet, and wanted to do tabs as a menu for selecting different functions. When I load index.html in browser everything seems to work fine, but once imported as an extension the tabs stop working. I was following this tutorial: https://www.w3schools.com/howto/howto_js_tabs.asp
Manifest:
{
"manifest_version": 2,
"name": "Google Meet Manager",
"description": "Google Meet Manager: on time, number of members, minutes",
"version": "1.2.1",
"browser_specific_settings": {
"gecko": {
"id": "addon@Gorbiel",
"strict_min_version": "42.0"
}
},
"author": "Gorbiel",
"icons": {
"512": "images/logo-512px.png"
},
"browser_action": {
"default_icon": "images/logo-32px.png",
"default_popup": "index.html",
"default_title": "Google Meet Manager"
},
"permissions": [
"http://meet.google.com/*",
"https://meet.google.com/*"
],
"content_scripts": [
{
"js": [
"background.js"
],
"matches": [
"http://meet.google.com/*",
"https://meet.google.com/*"
]
}
]
}
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Google Meet Manager v1.2.1</title>
</head>
<body>
<div class="container">
<div class="sidebar">
<button class="tablinks" onClick="openTab(event, 'main')">
<div class="sidebarLogoIcon"></div>
</button>
<button class="tablinks" onClick="openTab(event, 'exit')">
<div class="sidebarExitIcon"></div>
</button>
<button class="tablinks" onClick="openTab(event, 'options')">
<div class="sidebarSettingsIcon"></div>
</button>
</div>
<div id="exit" class="tabcontent">
<div class="heading">Auto Exit based on:</div>
<div class="timeicon"></div>
<div class="membericon"></div>
<div class="minutesicon"></div>
<div class="enter">ENTER:</div>
<input type="time" class="inputvalue">
<div class="hourglassicon"></div>
<div class="confirmIcon"></div>
<div class="CancelIcon"></div>
<script src="vmaster.js"></script>
</div>
<div id="options" class="tabcontent">
<div class="heading">Settings</div>
</div>
<div id="main" class="tabcontent">
<div class="heading">Logo page</div>
</div>
<script src="tabs.js"></script>
</div>
</body>
</html>
css:
@import url('https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@600&display=swap');
body{
margin: 0px 0px;
}
.container{
position: relative;
width:250px;
height:200px;
background-color: #444444;
}
.tabcontent {
display: none;
}
.sidebar{
position: absolute;
top: 0px;
left: 0px;
height: 200px;
width: 50px;
background-color: #303030;
overflow: hidden;
}
.sidebar button {
background-color: inherit;
float: left;
border: none;
outline: none;
cursor: pointer;
transition: 0.3s;
}
.sidebar button:hover {
opacity: 0.5;
}
.sidebar button.active {
background-color: #444444;
}
.sidebarLogoIcon{
position: absolute;
top: 5px;
left: 5px;
background-image: url(images/logoBW-40px.png);
background-size: contain;
height: 40px;
width: 40px;
}
.sidebarExitIcon{
position: absolute;
top: 105px;
left: 5px;
background-image: url(images/exit-40px.png);
background-size: contain;
height: 40px;
width: 40px;
}
.sidebarSettingsIcon{
position: absolute;
top: 155px;
left: 5px;
background-image: url(images/settings-40px.png);
background-size: contain;
height: 40px;
width: 40px;
}
.heading{
position: absolute;
top: 10px;
left: 65px;
font-size: 15px;
font-family: 'Source Code Pro', monospace;
color: #b3b3b3;
}
.timeicon{
position: absolute;
top: 45px;
left: 75px;
background-image: url(images/clock-40px.png);
background-size: cover;
height:40px;
width: 40px;
}
.timeicon:hover{
opacity: 0.5;
cursor: pointer;
}
.membericon{
position: absolute;
top: 45px;
left: 130px;
background-image: url(images/members-40px.png);
background-size: cover;
height:40px;
width: 40px;
}
.membericon:hover{
opacity: 0.5;
cursor: pointer;
}
.minutesicon{
position: absolute;
top: 45px;
left: 190px;
background-image: url(images/stopwatch-40px.png);
background-size: cover;
height:40px;
width: 40px;
}
.minutesicon:hover{
opacity: 0.5;
cursor: pointer;
}
.enter{
position:absolute;
top: 102px;
left:172px;
font-family: 'Source Code Pro', monospace;
color: #b3b3b3
}
.confirmIcon{
position: absolute;
top: 155px;
left: 157px;
background-image: url(images/confirm-32px.png);
background-size: cover;
height:32px;
width: 32px;
}
.confirmIcon:hover{
opacity: 0.5;
cursor: pointer;
}
.CancelIcon{
position: absolute;
top: 155px;
left: 196px;
background-image: url(images/cancel-32px.png);
background-size: cover;
height:32px;
width: 32px;
}
.CancelIcon:hover{
opacity: 0.5;
cursor: pointer;
}
.inputvalue{
position: absolute;
top:125px;
left: 125px;
}
.inputvalue:hover{
cursor: text;
}
.hourglassicon{
position: absolute;
top: 130px;
left: 65px;
background-image: url(images/animated.gif);
background-size: contain;
height:48px;
width: 48px;
visibility: hidden;
}
tabs.js:
function openTab(evt, tabName) {
var i, tabcontent, tablinks;
tabcontent = document.getElementsByClassName("tabcontent");
console.log(tabcontent);
for (i = 0; i < tabcontent.length; i++) {
tabcontent[i].style.display = "none";
}
console.log(tabcontent);
tablinks = document.getElementsByClassName("tablinks");
console.log(tablinks);
for (i = 0; i < tablinks.length; i++) {
tablinks[i].className = tablinks[i].className.replace(" active", "");
}
console.log(tablinks);
document.getElementById(tabName).style.display = "block";
evt.currentTarget.className += " active";
}
Here's the link to the branch on github if you need additional files: https://github.com/Gorbiel/Google-Meet-Manager/tree/main-newUI
