我的 HTML 檔案中的 Bootstrap 選項卡
<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”，因為該方案沒有注冊的處理程式。
uj5u.com熱心網友回復：
您可以在擴展彈出視窗中使用引導程式，但原始示例似乎缺少一些必需的屬性。我將分享一個最小的作業示例。
此示例假定具有引導程式依賴項（可在此處下載），可在擴展根目錄中找到。擴展專案應包含以下檔案：
* 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 行），我添加了自定義樣式以確保彈出視窗的寬度/高度是固定的；否則彈出視窗的大小將調整為內容。
uj5u.com熱心網友回復：
彈出檔案是一個 html 檔案，您不能請求index.html#A.
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/368859.html
標籤：javascript 查询 推特引导 谷歌浏览器扩展 标签