Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

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

Open
markusd1984 opened this issue Nov 15, 2022 · 1 comment
Open

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

markusd1984 opened this issue Nov 15, 2022 · 1 comment

Comments

@markusd1984
Copy link

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
Copy link
Author

markusd1984 commented Nov 15, 2022

Turns out I'm using Bootstrap v5 which isn't supported #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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant