Why doesn't my webextension see a global object from another script?

andreip · February 17, 2018, 2:57pm

Hello,
I’m building a web extension that allows you to select a base64 certificate text and it will spit out all the useful data inside it. The heavy lifting is done by forge.

I added 2 scripts in my manifest: background script and forge script. Forge seems to load first. In theory any global object defined by the first script can be seen by the second one. I should be able to see the forge object from my background script but this is not true.

It works fine in my unit tests and actually calls forge.

Here is an unlisted version so you can test it out. I basically get undefined for forge in background.js.

In order to reproduce the issue, install the extension, open an about:debugging page and start debugging “Base64 Certificate Viewer”, then open this page or any other certificate, select all the text, right click and call the menu action to view. The console of the debugger will show this error.

What am I doing wrong? Is this a webextension issue or a forge issue?

Thank you!

mig · February 17, 2018, 3:11pm

Did you try something like const forge = require('./forge.min') within your background.js, and remove the forge.min.js line from manifest.json ?

andreip · February 17, 2018, 3:34pm

Require fails in my tests. It says it does not know require. I run my tests in Firefox, not phantomjs or anything like that.

freaktechnik · February 17, 2018, 4:02pm

To me this seems like a webpack issue. Haven’t found your webpack config though, as you seem to be using gulp over top of it.

mig · February 17, 2018, 4:47pm

I gave it a try from your code using import:

import forge from './forge.min';
console.info("forge.pki",forge.pki);

I get

forge.pki Object { oids: Object, rsa: Object, setRsaPublicKey: d.rsa.setPublicKey(e, t), setRsaPrivateKey: d.rsa.setPrivateKey(e, t, r, a, i, s, o, c), wrapRsaPrivateKey: d.wrapRsaPrivateKey(e), privateKeyFromAsn1: d.privateKeyFromAsn1(e), privateKeyToRSAPrivateKey: d.privateKeyToRSAPrivateKey(e), privateKeyToAsn1: d.privateKeyToRSAPrivateKey(e), publicKeyFromAsn1: d.publicKeyFromAsn1(e), publicKeyToSubjectPublicKeyInfo: d.publicKeyToSubjectPublicKeyInfo(e), 39 more… }

This seems to work.

andreip · February 17, 2018, 5:26pm

Thank you @mig it worked!

andreip · February 18, 2018, 5:17pm

So the import thing worked for my extension but broke the karma unit tests. I came up with this ugly hack: have a file that loads only in manifest.json but not in karma tests . This file loads the forge library with import from and sets it on the window object. It’s kind of ugly but it works both in browser and in tests https://github.com/andreicristianpetcu/Base64CertificateViewer/blob/master/app/scripts/linker.js

Hope this helps others with the same issue.

andreip · February 18, 2018, 11:03pm

Damn! The import from thing does not pass AMO validation rules

mig · February 19, 2018, 1:31am

I use import ... from ... at many places in my add-on and it passes validation. The thing is that once you have processed your files with webpack, the import should have been resolved and you should be left with a single, bigger background.js which should include both the original background.js plus forge, and it should not contain import any more. Are you sure you are not submitting a source code in the add-on you validate ?

andreip · February 19, 2018, 7:11am

I removed the babel processing. I think webpack does very little in my setup.

I find it strange that something that works in FF fails AMO validation.

freaktechnik · February 19, 2018, 8:09am

import is not supported in all Firefox versions, and potentially behind a pref flip. So if you want import, you need that pref flip. I also think you need webpack to use that library.

andreip · February 19, 2018, 1:15pm

Does any of you have a gulp + webpack project I can shamesly copy/paste configs from?

freaktechnik · February 19, 2018, 1:16pm

Sorry, I use webpack without any gulp or grunt around it. npm scripts is all I need. You can find them on my GitHub, same username as here.

mig · February 19, 2018, 4:27pm

Does any of you have a gulp + webpack project I can shamesly copy/paste configs from?

My add-on, Video DownloadHelper uses gulp and webpack. Through the code is not open-source, the build mechanism is based on the weh toolkit under MPL license. Hope this helps.

andreip · February 19, 2018, 11:12pm

I ended up removing webpack and used concat from gulp https://github.com/andreicristianpetcu/Base64CertificateViewer/blob/3cae7c78c8ec48b42750e8af9cf49875943d14d6/tasks/scripts.js#L23

Thank you for all the info!