bootstrap-multiselect icon indicating copy to clipboard operation
bootstrap-multiselect copied to clipboard

Does it work within default_popup in a chrome extension?

Open markusd1984 opened this issue 3 years ago • 1 comments

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 avatar Nov 15 '22 10:11 markusd1984

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.

markusd1984 avatar Nov 15 '22 16:11 markusd1984