I have some Bootstrap tabs in my HTML file:
<!doctype html>
<!-- jQuery -->
<script src=".1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href=".3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href=".3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest piled and minified JavaScript -->
<script src=".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:
The code in the browser allows me to change tabs, but the one in the Chrome browser extension one doesn't. What is the reason to this, and how can I get Bootstrap to work in the Chrome extension?
I have some Bootstrap tabs in my HTML file:
<!doctype html>
<!-- jQuery -->
<script src="https://code.jquery./jquery-3.1.1.min.js" integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8=" crossorigin="anonymous"></script>
<!-- Latest piled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn./bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- Latest piled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn./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:
The code in the browser allows me to change tabs, but the one in the Chrome browser extension one doesn't. What is the reason to this, and how can I get Bootstrap to work in the Chrome extension?
Share Improve this question asked Feb 22, 2017 at 1:33 db2791db2791 1,1106 gold badges18 silver badges32 bronze badges2 Answers
Reset to default 8We can use external JavaScripts. Read this.
In your manifest.json add content_security_policy key. i.e
"content_security_policy": "script-src 'self' https://ajax.googleapis. https://stackpath.bootstrapcdn.; object-src 'self';"
I'm using jQuery as well as Bootstrap.
In your case add this line in your manifest.json
"content_security_policy": "script-src 'self' https://maxcdn.bootstrapcdn.; object-src 'self';"
It turns out you can't link external Javascript files at the top of your HTML file. I had to download the Bootstrap files and save them locally in order for them to be used in an extension.