mirror of
https://github.com/angular/angular
synced 2026-05-24 09:28:37 +00:00
dd3dac9cc9
Modifies the messaging layer of devtools to allow for switching communication between frames on a page. When served as a browser extension. Design: - When a page renders, DevTools installs a content script onto it through it's manifest file. The all_frames option is used here to install this script onto every frame in a page. - When Angular is detected, the content script will install a backend script into it's frame. - Each content script / backend script pairing is kept track of in the background script. This pairing represents an angular devtools context in a particular frame. - Angular DevTools is able to ask the background script to list each frame that has been registered on a page. - Angular Devtools is able to ask the background script to "enable" the connection on a particular frame. This enables the messaging between the content script <-> background script <-> devtools page Limitations: - The `inspectedWindow.eval` API is only able to target frames by frameURL. This means some features that integrate with Chrome DevTools like inspect element and open source will not be available when inspecting frames that do not have a unique url on the page. PR Close #53934
84 lines
2.1 KiB
TypeScript
84 lines
2.1 KiB
TypeScript
/**
|
|
* @license
|
|
* Copyright Google LLC All Rights Reserved.
|
|
*
|
|
* Use of this source code is governed by an MIT-style license that can be
|
|
* found in the LICENSE file at https://angular.io/license
|
|
*/
|
|
|
|
/// <reference types="chrome"/>
|
|
|
|
import {AngularDetection} from 'protocol';
|
|
import {TabManager, Tabs} from './tab_manager';
|
|
|
|
function getPopUpName(ng: AngularDetection): string {
|
|
if (!ng.isAngular) {
|
|
return 'not-angular.html';
|
|
}
|
|
if (!ng.isIvy || !ng.isSupportedAngularVersion) {
|
|
return 'unsupported.html';
|
|
}
|
|
if (!ng.isDebugMode) {
|
|
return 'production.html';
|
|
}
|
|
return 'supported.html';
|
|
}
|
|
|
|
if (chrome !== undefined && chrome.runtime !== undefined) {
|
|
const isManifestV3 = chrome.runtime.getManifest().manifest_version === 3;
|
|
|
|
const browserAction = (() => {
|
|
// Electron does not expose browserAction object,
|
|
// Use empty calls as fallback if they are not defined.
|
|
const noopAction = {setIcon: () => {}, setPopup: () => {}};
|
|
|
|
if (isManifestV3) {
|
|
return chrome.action || noopAction;
|
|
}
|
|
|
|
return chrome.browserAction || noopAction;
|
|
})();
|
|
|
|
// By default use the black and white icon.
|
|
// Replace it only when we detect an Angular app.
|
|
browserAction.setIcon(
|
|
{
|
|
path: {
|
|
16: chrome.runtime.getURL(`assets/icon-bw16.png`),
|
|
48: chrome.runtime.getURL(`assets/icon-bw48.png`),
|
|
128: chrome.runtime.getURL(`assets/icon-bw128.png`),
|
|
},
|
|
},
|
|
() => {},
|
|
);
|
|
|
|
chrome.runtime.onMessage.addListener((req: AngularDetection, sender) => {
|
|
if (!req.isAngularDevTools) {
|
|
return;
|
|
}
|
|
|
|
if (sender && sender.tab) {
|
|
browserAction.setPopup({
|
|
tabId: sender.tab.id,
|
|
popup: `popups/${getPopUpName(req)}`,
|
|
});
|
|
}
|
|
|
|
if (sender && sender.tab && req.isAngular) {
|
|
browserAction.setIcon(
|
|
{
|
|
tabId: sender.tab.id,
|
|
path: {
|
|
16: chrome.runtime.getURL(`assets/icon16.png`),
|
|
48: chrome.runtime.getURL(`assets/icon48.png`),
|
|
128: chrome.runtime.getURL(`assets/icon128.png`),
|
|
},
|
|
},
|
|
() => {},
|
|
);
|
|
}
|
|
});
|
|
|
|
const tabs = {};
|
|
TabManager.initialize(tabs);
|
|
}
|