JQuery on Web Extensions APIs

Question

Is it able to import and use JQuery on Firefox Web Extension?

I've tried this on manifest.json

"background":{
"scripts": ["views/jquery.js", "startup.js"]
},
"permissions": [
"storage"
],
"browser_action": {
"browser_style": true,
"default_title": "iVi - Personalized your Dashboard",
"default_popup": "views/menu.html",
"default_icon": {
  "19": "icons/ivi.png",
  "38": "icons/[email protected]"
}

and using `$(document).ready event on menu.HTML like this bellow

<script type="text/javascript">
    $(document).ready(function() {
        $("#url").val("123");
    });
</script>

<div class="panel-form-column2">
  <input type="text" id="url" name="url" value="" />
</div>

but it produces error like this bellow :

Content Security Policy: The page’s settings blocked the loading of a resource at self (“script-src moz-extension:***”). Source: $(document).ready(function() {

And have tried to import JQuery inline on HTML instead on manifest.json

<script type="text/javascript" src="jquery.js"> </script>

<script type="text/javascript">
    $(document).ready(function() {
        $("#url").val("123");
    });
</script>

and still got the same issue.

Any idea?

Answer 1

According to this page: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Content_Security_Policy, inline javascript will not be executed, try putting your Javascript in a file, and linking it in your html, like what you did with jQuery.

Placing jQuery inside your manifest under background scripts doesn't work either, as the background page and the browser action page is separated.

This also extend to any Javascript placed inside strings like

<button onclick="test()">example</button>

test() will not run when the button is clicked.