davidstutz / bootstrap-multiselect

JQuery multiselect plugin based on Twitter Bootstrap.
https://davidstutz.github.io/bootstrap-multiselect/
Other
3.67k stars 1.98k forks source link

Does it work within default_popup in a chrome extension? #1243

Open markusd1984 opened 1 year ago

markusd1984 commented 1 year ago

See my post on Stackoverflow:

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".

Note: As far I understand manifest version 3 doesn't support 'unsafe-inline' directive.

markusd1984 commented 1 year ago

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

Surprised the guide doesn't mention this, would be great to have a note just like max jQuery v 2.x is pointed out, Ideally a check that throws an error in the console.

Also then popper.js was missing for the dropdown, neither found any reference within the guide on this one.