diff --git a/projects/shell-chrome/src/app/background.ts b/projects/shell-chrome/src/app/background.ts index 571395be8b0..1dd91cc9b5e 100644 --- a/projects/shell-chrome/src/app/background.ts +++ b/projects/shell-chrome/src/app/background.ts @@ -1,37 +1,48 @@ const ports: { - [tab: string]: { - 'content-script': chrome.runtime.Port; - devtools: chrome.runtime.Port; - }; + [tab: string]: + | { + 'content-script': chrome.runtime.Port | null; + devtools: chrome.runtime.Port | null; + } + | undefined; } = {}; chrome.runtime.onConnect.addListener(port => { - let tab = null; - let name = null; + let tab: string | null = null; + let name: string | null = null; console.log('Connection event in the background script'); if (isNumeric(port.name)) { tab = port.name; console.log('Angular devtools connected, injecting the content script', port.name, ports[tab]); name = 'devtools'; - installContentScript(+port.name); + installContentScript(parseInt(port.name, 10)); } else { + if (!port.sender || !port.sender.tab) { + console.error('Unable to access the port sender and sender tab'); + return; + } + if (port.sender.tab.id === undefined) { + console.error('Sender tab id is undefined'); + return; + } console.log('Content script connected', port.sender.tab.id); - tab = port.sender.tab.id; + tab = port.sender.tab.id.toString(); name = 'content-script'; } - if (!ports[tab]) { + let portsTab = ports[tab]; + if (!portsTab) { console.log('Creating a tab port'); - ports[tab] = { + portsTab = ports[tab] = { devtools: null, 'content-script': null, }; } - ports[tab][name] = port; + portsTab[name] = port; - if (ports[tab].devtools && ports[tab]['content-script']) { - doublePipe(ports[tab].devtools, ports[tab]['content-script'], tab); + if (portsTab.devtools && portsTab['content-script']) { + doublePipe(portsTab.devtools, portsTab['content-script'], tab); } }); @@ -44,7 +55,11 @@ const installContentScript = (tabId: number) => { chrome.tabs.executeScript(tabId, { file: '/content-script.js' }, () => {}); }; -const doublePipe = (devtoolsPort: chrome.runtime.Port, contentScriptPort: chrome.runtime.Port, tab: string) => { +const doublePipe = (devtoolsPort: chrome.runtime.Port | null, contentScriptPort: chrome.runtime.Port, tab: string) => { + if (devtoolsPort === null) { + console.warn('DevTools port is equal to null'); + return; + } console.log('Creating two-way communication channel', Date.now(), ports); const onDevToolsMessage = (message: chrome.runtime.Port) => { diff --git a/projects/shell-chrome/src/app/chrome-window-extensions.ts b/projects/shell-chrome/src/app/chrome-window-extensions.ts index 52856388d40..f64aa9d1de4 100644 --- a/projects/shell-chrome/src/app/chrome-window-extensions.ts +++ b/projects/shell-chrome/src/app/chrome-window-extensions.ts @@ -17,11 +17,11 @@ const extendWindowOperations = (target, classImpl: T) => { }; const chromeWindowExtensions = { - findConstructorByPosition: (serializedId: string): Element => { + findConstructorByPosition: (serializedId: string): Element | undefined => { const node = findNodeFromSerializedPosition(serializedId); if (node === null) { console.error(`Cannot find element associated with node ${serializedId}`); - return null; + return; } const root = node.nativeElement instanceof HTMLElement && ng.getComponent(node.nativeElement); if (root) { @@ -30,11 +30,11 @@ const chromeWindowExtensions = { console.error('This component has no instance and therefore no constructor'); } }, - findDomElementByPosition: (serializedId: string): Node => { + findDomElementByPosition: (serializedId: string): Node | undefined => { const node = findNodeFromSerializedPosition(serializedId); if (node === null) { console.error(`Cannot find element associated with node ${serializedId}`); - return null; + return undefined; } return node.nativeElement; }, diff --git a/projects/shell-chrome/src/app/ng-validate.ts b/projects/shell-chrome/src/app/ng-validate.ts index 779f4860a43..946b7852a6b 100644 --- a/projects/shell-chrome/src/app/ng-validate.ts +++ b/projects/shell-chrome/src/app/ng-validate.ts @@ -7,9 +7,13 @@ window.addEventListener('message', (event: MessageEvent) => { function detectAngular(win: Window): void { const isDebugMode = Boolean((win as any).ng); const ngVersionElement = document.querySelector('[ng-version]'); - const isSupportedAngularVersion = ngVersionElement - ? +ngVersionElement.getAttribute('ng-version').split('.')[0] >= 9 - : false; + let isSupportedAngularVersion = false; + if (ngVersionElement) { + const attr = ngVersionElement.getAttribute('ng-version'); + if (attr && parseInt(attr.split('.')[0], 10) >= 0) { + isSupportedAngularVersion = true; + } + } win.postMessage( { @@ -25,7 +29,10 @@ function installScript(fn: string): void { const script = document.createElement('script'); script.textContent = source; document.documentElement.appendChild(script); - script.parentNode.removeChild(script); + const parentElement = script.parentElement; + if (parentElement) { + parentElement.removeChild(script); + } } if (document instanceof HTMLDocument) {