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

Question

Bootstrap tabs in my HTML file我的 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>

I already added tabs permission in manifest.json file我已经在 manifest.json 文件中添加了选项卡权限

I am calling jquery and bootstrap files locally.我在本地调用 jquery 和引导文件。

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.无法启动 'unsafe:chrome-extension://I3444234444443/Index.html#A' 因为该方案没有注册的处理程序。

Answer 1

The popup file is a html file, you cannot request index.html#A .弹出文件是 html 文件，您不能请求index.html#A 。

Answer 2

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:在 manifest.json 中配置弹出窗口：

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

Then use bootstrap in 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>

Note in the head section of the popup (line 4), I have added custom styles to make sure the popup width/height is fixed;注意在弹出窗口的头部（第 4 行），我添加了自定义 styles 以确保弹出窗口的宽度/高度是固定的； otherwise the popup will be sized to content.否则弹出窗口将根据内容调整大小。

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

问题描述

2 个解决方案

解决方案1
0 2021-11-27 10:31:40

解决方案2
0 2021-11-28 05:55:36

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

问题描述

2 个解决方案

解决方案1 0 2021-11-27 10:31:40

解决方案2 0 2021-11-28 05:55:36

解决方案1
0 2021-11-27 10:31:40

解决方案2
0 2021-11-28 05:55:36