[TypeScript] Convert background entry script to TypeScript (#419)

* Convert background entry file to typescript. Remove global forge & tldjs variables.

* Minor cleanup.

src/background.js

@@ -1,10 +0,0 @@
-import MainBackground from './background/main.background';
-import i18nService from './services/i18nService.js';
-
-window.forge = require('node-forge');
-window.tldjs = require('tldjs');
-
-const bg_isBackground = window.bg_isBackground = true;
-const bg_main = window.bg_main = new MainBackground(new i18nService());
-require('./scripts/analytics.js');
-bg_main.bootstrap();

src/background.ts

@@ -0,0 +1,10 @@
+import MainBackground from './background/main.background';
+
+// tslint:disable-next-line:variable-name
+const bg_isBackground = (window as any).bg_isBackground = true;
+
+// tslint:disable-next-line:variable-name
+const bg_main = (window as any).bg_main = new MainBackground();
+// tslint:disable-next-line:no-var-requires
+require('./scripts/analytics.js');
+bg_main.bootstrap();

src/background/main.background.ts

@@ -11,7 +11,7 @@ import ConstantsService from '../services/constants.service';
 import CryptoService from '../services/crypto.service';
 import EnvironmentService from '../services/environment.service';
 import FolderService from '../services/folder.service';
-import i18nService from '../services/i18nService.js';
+import i18nService from '../services/i18n.service';
 import LockService from '../services/lock.service';
 import PasswordGenerationService from '../services/passwordGeneration.service';
 import SettingsService from '../services/settings.service';
@@ -22,6 +22,7 @@ import UserService from '../services/user.service';
 import UtilsService from '../services/utils.service';
 
 export default class MainBackground {
+    i18nService: any;
     utilsService: UtilsService;
     constantsService: ConstantsService;
     cryptoService: CryptoService;
@@ -52,9 +53,10 @@ export default class MainBackground {
     private autofillTimeout: number;
     private pendingAuthRequests: any[] = [];
 
-    constructor(public i18nService: any) {
+    constructor() {
         // Services
         this.utilsService = new UtilsService();
+        this.i18nService = i18nService();
         this.constantsService = new ConstantsService(i18nService, this.utilsService);
         this.cryptoService = new CryptoService();
         this.tokenService = new TokenService();

src/globals.d.ts

@@ -1,6 +1,5 @@
+declare function require(s: string): any;
 declare function escape(s: string): string;
 declare function unescape(s: string): string;
 declare var opr: any;
-declare var tldjs: any;
-declare var forge: any;
 declare var chrome: any;

src/manifest.json

@@ -111,7 +111,8 @@
       "suggested_key": {
         "default": "Alt+Shift+Y",
         "linux": "Alt+Shift+U"
-      }
+      },
+      "description": " "
     }
   },
   "web_accessible_resources": [

src/models/domain/symmetricCryptoKey.ts

@@ -1,3 +1,5 @@
+import * as forge from 'node-forge';
+
 import { EncryptionType } from '../../enums/encryptionType.enum';
 
 import SymmetricCryptoKeyBuffers from './symmetricCryptoKeyBuffers';
@@ -21,7 +23,7 @@ export default class SymmetricCryptoKey {
             throw new Error('Must provide keyBytes');
         }
 
-        const buffer = forge.util.createBuffer(keyBytes);
+        const buffer = (forge as any).util.createBuffer(keyBytes);
         if (!buffer || buffer.length() === 0) {
             throw new Error('Couldn\'t make buffer');
         }

src/services/crypto.service.ts

@@ -1,3 +1,5 @@
+import * as forge from 'node-forge';
+
 import { EncryptionType } from '../enums/encryptionType.enum';
 
 import { CipherString } from '../models/domain/cipherString';
@@ -249,7 +251,7 @@ export default class CryptoService implements CryptoServiceInterface {
     }
 
     makeKey(password: string, salt: string): SymmetricCryptoKey {
-        const keyBytes: string = forge.pbkdf2(forge.util.encodeUtf8(password), forge.util.encodeUtf8(salt),
+        const keyBytes: string = (forge as any).pbkdf2(forge.util.encodeUtf8(password), forge.util.encodeUtf8(salt),
             5000, 256 / 8, 'sha256');
         return new SymmetricCryptoKey(keyBytes);
     }
@@ -261,7 +263,7 @@ export default class CryptoService implements CryptoServiceInterface {
             throw new Error('Invalid parameters.');
         }
 
-        const hashBits = forge.pbkdf2(key.key, forge.util.encodeUtf8(password), 1, 256 / 8, 'sha256');
+        const hashBits = (forge as any).pbkdf2(key.key, forge.util.encodeUtf8(password), 1, 256 / 8, 'sha256');
         return forge.util.encode64(hashBits);
     }
 
@@ -487,8 +489,8 @@ export default class CryptoService implements CryptoServiceInterface {
             }
         }
 
-        const ctBuffer = forge.util.createBuffer(ctBytes);
-        const decipher = forge.cipher.createDecipher('AES-CBC', theKey.encKey);
+        const ctBuffer = (forge as any).util.createBuffer(ctBytes);
+        const decipher = (forge as any).cipher.createDecipher('AES-CBC', theKey.encKey);
         decipher.start({ iv: ivBytes });
         decipher.update(ctBuffer);
         decipher.finish();
@@ -524,7 +526,7 @@ export default class CryptoService implements CryptoServiceInterface {
     }
 
     private computeMac(dataBytes: string, macKey: string, b64Output: boolean): string {
-        const hmac = forge.hmac.create();
+        const hmac = (forge as any).hmac.create();
         hmac.start('sha256', macKey);
         hmac.update(dataBytes);
         const mac = hmac.digest();
@@ -539,7 +541,7 @@ export default class CryptoService implements CryptoServiceInterface {
     // Safely compare two MACs in a way that protects against timing attacks (Double HMAC Verification).
     // ref: https://www.nccgroup.trust/us/about-us/newsroom-and-events/blog/2011/february/double-hmac-verification/
     private macsEqual(macKey: string, mac1: string, mac2: string): boolean {
-        const hmac = forge.hmac.create();
+        const hmac = (forge as any).hmac.create();
 
         hmac.start('sha256', macKey);
         hmac.update(mac1);

src/services/i18n.service.ts

@@ -0,0 +1,30 @@
+export default function i18nService() {
+    const edgeMessages: any = {};
+
+    if (navigator.userAgent.indexOf(' Edge/') !== -1) {
+        fetch('../_locales/en/messages.json')
+            .then((file) => {
+                return file.json();
+            })
+            .then((locales) => {
+                for (const prop in locales) {
+                    if (locales.hasOwnProperty(prop)) {
+                        edgeMessages[prop] = chrome.i18n.getMessage(prop);
+                    }
+                }
+            });
+
+        return edgeMessages;
+    }
+
+    return new Proxy({}, {
+        get(target, name) {
+            return chrome.i18n.getMessage(name);
+        },
+        set(target, name, value) {
+            throw new Error('set not allowed for i18n');
+            // @ts-ignore: Unreachable code error
+            return false;
+        },
+    });
+}

src/services/i18nService.js

@@ -1,26 +0,0 @@
-export default function i18nService() {
-    this.__edgeMessages = {};
-
-    if (navigator.userAgent.indexOf(' Edge/') !== -1) {
-        fetch('../_locales/en/messages.json').then((file) => {
-            return file.json();
-        }).then((locales) => {
-            for (const prop in locales) {
-                if (locales.hasOwnProperty(prop)) {
-                    this.__edgeMessages[prop] = chrome.i18n.getMessage(prop);
-                }
-            }
-        });
-
-        return this.__edgeMessages;
-    }
-
-    return new Proxy({}, {
-        get: function (target, name) {
-            return chrome.i18n.getMessage(name);
-        },
-        set: function (target, name, value) {
-            throw 'set not allowed for i18n';
-        }
-    });
-}

webpack.common.js

@@ -12,7 +12,7 @@ const isVendorModule = (module) => {
 module.exports = {
     entry: {
         'popup/app': './src/popup/app/app.js',
-        'background': './src/background.js',
+        'background': './src/background.ts',
         'content/autofill': './src/content/autofill.js',
         'content/autofiller': './src/content/autofiller.js',
         'content/notificationBar': './src/content/notificationBar.js',