Add Firefox support

[DaPotatoMan]

resolves #1105
This PR adds support for Firefox.

Userland usage

Background script

import '@inboxsdk/core/background'

Content script

import '@inboxsdk/core/firefox'
import InboxSDK from '@inboxsdk/core'

InboxSDK.load(...);

Additional Notes

import '@inboxsdk/core/firefox'

This additional import is mandatory until firefox fixes MAIN world execution in content scripts (See here).

[wegry]

@Macil and I would want any new MV2 specific bits to be dropped prior to accepting this PR.

[wegry]

Thanks for the changes.

[Macil]

@wegry brought to my intention that the injectScriptImplementation() function inside src/platform-implementation-js/lib/inject-script.ts is set up to avoid including any references to direct script injection so we don't fail some certain Chrome Web Store static analysis of our npm/MV3 build, so we can't put an if-check in there for Firefox to do a direct script injection as I first suggested above. The script injection code needs to not be included in a bundle created by importing our main entry point.

Spelling out my second suggestion a little further: we can add a packages/core/firefox.js file with this content:

import {_setInjectScriptImplementation} from './inboxsdk';
_setInjectScriptImplementation(() => {
  const script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = browser.runtime.getURL('pageWorld.js');
  document.documentElement.appendChild(script);
});
export * from './inboxsdk';

and a packages/core/firefox.d.ts:

export * from './inboxsdk';

and we need to make sure that it's guaranteed that the injectScriptImplementation function is only called asynchronously after the InboxSDK import. I think this may already be the case because of an await import happening on the path to it in src/platform-implementation-js/main.ts, but we can make it explicit by editing src/platform-implementation-js/dom-driver/gmail/make-xhr-interceptor.ts to have

  // Call injectScript asynchronously so InboxSDK alt imports like firefox.js can patch it first
  var pageCommunicatorPromise = Promise.resolve().then(injectScript).then(() => pageCommunicator);

(A cleaner solution that didn't need the asynchronous call to injectScript would be for us to not bundle the InboxSDK in our npm release, and then the firefox.js module could import a module that overrides the inject script function before importing and re-exporting the main InboxSDK entrypoint. But it's not so much cleaner that we need to jump to that now.)

[DaPotatoMan]

@Macil Taking your suggestion into account, I've removed all setInjectScriptImplementation reliance from the code and added a @inboxsdk/core/firefox import

So userland usage will now work like this (firefox content script):

import InboxSDK from '@inboxsdk/core/firefox'

How it works

Background

In the background.js script the inboxsdk__injectPageWorld event is sent back to the sender tab (content script) if the browser is firefox

InboxSDK/packages/core/background.js

Lines 5 to 12 in 21d765d

	browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
	const eventKey = 'inboxsdk__injectPageWorld';
	if (message.type === eventKey && sender.tab) {
	// Relay event to firefox content script handler
	if (isFirefox) {
	return browser.tabs.sendMessage(sender.tab.id, { type: eventKey });
	}

Content script

I've added inboxsdk-FIREFOX.ts file which listens for the event and injects pageWorld.js

InboxSDK/src/inboxsdk-js/inboxsdk-FIREFOX.ts

Lines 1 to 21 in 21d765d

	import { browser } from '../common/extension-apis';
	import InboxSDK from './inboxsdk-NONREMOTE';
	browser.runtime.onMessage.addListener((message, sender, sendResponse) => {
	if (message.type === 'inboxsdk__injectPageWorld') {
	const script = document.createElement('script');
	script.type = 'text/javascript';
	script.src = browser.runtime.getURL('pageWorld.js');
	script.onload = () => console.log('InboxSDK: pageWorld.js has been loaded');
	script.onerror = (error) =>
	console.error('InboxSDK: pageWorld.js failed to load\n\n', error);
	document.head.appendChild(script);
	console.log('InboxSDK: pageWorld.js manually injected!');
	sendResponse(true);
	}
	});
	export default InboxSDK;

This method eliminates the need for setInjectScriptImplementation usage and further simplifies the implementation.

Additional notes

Build config

I've added the firefox entry to the gulpfile.babel.ts here,
But I'm unsure if I have to add the entry in other places as well.

InboxSDK/gulpfile.babel.ts

Lines 402 to 409 in 21d765d

	firefox: {
	library: {
	export: 'default',
	name: 'InboxSDK',
	type: OutputLibraryType.UMD,
	},
	import: './src/inboxsdk-js/inboxsdk-FIREFOX',
	},

Please let me know if these changes satisfy your concerns.

[wegry]

LGTM.

[wegry]

I think what we're waiting for prior to a merge is @Macil will sign off on this as well.