diff --git a/README.md b/README.md index de8669f..c915f19 100644 --- a/README.md +++ b/README.md @@ -365,100 +365,26 @@ pnpm devtools:publish ## Chrome DevTools Extension -To distribute this as a Chrome DevTools extension, you need a thin Chrome extension shell that opens the devtools UI in a DevTools panel. The built SPA already works standalone — the extension just embeds it. +The `extension/` directory is a Manifest V3 extension that adds an **Angular DevTools** panel to Chrome DevTools. The panel embeds the same SPA and connects it live to the devtools server of the page you inspect. -### 1. Create the extension scaffold - -Create an `extension/` directory: - -``` -extension/ - manifest.json - devtools.html - devtools.js - panel.html -``` - -### 2. `extension/manifest.json` - -```json -{ - "manifest_version": 3, - "name": "Angular DevTools", - "version": "0.0.1", - "description": "Inspect Angular components, signals, DI, and routes.", - "devtools_page": "devtools.html", - "permissions": ["scripting"], - "host_permissions": [ - "http://localhost/*", - "https://localhost/*", - "http://127.0.0.1/*", - "https://127.0.0.1/*" - ], - "icons": { - "128": "icon-128.png" - } -} -``` - -### 3. `extension/devtools.html` and `extension/devtools.js` - -```html - - - -``` - -```js -// devtools.js — creates the panel in Chrome DevTools -chrome.devtools.panels.create('Angular', 'icon-128.png', 'panel.html'); -``` - -### 4. `extension/panel.html` - -This is where the built SPA loads. Copy the built assets (`dist/devtools-ui/`) into the extension and point `panel.html` at the SPA's `index.html`: - -```html - - - -
- - - - - - -``` - -### 5. Build the extension +### Load it unpacked ```sh -# Build the devtools SPA -pnpm devtools:build - -# Copy into the extension -mkdir -p extension/ui -cp -r dist/devtools-ui/* extension/ui/ +pnpm extension:build ``` -### 6. Load in Chrome - -1. Go to `chrome://extensions` -2. Enable **Developer mode** -3. Click **Load unpacked** → select the `extension/` directory -4. Open DevTools on any Angular app → the **Angular** panel appears - -### 7. Publish to Chrome Web Store +1. Go to `chrome://extensions` and enable **Developer mode** +2. Click **Load unpacked** and select the `extension/` directory +3. Run your app with the devtools server (see [How to Use](#how-to-use)), open it in Chrome, then open Chrome DevTools: the **Angular DevTools** panel appears once the page renders Angular -1. Zip the `extension/` directory -2. Go to the [Chrome Developer Dashboard](https://chrome.google.com/webstore/devconsole) -3. Click **New item** → upload the zip -4. Fill in the listing details and submit for review +`pnpm extension:zip` writes `dist/ng-devtools-extension.zip`, ready to upload to the [Chrome Web Store](https://chrome.google.com/webstore/devconsole). -### Connecting the extension to the running app +### How it works -The extension panel loads the SPA in static mode by default. To connect it to a live dev server for real-time RPC, the extension's content script or background service worker needs to detect the devframe's `__connection.json` on the inspected page and pass the connection to the panel. This is the same pattern the official Angular DevTools Chrome extension uses — a content script bridges the inspected page and the DevTools panel via `chrome.runtime.connect`. +- **Connection.** The panel looks for the devframe connection on the inspected page's origin, under `/__ng-devtools/`, `/__devframes/ng-devtools/`, `/__devframe/` and `/`, and connects to the first one that answers. When none answers, it lists the URLs it tried. +- **Inspected tab.** With several tabs open on the same app, the panel shows the page it inspects, not the one that reported last. It reconnects after each navigation. +- **Elements panel.** While the Components tab is open, selecting an element in Chrome's Elements panel selects its component there. Other tabs stay where they are. +- **Hosts.** `localhost`, `*.localhost`, `127.0.0.1` and `[::1]` work out of the box. For any other host (a LAN IP, a tunnel), the panel shows an **Allow access** button that grants the extension that host only. The devtools server still only answers requests from your machine. ## Community diff --git a/app/src/app.ts b/app/src/app.ts index 90914b5..4721ccc 100644 --- a/app/src/app.ts +++ b/app/src/app.ts @@ -109,7 +109,10 @@ function readView(): View | null { @Component({ selector: 'app-root', - host: { '[style.--accent]': 'viewAccent()' }, + host: { + '[style.--accent]': 'viewAccent()', + '(window:message)': 'inspectFromPanel($event)', + }, imports: [ Dashboard, ComponentTree, @@ -253,7 +256,12 @@ function readView(): View | null {Last updated: September 19, 2026
+Last updated: September 30, 2026
Angular DevTools ("the Extension") is a browser extension that helps developers inspect Angular applications. This privacy policy explains what data the Extension accesses and how it is used.
The Extension does not collect, store, transmit, or share any personal data or browsing data. Specifically:
+The Extension does not collect, store, or share any personal data or browsing data. Specifically:
ng-version HTML attribute and the window.ng global to determine if the page uses Angularlocalhost on the developer's own machine for live inspection datalocalhost, *.localhost, 127.0.0.1 or [::1])All data processing happens entirely within your browser and your local machine. No information ever leaves your device.
+By default, all data stays within your browser and your own machine. If you grant access to another host from the DevTools panel, such as a server on your local network or a tunnel, the Extension exchanges inspection data with the devtools server on that host, so that data leaves your device. It goes only to the host you granted (and, for a tunnel, through the tunnel service you chose). It is never sent to the Extension's authors or to any service the Extension picks on its own.
The Extension requests host permissions only for localhost and 127.0.0.1, to reach the devframe server on the developer's own machine. The detect-angular.js content script runs on every page, including when DevTools is closed. It reads only the ng-version attribute and whether window.ng exists, to detect Angular. It does not modify page content.
The Extension requests host permissions for loopback hosts only (localhost, *.localhost, 127.0.0.1 and [::1]), to reach the devframe server on the developer's own machine. It can reach any other host only after the developer grants that host from the DevTools panel. Chrome keeps a granted host until the developer removes it from the Extension's site access settings. The detect-angular.js content script runs on every page, including when DevTools is closed. It reads only the ng-version attribute and whether window.ng exists, to detect Angular. It does not modify page content.
The Extension does not persist any data between sessions. All inspection data exists only in memory while the DevTools panel is open and is discarded when the panel is closed.
diff --git a/extension/manifest.json b/extension/manifest.json index 12e8459..5b204f2 100644 --- a/extension/manifest.json +++ b/extension/manifest.json @@ -1,17 +1,20 @@ { "manifest_version": 3, "name": "Angular DevTools", - "version": "0.0.4", + "version": "0.0.5", "description": "Inspect Angular components, signals, dependency injection, and routes.", "minimum_chrome_version": "111", "devtools_page": "devtools.html", "permissions": [], "host_permissions": [ - "http://localhost/*", - "https://localhost/*", + "http://*.localhost/*", + "https://*.localhost/*", "http://127.0.0.1/*", - "https://127.0.0.1/*" + "https://127.0.0.1/*", + "http://[::1]/*", + "https://[::1]/*" ], + "optional_host_permissions": ["http://*/*", "https://*/*"], "content_scripts": [ { "matches": ["