[SOLVED] jquery in manifest v3 chrome extension

Question

This Content is from Stack Overflow. Question asked by sunaue

i am trying to use jquery in manifest v3 extension

my service worker js file uses jquery for some ajax calls
but i get error

  Error handling response: ReferenceError: $ is not defined

my manifest file is

   {
   "background": {
          "service_worker": "worker_wrapper.js"

   },
    "action": {
   },        
   "manifest_version": 3,
   "permissions": [ "u003Call_urls>", "tabs", "activeTab", "storage", "unlimitedStorage", "notifications", "clipboardWrite", "downloads", "cookies" ],
   "update_url": "https://clients2.google.com/service/update2/crx",
   "version": "1.0.41",   
     "host_permissions": [
    "https://*.somesite.com/*" 
    ],
"content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*", "<all_urls>"],
      "js": ["/libs/jquery-3.2.1.min.js","js/event.js"]   ,
      "run_at": "document_start"


    }
  ],
  "web_accessible_resources": [
    {
      "resources": ["toolbar_res/*","libs/*","js/*","html/*", "img/*", "_locales/*", "css/*","libs/jquery-3.2.1.min.js","js/event.js"],
      "matches": ["<all_urls>"],
             "use_dynamic_url": true

    }]
   
   
   
}

the service worker worker_wrapper.js file content is this

try {
    importScripts("js/event.js");
} catch (e) {
    console.log(e);

}

in event.js i am getting error in this position. this $ sign gives error

Error handling response: ReferenceError: $ is not defined

 this.L = $.ajax({
        processData: !1,
        contentType: !1,
        url: b,
        type: "POST",
        data: c,
        xhr: function() {
            var b = new XMLHttpRequest;
            b.upload.onprogress = function(b) {
                b.lengthComputable && a.i[a.f.w].fire({
                    loaded: b.loaded,
                    total: b.total
                })
            };
            return b
        },
        beforeSend: function() {},
        complete: function(b, c) {
            a.F = a.A.T;
            try {
                var g = $.parseXML(b.responseText);
                
                
                
                if (g && (g.getElementsByTagName("url").length || g.getElementsByTagName("share").length)) {
                    a.F = a.A.U;
                    var l = {};
                    g && (g.getElementsByTagName("url").length && g.getElementsByTagName("url")[0].innerHTML &&
                        (l.img_url = g.getElementsByTagName("url")[0].innerHTML), g.getElementsByTagName("thumb").length && g.getElementsByTagName("thumb")[0].innerHTML && (l.thumb_url = g.getElementsByTagName("thumb")[0].innerHTML), g.getElementsByTagName("share").length && g.getElementsByTagName("share")[0].innerHTML && (l.share_url = g.getElementsByTagName("share")[0].innerHTML), l.width = 0, l.height = 0, l.delete_hash = "");
                    a.ba = l
                } else a.a = B.s("msg1")
            } catch (k) {
                a.a = B.s("msg2") +
                    "nn", a.a += B.s("msg12") + ":n", a.a += "status = " + (b && b.status ? b.status : "") + "n", a.a += "textStatus = " + c + "n", a.a += "e = " + k + "n", a.a += "responseText = " + (b && b.responseText ? b.responseText : "") + "n"
            }
            a.i[a.f.COMPLETE].fire(a.I())
        }
    })

any help on how to include jquery in service worker js file will be great. i tried including same jquery in worker js file but it does not work

Solution

jQuery is DOM-based so its $.ajax or $.put or $.get won’t run in the service worker as there’s no DOM/document/window, consequently no XMLHttpRequest, which is used by these methods. The other DOM-based features of jQuery are also unusable in a service worker.

The solution is to use fetch().
There are also fetch-based libraries if you need more bells and whistles like onprogress.

Answered by wOxxOm


This Question and Answer are collected from stackoverflow and tested by JTuto community, is licensed under the terms of CC BY-SA 4.0.

people found this article helpful. What about you?