引导选项卡在 chrome 扩展弹出窗口中不起作用答案

【问题标题】：Bootstrap tabs is not working in chrome extension popup引导选项卡在 chrome 扩展弹出窗口中不起作用
【发布时间】：2022-01-05 00:09:11
【问题描述】：

HTML 文件中的引导选项卡

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

我已经在 manifest.json 文件中添加了 tabs 权限

我在本地调用 jquery 和 bootstrap 文件。

当我点击任何标签时。

我收到以下错误：

无法启动“unsafe:chrome-extension://I3444234444443/Index.html#A”，因为该方案没有注册的处理程序。

【问题讨论】：

标签： javascript jquery twitter-bootstrap google-chrome-extension tabs

【解决方案1】：

您可以在扩展弹出窗口中使用引导程序，但原始示例似乎缺少一些必需的属性。我将分享一个最小的工作示例。

此示例假定具有引导程序依赖项 (which can be downloaded here)，在扩展根目录中可用。扩展项目应包含以下文件：

* bootstrap.min.css
* bootstrap.min.js
* manifest.json
* popup.html

在 manifest.json 中配置弹出窗口：

{
  "name": "My Extension",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "popup.html"
  }
}

然后在popup.html中使用bootstrap：

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

注意在弹出窗口的头部（第 4 行），我添加了自定义样式以确保弹出窗口的宽度/高度是固定的；否则弹出窗口将根据内容调整大小。

【讨论】：

【解决方案2】：

弹出文件是html文件，不能请求index.html#A。

【讨论】：