CODEWITHSUNDEEP
javascripthtmlcsstwitter-bootstrapgoogle-chrome
db2791
db2791

Reputation: 1110

Bootstrap tabs in Chrome extension popup

I have some Bootstrap tabs in my HTML file:

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

enter image description here

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?

Upvotes: 1

Views: 12270

Answers (2)

Harshil Modi
Harshil Modi

Reputation: 436

We 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.com https://stackpath.bootstrapcdn.com; 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.com; object-src 'self';"

Upvotes: 8

db2791
db2791

Reputation: 1110

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.

Upvotes: 7

Related Questions