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

(Andrei Petcu) #1

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!

(Michel Gutierrez) #2

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

(Andrei Petcu) #3

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

(Martin Giger) #4

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.

(Michel Gutierrez) #5

I gave it a try from your code using import:

import forge from './forge.min';

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.

(Andrei Petcu) #6

Thank you @mig it worked!

(Andrei Petcu) #7

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.

(Andrei Petcu) #8

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

(Michel Gutierrez) #9

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 ?

(Andrei Petcu) #10

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.

(Martin Giger) #11

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.

(Andrei Petcu) #12

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

(Martin Giger) #13

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.

(Michel Gutierrez) #14

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.

(Andrei Petcu) #15

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!