Using jQuery in service worker manifest V3

[Sagar Mittal]

Hi,

I have a browser extension in manifest V2 which i am migrating to V3. It has some of the code written in jQuery in the service worker. I presume we cant use jQuery in the service worker since it does not have access to the DOM (when i try to import the jQuery library, the service worker throws an error saying "Uncaught TypeError: Cannot read properties of undefined (reading 'document')")

Is there a workaround that i can use to overcome this? If not, how can i modify my service worker to accommodate jQuery code?

Thanks

[Simeon Vincent]

I presume we cant use jQuery in the service worker since it does not have access to the DOM

Correct. As you noted, document is not exposed in the service worker's global scope so that variable is undefined. 

Is there a workaround that i can use to overcome this? 

As I see it you have two basic options.

1. Refactor your extension to remove the jQuery dependency.

2. Continue using jQuery and shim the DOM APIs that it requires

Personally I'd lean towards removing the jQuery dependency, but depending on how heavily it's being used that may be a lot of work. If you go the shim route, try looking for resources that describe how to use jQuery inside non-document JavaScript contexts, like this blog post about using jQuery inside a WebWorker. Alternatively, you could try using a DOM library to shim the missing document object. I'd probably start by experimenting with linkedom, but note that that library doesn't come in a nicely packaged, single-file format.

Simeon - @dotproto

incremental.software

--
You received this message because you are subscribed to the Google Groups "Chromium Extensions" group.
To unsubscribe from this group and stop receiving emails from it, send an email to chromium-extens...@chromium.org.
To view this discussion on the web visit https://groups.google.com/a/chromium.org/d/msgid/chromium-extensions/25207996-3ffa-47de-830b-49d056ac1dc1n%40chromium.org.

[wOxxOm]

The screenshot shows code that only makes sense for a visible page, so the fact you were using it inside the background page definitely looks like a mistake e.g. I've seen many people incorrectly loading their background script also in the popup. If this code is for web scraping it should be inside the content script. If it's a part of your extension's UI then it should be inside the script for that page and not in the background script (service worker). You can use jQuery in both cases.

[Sagar Mittal]

Hi, thanks for your response. 

Removing the jQuery dependency might be too big a task.

From this conversation, i can see that we can use the jQuery inside the service worker using the offscreen document. However, I am not able to figure out how exactly i can do that, since i am new to this. Is there any example that i can refer to which can help me with this?

Thanks

[wOxxOm]

The offscreen document isn't visible so running jQuery there also doesn't make a lot of sense unless you want to use it to scrape a web site inside an iframe. As for an example see the folders with "offscreen" in https://github.com/GoogleChrome/chrome-extensions-samples/tree/main/functional-samples