Bootstrap tabs in my HTML file
<div class="tabbable-line">
<ul class="nav nav-tabs ">
<li class="active">
<a href="#A" class="active" data-toggle="tab">A</a>
</li>
<li>
<a href="#B" data-toggle="tab">B</a>
</li>
<li>
<a href="#C" data-toggle="tab">C</a>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane" id="A">
<h2>Atab</h2>
</div>
<div class="tab-pane" id="B">
<p>B tab</p>
</div>
<div class="tab-pane" id="C">
<p>C tab</p>
</div>
</div>
I already added tabs permission in manifest.json file
I am calling jquery and bootstrap files locally.
When I am clicking any of the tabs.
I am getting this below error:
Failed to launch 'unsafe:chrome-extension://I3444234444443/Index.html#A' because the scheme does not have a registered handler.
You can use bootstrap in extension popup, but the original example seems to be missing some required attributes. I will share a minimal working example.
This example assumes having bootstrap dependencies (which can be downloaded here), available at extension root directory. The extension project should contain the following files:
* bootstrap.min.css
* bootstrap.min.js
* manifest.json
* popup.html
Configure popup in manifest.json:
{
"name": "My Extension",
"version": "1.0",
"manifest_version": 3,
"action": {
"default_popup": "popup.html"
}
}
Then use bootstrap in popup.html:
<html>
<head>
<link href="bootstrap.min.css" rel="stylesheet"/>
<style>body { width: 500px; height: 500px; padding: 1em; }</style>
</head>
<body>
<ul class="nav nav-tabs">
<li class="nav-item">
<button class="nav-link active" data-bs-target="#tabs-a"
data-bs-toggle="tab">Tab A</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-target="#tabs-b"
data-bs-toggle="tab">Tab B</button>
</li>
<li class="nav-item">
<button class="nav-link" data-bs-target="#tabs-c"
data-bs-toggle="tab">Tab C</button>
</li>
</ul>
<div class="tab-content">
<div class="tab-pane show active" id="tabs-a">Tab A content</div>
<div class="tab-pane" id="tabs-b">Tab B content</div>
<div class="tab-pane" id="tabs-c">Tab C content</div>
</div>
<script src="bootstrap.min.js"></script>
</body>
</html>
Note in the head section of the popup (line 4), I have added custom styles to make sure the popup width/height is fixed; otherwise the popup will be sized to content.
The popup file is a html file, you cannot request index.html#A.