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/ivi@2x.png"
}

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?

I would recommend first you determine if you need to bloat your add-on with jQuery - as you are targeting a known browser, why would you need jQuery at all? — Jaromanda X, Nov 17 '17 at 04:35
@JaromandaX JQuery make less coding (in shorthand term), it means DOM manipulation painless, plays well in AJAX. Less coding means easy and fast on development. — Yohanim, Nov 17 '17 at 04:40

score 1 · Accepted Answer · answered Nov 17 '17 at 04:29

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.

JQuery on Web Extensions APIs

1 Answers1