Manifest v3 and jsencrypt

[DBA-Dream Believer]

I have a manifest v2 chrome extension that uses jsencrypt.js to encrypt the body of an api post. We're migrating to manifest v3 and I can't seem to get jsencrypt to work in the service worker.

I'm using it in the context of an event listener that receives a message from the content script:

importScripts("jsencrypt.min.js");

let RSAEncrypt = new JSEncrypt();

The extension never gets past the first line, throwing the following error:

Error handling response: Error: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'chrome-extension://(ExtensionID)/scripts/jsencrypt.min.js' failed to load.

 

Someone advised that jsencrypt uses 'window' but I'm not sure what they mean.

[hrg...@gmail.com]

It means it uses the window global object: https://developer.mozilla.org/en-US/docs/Web/API/Window

This variable doesn't exist in a service worker, so any code that depends on it will fail.

[DBA-Dream Believer]

Any suggestions for a workaround? Here's more context on the block of code I'm using it in:

chrome.storage.sync.get(['AccessKey'],function(result){

            console.log('AccessKey is ',result.AccessKey); //Debug code

            importScripts("/scripts/jsencrypt.min.js");

            let RSAEncrypt = new JSEncrypt();

            RSAEncrypt.setPublicKey(result.AccessKey);

            var encryptedmsg = RSAEncrypt.encrypt(message.content + "##" + daysBack);

            const request = new Request(api_url, {

                method: 'POST',

                headers: {

                'Content-Type': 'application/json'

                },

                body: "\"" + encryptedmsg + "\""

            });

            console.log('This url is ',api_url); //Debug code

            fetch(request)

            .then(response => response.json())

            .then(responseData => {

                console.log('APITotal Person hits: ',responseData); //Debug code

                var person = responseData;

            })

 });    

The encryption process is part of an API request (fetch) that I can't control so I'll need the encryption to be there. 

[hrg...@gmail.com]

I took a quick look at the JSEncrypt library, and it seems to be written in the form of a module.

AFAIK, the  importScripts function cannot import modules, it can only import regular javascript files.

In your manifest, you can declare your service worker script as type:"module", this will allow you to import other modules.

[Cuyler Stuwe]

My suggestion would just be "use a different library" (or don't use a library at all).

If the issue is just module importing (as HRG alluded to), then this might be something you could resolve w/ a bundler like Webpack/Parcel.

--
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/79a41620-115f-47ea-9d44-f118cb89732en%40chromium.org.

[Cuyler Stuwe]

And if the reason you're trying to force a square peg into a round hole is that you're copy/pasting from a StackOverflow answer with no idea of alternative solutions... Stop doing that.

[wOxxOm]

DBA-Dream Believer, try adding `self.window = self;` before importing the library. The library uses a standard module definition check so since you're not using a module system (webpack, AMD, etc.) it tries to set a global on `window`. If this is the only place where `window` is used then you're fine, otherwise find a different library or try polyfilling whatever feature the library wants.

[DBA-Dream Believer]

Hi wOxxOm,
Thank you for your reply. If I'm understanding what you're advising, would I be updating the listener in background.js, like so:

chrome.storage.sync.get(['AccessKey'],function(result){

            console.log('AccessKey is ',result.AccessKey); //Debug code

            self.window = self; importScripts("/scripts/jsencrypt.min.js");

            let RSAEncrypt = new JSEncrypt();

            RSAEncrypt.setPublicKey(result.AccessKey);

            var encryptedmsg = RSAEncrypt.encrypt(message.content + "##" + daysBack);

            const request = new Request(api_url, {

                method: 'POST',

                headers: {

                'Content-Type': 'application/json'

                },

                body: "\"" + encryptedmsg + "\""

            });

            console.log('This url is ',api_url); //Debug code

            fetch(request)

            .then(response => response.json())

            .then(responseData => {

                console.log('APITotal Person hits: ',responseData); //Debug code

                var person = responseData;

            })

 });    

With this in place I'm getting the following error:

Error handling response: Error: Failed to execute 'importScripts' on 'WorkerGlobalScope': The script at 'chrome-extension://<chrome ID>/scripts/jsencrypt.min.js' failed to load.

[wOxxOm]

Yes. If you still want to use this library specifically, you'll have to debug it. Copy its code and paste into your script after the self.window line, then you will see a more sensible error message.