CODEWITHSUNDEEP
javascriptgoogle-chrome-extension
Markus
Markus

Reputation: 452

Bootstrap Multiselect inside default_popup chrome extension manifest v3?

Does anyone know if the Boostrap Multiselect plugin works in default_popup for chrome extensions with Manifest V3?

I saved jQuery, Bootstrap & Boostrap Multiselect into the chrome extension and loaded them within popup.js as per guide on the plugins page.

Popup.html

<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<!--<script type="text/javascript" src="js/jquery.min.js"></script>-->
<script type="text/javascript" src="js/jquery-2.2.4.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>
<script src="popup.js"></script>

since I can't initialise the plugin within popup.html

<script type="text/javascript">
    $(document).ready(function() {
        $('#example-getting-started').multiselect();
    });
</script>

as I get the error:

Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self'". Either the 'unsafe-inline' keyword, a hash ('sha256-4lndvGzcMkUnvdfuDCzL0sOEfIW9cdivCN8IPHGBevM='), or a nonce ('nonce-...') is required to enable inline execution.

popup.html:121 Refused to execute inline script because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'". Either the 'unsafe-inline' keyword, a hash ('sha256-4lndvGzcMkUnvdfuDCzL0sOEfIW9cdivCN8IPHGBevM='), or a nonce ('nonce-...') is required to enable inline execution.

thus I placed it into popup.js

$(document).ready(function() {
    $('#example-getting-started').multiselect({
    });
console.log("multiselect");
});

I'm not getting any error message in the console within extension popup (only the log message) but bootstrap multiselect is not showing, only a button "None selected".

Upvotes: 1

Views: 279

Answers (2)

user1731468
user1731468

Reputation: 1000

For Manifest V2

Verify that you have added the 'unsafe-inline' to your content security policy manifest.json file.

"content_security_policy": "default-src 'none'; style-src 'self' 'unsafe-inline'; script-src 'self' 'unsafe-inline'; object-src 'none'",

Upvotes: 1

Markus
Markus

Reputation: 452

Turns out I'm using Bootstrap v5 which isn't supported https://github.com/davidstutz/bootstrap-multiselect/issues/1226, max v4.

The guide doesn't mention this, only max jQuery v 2.x is pointed out.

Also then console complained about missing popper.js but after adding this it worked.

Upvotes: 0

Related Questions