Bootstrap tabs is not working in chrome extension popup-CodePudding

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.

CodePudding user response：

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.

CodePudding user response：

The popup file is a html file, you cannot request index.html#A.