diff --git a/devtools/projects/shell-browser/src/app/background.ts b/devtools/projects/shell-browser/src/app/background.ts index 84a566761b8..f25ed052d6b 100644 --- a/devtools/projects/shell-browser/src/app/background.ts +++ b/devtools/projects/shell-browser/src/app/background.ts @@ -24,7 +24,19 @@ function getPopUpName(ng: AngularDetection): string { return 'supported.html'; } +function checkGoogler(): void { + fetch('https://g3doc.corp.google.com/does/not/exist/for/angular/devtools', { + mode: 'no-cors', + }) + .then(() => chrome.storage.local.set({isGoogler: true})) + .catch(() => chrome.storage.local.set({isGoogler: false})); +} + if (chrome !== undefined && chrome.runtime !== undefined) { + // Check on extension install/update as well as on every background service worker startup/wake-up. + chrome.runtime.onInstalled?.addListener(checkGoogler); + checkGoogler(); + const isManifestV3 = chrome.runtime.getManifest().manifest_version === 3; const browserAction = (() => { diff --git a/devtools/projects/shell-browser/src/devtools.ts b/devtools/projects/shell-browser/src/devtools.ts index c4917576baf..078a5de989e 100644 --- a/devtools/projects/shell-browser/src/devtools.ts +++ b/devtools/projects/shell-browser/src/devtools.ts @@ -16,69 +16,77 @@ const DEEP_LINK_SCHEME = 'angular-devtools'; const theme = chrome.devtools.panels.themeName; -chrome.devtools.panels.create( - 'Angular', - // Firefox specifically displays the icon in the tab. - // the bw icon wasn't visible in dark mode - theme === 'dark' ? 'assets/icon16.png' : 'assets/icon-bw16.png', - 'index.html', - (panel) => { - // Keep a reference to the panel's window so we can post messages - // even if the panel is already visible (onShown won't re-fire). - let currentPanelWindow: Window | null = null; - panel.onShown.addListener((panelWindow: Window) => { - currentPanelWindow = panelWindow; - }); - panel.onHidden.addListener(() => { - currentPanelWindow = null; - }); - // Register a handler for deep links from the Chrome Performance panel. - // When the user clicks on an Angular performance entry (e.g. a component lifecycle hook), - // Chrome calls this handler with the deep link URL, activating the Angular DevTools panel - // and navigating to the relevant component. - // - // The optional `urlScheme` second parameter on `setOpenResourceHandler` is a Chrome 140+ - // extension that registers this handler exclusively for URLs with the given scheme. - // It is not yet reflected in the official chrome.devtools.panels in @types/chrome - // see: https://issues.chromium.org/issues/427430112 - // - // NOTE: This feature requires the following Chrome flag to be enabled: - // chrome://flags/#enable-devtools-deep-link-via-extensibility-api - type OpenResourceHandler = ( - callback: (resource: {url: string}) => void, - urlScheme?: string, - ) => void; +chrome.storage.local.get('isGoogler', (res) => { + const isGoogler = res['isGoogler'] === true; + createDevToolsPanel(isGoogler ? 'Angular & Wiz' : 'Angular'); +}); - const setHandler = chrome.devtools.panels.setOpenResourceHandler as OpenResourceHandler; +function createDevToolsPanel(title: string) { + chrome.devtools.panels.create( + title, + // Firefox specifically displays the icon in the tab. + // the bw icon wasn't visible in dark mode + theme === 'dark' ? 'assets/icon16.png' : 'assets/icon-bw16.png', + 'index.html', + (panel) => { + // Keep a reference to the panel's window so we can post messages + // even if the panel is already visible (onShown won't re-fire). + let currentPanelWindow: Window | null = null; + panel.onShown.addListener((panelWindow: Window) => { + currentPanelWindow = panelWindow; + }); + panel.onHidden.addListener(() => { + currentPanelWindow = null; + }); - setHandler((resource: {url: string}) => { - // Extract the instance ID from "angular-devtools://component/{instanceId}". - const match = resource.url.match(/^angular-devtools:\/\/component\/(\d+)$/); - if (!match) return; + // Register a handler for deep links from the Chrome Performance panel. + // When the user clicks on an Angular performance entry (e.g. a component lifecycle hook), + // Chrome calls this handler with the deep link URL, activating the Angular DevTools panel + // and navigating to the relevant component. + // + // The optional `urlScheme` second parameter on `setOpenResourceHandler` is a Chrome 140+ + // extension that registers this handler exclusively for URLs with the given scheme. + // It is not yet reflected in the official chrome.devtools.panels in @types/chrome + // see: https://issues.chromium.org/issues/427430112 + // + // NOTE: This feature requires the following Chrome flag to be enabled: + // chrome://flags/#enable-devtools-deep-link-via-extensibility-api + type OpenResourceHandler = ( + callback: (resource: {url: string}) => void, + urlScheme?: string, + ) => void; - const instanceId = parseInt(match[1], 10); + const setHandler = chrome.devtools.panels.setOpenResourceHandler as OpenResourceHandler; - panel.show(); + setHandler((resource: {url: string}) => { + // Extract the instance ID from "angular-devtools://component/{instanceId}". + const match = resource.url.match(/^angular-devtools:\/\/component\/(\d+)$/); + if (!match) return; - // Post immediately if the panel is already visible; otherwise wait for onShown. - if (currentPanelWindow) { - currentPanelWindow.postMessage({type: 'angular-devtools-deep-link', instanceId}, '*'); - } else { - const onShown = (panelWindow: Window) => { - panel.onShown.removeListener(onShown); + const instanceId = parseInt(match[1], 10); - panelWindow.postMessage( - { - type: 'angular-devtools-deep-link', - instanceId, - }, - '*', - ); - }; + panel.show(); - panel.onShown.addListener(onShown); - } - }, DEEP_LINK_SCHEME); - }, -); + // Post immediately if the panel is already visible; otherwise wait for onShown. + if (currentPanelWindow) { + currentPanelWindow.postMessage({type: 'angular-devtools-deep-link', instanceId}, '*'); + } else { + const onShown = (panelWindow: Window) => { + panel.onShown.removeListener(onShown); + + panelWindow.postMessage( + { + type: 'angular-devtools-deep-link', + instanceId, + }, + '*', + ); + }; + + panel.onShown.addListener(onShown); + } + }, DEEP_LINK_SCHEME); + }, + ); +}