Chrome 扩展弹出窗口中的 Bootstrap 选项卡
[英]Bootstrap tabs in Chrome extension popup
问题描述
I have some Bootstrap tabs in my HTML file:
我的 HTML 文件中有一些 Bootstrap 选项卡：
<!doctype html>
<!-- jQuery -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<style type="text/css">
#mainPopup {
padding: 10px;
height: 400px;
width: 288px;
font-family: Helvetica, Ubuntu, Arial, sans-serif;
}
</style>
<html lang="en">
<div class="container" id="mainPopup">
<ul class="nav nav-tabs">
<li class="nav active"><a href="#A" data-toggle="tab">A</a></li>
<li class="nav"><a href="#B" data-toggle="tab">B</a></li>
<li class="nav"><a href="#C" data-toggle="tab">C</a></li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane fade in active" id="A">Content inside tab A</div>
<div class="tab-pane fade" id="B">Content inside tab B</div>
<div class="tab-pane fade" id="C">Content inside tab C</div>
</div>
</div>
</html>
Here is the HTML being displayed in a webpage and in a Chrome extension:以下是网页和 Chrome 扩展程序中显示的 HTML：
The code in the browser allows me to change tabs, but the one in the Chrome browser extension one doesn't.浏览器中的代码允许我更改标签，但 Chrome 浏览器扩展程序中的代码不允许。 What is the reason to this, and how can I get Bootstrap to work in the Chrome extension?这是什么原因，我怎样才能让 Bootstrap 在 Chrome 扩展中工作？
2 个解决方案
解决方案1
4 已采纳 2017-02-22 17:20:52
It turns out you can't link external Javascript files at the top of your HTML file.事实证明，您无法在 HTML 文件的顶部链接外部 Javascript 文件。 I had to download the Bootstrap files and save them locally in order for them to be used in an extension.我必须下载 Bootstrap 文件并将它们保存在本地，以便在扩展中使用它们。
解决方案2
2 2020-06-13 07:37:36
We can use external JavaScripts.我们可以使用外部 JavaScript。 Read this . 读这个。
In your manifest.json add content_security_policy key.在您的manifest.json添加content_security_policy密钥。 ie IE
"content_security_policy": "script-src 'self' https://ajax.googleapis.com https://stackpath.bootstrapcdn.com; object-src 'self';"
I'm using jQuery as well as Bootstrap.我正在使用 jQuery 以及 Bootstrap。
In your case add this line in your manifest.json在您的情况下，在manifest.json添加这一行
"content_security_policy": "script-src 'self' https://maxcdn.bootstrapcdn.com; object-src 'self';"
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.