From c08796e118485851499cd46853b617dd0182f2ac Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Fri, 24 Oct 2025 12:47:09 -0700 Subject: [PATCH 1/9] delete per-phase dirs --- devtools-extension/README.md | 6 ++++-- .../{sample 4 => }/background.js | 0 .../{sample 4 => }/content_script.js | 0 .../{sample 2 => }/devtools.html | 0 devtools-extension/{sample 4 => }/devtools.js | 0 .../{sample 4 => }/manifest.json | 0 devtools-extension/{sample 4 => }/panel.html | 0 devtools-extension/sample 1/devtools.html | 9 -------- devtools-extension/sample 1/manifest.json | 7 ------- devtools-extension/sample 2/devtools.js | 3 --- devtools-extension/sample 2/manifest.json | 7 ------- devtools-extension/sample 2/panel.html | 9 -------- devtools-extension/sample 3/devtools.html | 9 -------- devtools-extension/sample 3/devtools.js | 21 ------------------- devtools-extension/sample 3/manifest.json | 10 --------- devtools-extension/sample 3/panel.html | 15 ------------- devtools-extension/sample 4/devtools.html | 9 -------- 17 files changed, 4 insertions(+), 101 deletions(-) rename devtools-extension/{sample 4 => }/background.js (100%) rename devtools-extension/{sample 4 => }/content_script.js (100%) rename devtools-extension/{sample 2 => }/devtools.html (100%) rename devtools-extension/{sample 4 => }/devtools.js (100%) rename devtools-extension/{sample 4 => }/manifest.json (100%) rename devtools-extension/{sample 4 => }/panel.html (100%) delete mode 100644 devtools-extension/sample 1/devtools.html delete mode 100644 devtools-extension/sample 1/manifest.json delete mode 100644 devtools-extension/sample 2/devtools.js delete mode 100644 devtools-extension/sample 2/manifest.json delete mode 100644 devtools-extension/sample 2/panel.html delete mode 100644 devtools-extension/sample 3/devtools.html delete mode 100644 devtools-extension/sample 3/devtools.js delete mode 100644 devtools-extension/sample 3/manifest.json delete mode 100644 devtools-extension/sample 3/panel.html delete mode 100644 devtools-extension/sample 4/devtools.html diff --git a/devtools-extension/README.md b/devtools-extension/README.md index a30474a4..c07bd0e6 100644 --- a/devtools-extension/README.md +++ b/devtools-extension/README.md @@ -1,3 +1,5 @@ -# Create your own DevTools extension +# Custom DevTools extension -This is the source code for the tutorial to create a Microsoft Edge extension that extends DevTools. See [Create a DevTools extension, adding a custom tool tab and panel](https://learn.microsoft.com/microsoft-edge/extensions/developer-guide/devtools-extension). +This sample adds a custom tool tab and panel in Microsoft Edge DevTools. + +For instructions, see [Sample: Custom DevTools tool tab and panel](https://learn.microsoft.com/microsoft-edge/extensions/developer-guide/devtools-extension). diff --git a/devtools-extension/sample 4/background.js b/devtools-extension/background.js similarity index 100% rename from devtools-extension/sample 4/background.js rename to devtools-extension/background.js diff --git a/devtools-extension/sample 4/content_script.js b/devtools-extension/content_script.js similarity index 100% rename from devtools-extension/sample 4/content_script.js rename to devtools-extension/content_script.js diff --git a/devtools-extension/sample 2/devtools.html b/devtools-extension/devtools.html similarity index 100% rename from devtools-extension/sample 2/devtools.html rename to devtools-extension/devtools.html diff --git a/devtools-extension/sample 4/devtools.js b/devtools-extension/devtools.js similarity index 100% rename from devtools-extension/sample 4/devtools.js rename to devtools-extension/devtools.js diff --git a/devtools-extension/sample 4/manifest.json b/devtools-extension/manifest.json similarity index 100% rename from devtools-extension/sample 4/manifest.json rename to devtools-extension/manifest.json diff --git a/devtools-extension/sample 4/panel.html b/devtools-extension/panel.html similarity index 100% rename from devtools-extension/sample 4/panel.html rename to devtools-extension/panel.html diff --git a/devtools-extension/sample 1/devtools.html b/devtools-extension/sample 1/devtools.html deleted file mode 100644 index 20bb6648..00000000 --- a/devtools-extension/sample 1/devtools.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - A Basic DevTools Extension. - - diff --git a/devtools-extension/sample 1/manifest.json b/devtools-extension/sample 1/manifest.json deleted file mode 100644 index 425debb4..00000000 --- a/devtools-extension/sample 1/manifest.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "name": "DevTools Sample Extension", - "description": "A Basic DevTools Extension", - "manifest_version": 3, - "version": "1.0", - "devtools_page": "devtools.html" -} diff --git a/devtools-extension/sample 2/devtools.js b/devtools-extension/sample 2/devtools.js deleted file mode 100644 index bd12e59f..00000000 --- a/devtools-extension/sample 2/devtools.js +++ /dev/null @@ -1,3 +0,0 @@ -chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => { - // code invoked on panel creation -}); diff --git a/devtools-extension/sample 2/manifest.json b/devtools-extension/sample 2/manifest.json deleted file mode 100644 index 95557ff2..00000000 --- a/devtools-extension/sample 2/manifest.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "name": "DevTools Sample Extension", - "description": "A Basic DevTools Extension with Panel", - "manifest_version": 3, - "version": "1.0", - "devtools_page": "devtools.html" -} diff --git a/devtools-extension/sample 2/panel.html b/devtools-extension/sample 2/panel.html deleted file mode 100644 index 5d3a1a7a..00000000 --- a/devtools-extension/sample 2/panel.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - -

A Basic DevTools Extension with Panel

- - diff --git a/devtools-extension/sample 3/devtools.html b/devtools-extension/sample 3/devtools.html deleted file mode 100644 index 89c6c3d9..00000000 --- a/devtools-extension/sample 3/devtools.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/devtools-extension/sample 3/devtools.js b/devtools-extension/sample 3/devtools.js deleted file mode 100644 index 78b7fff3..00000000 --- a/devtools-extension/sample 3/devtools.js +++ /dev/null @@ -1,21 +0,0 @@ -let availableMemoryCapacity; -let totalMemoryCapacity; - -chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => { - // code invoked on panel creation - panel.onShown.addListener( (extPanelWindow) => { - availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity'); - totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity'); - }); -}); - -setInterval(() => { - chrome.system.memory.getInfo((data) => { - if (availableMemoryCapacity) { - availableMemoryCapacity.innerHTML = data.availableCapacity; - } - if (totalMemoryCapacity) { - totalMemoryCapacity.innerHTML = data.capacity; - } - }); -}, 1000); diff --git a/devtools-extension/sample 3/manifest.json b/devtools-extension/sample 3/manifest.json deleted file mode 100644 index ffc924f5..00000000 --- a/devtools-extension/sample 3/manifest.json +++ /dev/null @@ -1,10 +0,0 @@ -{ - "name": "DevTools Sample Extension", - "description": "A Basic DevTools Extension invoking CDP APIs", - "manifest_version": 3, - "version": "1.0", - "devtools_page": "devtools.html", - "permissions": [ - "system.memory" - ] -} diff --git a/devtools-extension/sample 3/panel.html b/devtools-extension/sample 3/panel.html deleted file mode 100644 index 7374f7c9..00000000 --- a/devtools-extension/sample 3/panel.html +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - -

A Basic DevTools Extension invoking CDP APIs

-
- Available Memory Capacity: -
-
- Total Memory Capacity: -
- - diff --git a/devtools-extension/sample 4/devtools.html b/devtools-extension/sample 4/devtools.html deleted file mode 100644 index 89c6c3d9..00000000 --- a/devtools-extension/sample 4/devtools.html +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - From a3e3d5d9741f2e1a07e7f5a8b58650f1560262e4 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Mon, 27 Oct 2025 10:15:17 -0700 Subject: [PATCH 2/9] Create icon.png --- devtools-extension/icon.png | Bin 0 -> 173 bytes 1 file changed, 0 insertions(+), 0 deletions(-) create mode 100644 devtools-extension/icon.png diff --git a/devtools-extension/icon.png b/devtools-extension/icon.png new file mode 100644 index 0000000000000000000000000000000000000000..f76e11e1beb3158675ece3e3e69ea77d209bea56 GIT binary patch literal 173 zcmeAS@N?(olHy`uVBq!ia0vp^{2(?58;~rMGjRk`jKx9jP7LeL$-D$|SkfJRfr1 Date: Mon, 27 Oct 2025 10:40:30 -0700 Subject: [PATCH 3/9] v2 png --- devtools-extension/icon.png | Bin 173 -> 1323 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/devtools-extension/icon.png b/devtools-extension/icon.png index f76e11e1beb3158675ece3e3e69ea77d209bea56..3736389b70218c602b6183d6a538bdecaeef2e5d 100644 GIT binary patch literal 1323 zcmeAS@N?(olHy`uVBq!ia0vp^Wdn^xQjEnx?oJHr&dIz4a#+$GeH|GX zHuiJ>Nn{1`ISV`@iy0XB4uCLY*0oMfpoaF$kcg59UmvUF{9L`nl>DSry^7odplSvN z8~cia#N_PM5{0DH^vpb4_4m8?t1D!t*s6z{`WpBaIHzW0dQ=sq23ProBv)l8Tc)Vn z+wpSQR9FE`$W1LtRH(?!$t$+1uvG#ZYz1V4g!Pr|Y>HCStb$zJpeleoTcwPWk^(Dz z{qpj1y>er{{GxPyLrY6beFGzXBO_g)3fd$_#D>24-DP7srqY_p3AZdl$va9FGrwe}O-XU$cX)wQbrz zX2%|Z>8mYvNVW)U?Yey3eqn)NNkMl;W=GU5(U^A^1WGh7Wn_PRo-p_QhZQz;`>x0L zKl}cXm9Ore{Q0j(AIhBDIV;G^kWpV>KPD#TL4k#ZwRLiKw)eI(E!(%7pF4m4=f8i? zzI>VT_HFJ>BNpMd*n3L+slq^(s}x^qUwC%?z^i3G)`<= zXtCslLf28Hiy2d*)?Qm3x;ivyWk~#e9gn3!A*-+6`yRE{%|vQxgwD6GyvaHn*M)4p zIYsbkQRK8`$MVjkZMK|v$75q+5W~U%k7>)&F3gyGf>%^pRg{CJX%a^&e# z)!)B=8#Or^f2;Rqw3zE>G?S-pf4m#RmMC4Ni5yFVJlzu1znOcK&U9PnpED)IKw{49 zkm>7U3?!xq@=Scac4Og^OD|1kEjyW^r?J$+((>W6XKro@o1e+(G>9}T%Up8#<;HZs z>Z+=s_V)I@x_|%vjs25iSg z_{6Yg?b^cH+OzN8t?PMq>hWXcw!|;7nRUlsf1Pyt>4nn2*UQ$ww%QrPxBj|z^}@{t zyoV2%_)4DTy=-!Pnv-0U``J6MUTKAghrfCI_T&q9L*K~-7Cw99rVHNiQ0xy`oVG4* zy)a+6R>l{I$rdlo2*bG7~}{xC-s80-NWCIP3Of1Y^$ zdG68)*=PC|FJ9a@eecw%qVL|lyK(d8#ET&j(~cfI$k^-V>~>+NRqE!*$aja!j@7Bp zKFha<-&CqszS`TgSLAVrq0>9{zLe%;GT~i?M;Ed_)&Ii1J^oC0IM{O3 q-Slxli+4?kF`w&>Ba#}Pw;A?(H?J?bC}IgTjlt8^&t;ucLK6V35isTe From 47168cadf3382ff6116973bbd8a03dfe57d58538 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Mon, 27 Oct 2025 11:19:14 -0700 Subject: [PATCH 4/9] Update icon.png --- devtools-extension/icon.png | Bin 1323 -> 764 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/devtools-extension/icon.png b/devtools-extension/icon.png index 3736389b70218c602b6183d6a538bdecaeef2e5d..66355361714458dbb2d76a1806501cb5b8a31399 100644 GIT binary patch delta 321 zcmV-H0lxmL3j75jiBL{Q4GJ0x0000DNk~Le0000I0000G2nGNE02>A`T(Kd?0e=Ag zNkl16h%L$azk!Fu~M*3Y2^|EHWt?Q`Ypgli0(kE6c!ey2`E-#T&gV0xX;M`c03wcK4u=E7FzmB` zlIJ;=WpTM&P^6TUWhqou-QN5tJb4;GQ55L9PFa>;8$CKU-y0c*!Rd5@pRobDuETL0 z(llM?Z_>6cmSrKOT%5w{*Xp_!ilPWj)3*2TkWz|yo`vuGi`x{v!h3%06&5}L2n?%U T$6biv00000NkvXXu0mjfV||3q delta 884 zcmV-)1B?9p1*-}niBL{Q4GJ0x0000DNk~Le0000s0000T2nGNE0O2m5D6t{O0e=H6 zNklPp&aEoYZ zh+5heT<*{ibSctkYw_n`o$v6dJbu2{UytVZ@dXZk-XG8P#o-*zxtdZ+F##_xFI-$) z;BYuNJ3C`*YfHAwgtxah&d<;J{(t`F^z@YN?QPjI95n%jLP5FRZsl^hl*{E(9*;*^ zmL=P!#8EU~Usv)Pmp<#Jh;rp9i}X0thw+(@xuQUIY)NS3B%(0`bd$PE=6 zB^3w+h{xlyJT>unoIoHT%P@hQrUvYarBaDVBtomzk`VxYzn@GdgVX7h(M9J={dwP0Ohlhu~E&cudUHoJ*aJgInEH5u}dwYxX^Yinc=jUfwU@1DsyY=;T z+U+*4udg^Nm5S_Hcq)|&4#O~Hec>?-gp<2S6A%q?aAmzF-?ml4=VA&*p}X0BeZ z6Ap*xI&*&_g%sm2lYjeDDeT1P$mR2Sd_JFypd%Lwh5mE!oF%1FiBKpsP|D}?kR$>X3EFM2kmy7&CN|2jpSd}^KBz^hb3kJ0000< KMNUMnLSTaGI<)ct From 5d3704ceb9647b054778e8a20011f21c8fea6b03 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Mon, 27 Oct 2025 14:34:39 -0700 Subject: [PATCH 5/9] add Step 3 memory code --- devtools-extension/devtools.js | 17 ++++++++++++++++- devtools-extension/manifest.json | 11 +++++++---- devtools-extension/panel.html | 13 ++++++++++++- 3 files changed, 35 insertions(+), 6 deletions(-) diff --git a/devtools-extension/devtools.js b/devtools-extension/devtools.js index fdf129f4..cfa6ac14 100644 --- a/devtools-extension/devtools.js +++ b/devtools-extension/devtools.js @@ -1,3 +1,5 @@ +let availableMemoryCapacity; +let totalMemoryCapacity; let youClickedOn; chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => { // code invoked on panel creation @@ -7,7 +9,9 @@ chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => sayHello.addEventListener("click", () => { // show a greeting alert in the inspected page chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools Extension");'); - }); + }); + availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity'); + totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity'); }); }); @@ -35,3 +39,14 @@ backgroundPageConnection.postMessage({ name: 'init', tabId: chrome.devtools.inspectedWindow.tabId }); + +setInterval(() => { + chrome.system.memory.getInfo((data) => { + if (availableMemoryCapacity) { + availableMemoryCapacity.innerHTML = data.availableCapacity; + } + if (totalMemoryCapacity) { + totalMemoryCapacity.innerHTML = data.capacity; + } + }); +}, 1000); diff --git a/devtools-extension/manifest.json b/devtools-extension/manifest.json index 18621aa6..30adb9d8 100644 --- a/devtools-extension/manifest.json +++ b/devtools-extension/manifest.json @@ -6,15 +6,18 @@ "devtools_page": "devtools.html", "content_scripts": [{ "matches": [ - "http://*/*", - "https://*/*" + "http://*/*", + "https://*/*" ], "run_at": "document_idle", "js": [ - "content_script.js" + "content_script.js" ] }], "background": { "service_worker": "background.js" - } + }, + "permissions": [ + "system.memory" + ] } diff --git a/devtools-extension/panel.html b/devtools-extension/panel.html index 458bf128..6c5c8f73 100644 --- a/devtools-extension/panel.html +++ b/devtools-extension/panel.html @@ -4,8 +4,19 @@ -

A Basic DevTools Extension Interacting with the Inspected Page

+

Custom DevTools Tool

+ +

Memory

+
+ Available Memory Capacity: +
+
+ Total Memory Capacity: +
+ +

Interact between inspected webpage and DevTools

+

Click somewhere in the inspected webpage.

From 5dd49a8c1da05477ceca09241c10af7ce241daf4 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Mon, 27 Oct 2025 15:06:31 -0700 Subject: [PATCH 6/9] comment code --- devtools-extension/devtools.js | 2 ++ 1 file changed, 2 insertions(+) diff --git a/devtools-extension/devtools.js b/devtools-extension/devtools.js index cfa6ac14..2d5145fd 100644 --- a/devtools-extension/devtools.js +++ b/devtools-extension/devtools.js @@ -10,6 +10,7 @@ chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => // show a greeting alert in the inspected page chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools Extension");'); }); + // display memory availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity'); totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity'); }); @@ -40,6 +41,7 @@ backgroundPageConnection.postMessage({ tabId: chrome.devtools.inspectedWindow.tabId }); +// Periodically update Memory display setInterval(() => { chrome.system.memory.getInfo((data) => { if (availableMemoryCapacity) { From 378d047d208ee159a98d848e0757b4af3c2be763 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Mon, 27 Oct 2025 16:18:21 -0700 Subject: [PATCH 7/9] redesign --- devtools-extension/README.md | 4 ++-- devtools-extension/devtools.js | 41 +++++++++++++++++--------------- devtools-extension/manifest.json | 4 ++-- devtools-extension/panel.html | 20 ++++++++++------ 4 files changed, 39 insertions(+), 30 deletions(-) diff --git a/devtools-extension/README.md b/devtools-extension/README.md index c07bd0e6..34014a16 100644 --- a/devtools-extension/README.md +++ b/devtools-extension/README.md @@ -1,5 +1,5 @@ # Custom DevTools extension -This sample adds a custom tool tab and panel in Microsoft Edge DevTools. +This sample adds a custom tool in Microsoft Edge DevTools, including the tool's tab and panel. -For instructions, see [Sample: Custom DevTools tool tab and panel](https://learn.microsoft.com/microsoft-edge/extensions/developer-guide/devtools-extension). +For instructions, see [Sample: Custom DevTools tool (tab and panel)](https://learn.microsoft.com/microsoft-edge/extensions/developer-guide/devtools-extension). diff --git a/devtools-extension/devtools.js b/devtools-extension/devtools.js index 2d5145fd..4eec6331 100644 --- a/devtools-extension/devtools.js +++ b/devtools-extension/devtools.js @@ -1,27 +1,42 @@ let availableMemoryCapacity; let totalMemoryCapacity; -let youClickedOn; -chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => { +let youClickedOn; + +chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => { // code invoked on panel creation panel.onShown.addListener( (extPanelWindow) => { + // memory + availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity'); + totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity'); + // 2-way message sending let sayHello = extPanelWindow.document.querySelector('#sayHello'); youClickedOn = extPanelWindow.document.querySelector('#youClickedOn'); sayHello.addEventListener("click", () => { // show a greeting alert in the inspected page - chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools Extension");'); + chrome.devtools.inspectedWindow.eval('alert("Hello from the DevTools extension!");'); }); - // display memory - availableMemoryCapacity = extPanelWindow.document.querySelector('#availableMemoryCapacity'); - totalMemoryCapacity = extPanelWindow.document.querySelector('#totalMemoryCapacity'); }); }); +// Update Memory display +setInterval(() => { + chrome.system.memory.getInfo((data) => { + if (availableMemoryCapacity) { + availableMemoryCapacity.innerHTML = data.availableCapacity; + } + if (totalMemoryCapacity) { + totalMemoryCapacity.innerHTML = data.capacity; + } + }); +}, 1000); + +// Send message from inspected page to DevTools chrome.runtime.onMessage.addListener((request, sender, sendResponse) => { // Messages from content scripts should have sender.tab set if (sender.tab && request.click == true) { console.log('I am here!'); if (youClickedOn) { - youClickedOn.innerHTML = `You clicked on position (${request.xPosition}, ${request.yPosition}) in the inspected page.`; + youClickedOn.innerHTML = `(${request.xPosition}, ${request.yPosition})`; } sendResponse({ xPosition: request.xPosition, @@ -40,15 +55,3 @@ backgroundPageConnection.postMessage({ name: 'init', tabId: chrome.devtools.inspectedWindow.tabId }); - -// Periodically update Memory display -setInterval(() => { - chrome.system.memory.getInfo((data) => { - if (availableMemoryCapacity) { - availableMemoryCapacity.innerHTML = data.availableCapacity; - } - if (totalMemoryCapacity) { - totalMemoryCapacity.innerHTML = data.capacity; - } - }); -}, 1000); diff --git a/devtools-extension/manifest.json b/devtools-extension/manifest.json index 30adb9d8..315dfbb6 100644 --- a/devtools-extension/manifest.json +++ b/devtools-extension/manifest.json @@ -1,6 +1,6 @@ { - "name": "DevTools Sample Extension", - "description": "A Basic DevTools Extension Interacting with the Inspected Page", + "name": "Custom DevTools Tool", + "description": "A DevTools extension interacting with the inspected page", "manifest_version": 3, "version": "1.0", "devtools_page": "devtools.html", diff --git a/devtools-extension/panel.html b/devtools-extension/panel.html index 6c5c8f73..bb923534 100644 --- a/devtools-extension/panel.html +++ b/devtools-extension/panel.html @@ -4,19 +4,25 @@ -

Custom DevTools Tool

+

Custom DevTools Tool

-

Memory

+

Memory

- Available Memory Capacity: + Available Memory Capacity:
- Total Memory Capacity: + Total Memory Capacity:
-

Interact between inspected webpage and DevTools

- -

+

Send message from DevTools to inspected page

+ + +

Send message from inspected page to DevTools

Click somewhere in the inspected webpage.

+
+ Coordinates: +
+ + From 1a67f59cc93e9624f3413c84951bd8ed2182760b Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Tue, 28 Oct 2025 13:50:04 -0700 Subject: [PATCH 8/9] -blank --- devtools-extension/panel.html | 1 - 1 file changed, 1 deletion(-) diff --git a/devtools-extension/panel.html b/devtools-extension/panel.html index bb923534..9838fd68 100644 --- a/devtools-extension/panel.html +++ b/devtools-extension/panel.html @@ -23,6 +23,5 @@

Send message from inspected page to DevTools

Coordinates: - From d141b5660759235ee09c74a91bc6e598c6849da0 Mon Sep 17 00:00:00 2001 From: Michael Hoffman <45407486+mikehoffms@users.noreply.github.com> Date: Tue, 28 Oct 2025 14:34:04 -0700 Subject: [PATCH 9/9] point readme to new article --- README.md | 10 +++------- devtools-extension/README.md | 8 ++++++-- 2 files changed, 9 insertions(+), 9 deletions(-) diff --git a/README.md b/README.md index 1ba7411b..b1f1242e 100644 --- a/README.md +++ b/README.md @@ -80,13 +80,9 @@ https://github.com/MicrosoftEdge/Demos/blob/main/README.md#microsoft-edge-extens sync'd July 30, 2025 --> -| Demo name | Description and docs | Source code & Readme | Live demo page | -|---|---|---|---| -| DevTools extension | Used for [Create a DevTools extension, adding a custom tool tab and panel](https://learn.microsoft.com/microsoft-edge/extensions/developer-guide/devtools-extension). | [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension) | n/a | -| Basic | A basic DevTools extension. | [/devtools-extension/sample 1/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%201) | n/a | -| Panel | A basic DevTools extension with a panel. | [/devtools-extension/sample 2/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%202) | n/a | -| CDP | A basic DevTools extension invoking Chrome Developer Protocol (CDP) APIs. | [/devtools-extension/sample 3/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%203) | n/a | -| Inspect | A basic DevTools extension that interacts with the Inspected page. | [/devtools-extension/sample 4/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension/sample%204) | n/a | +| Demo name | Description | Docs | Source code & Readme | Live demo page | +|---|---|---|---|---| +| DevTools extension | A Microsoft Edge extension that adds a **Custom** tool in Microsoft Edge DevTools. | [Sample: Custom DevTools tool](https://learn.microsoft.com/microsoft-edge/extensions/samples/custom-devtools-tool) | [/devtools-extension/](https://github.com/MicrosoftEdge/Demos/tree/main/devtools-extension) | n/a | See also: * [Samples for Microsoft Edge extensions](https://learn.microsoft.com/microsoft-edge/extensions/samples). Includes samples that are in the **microsoft / MicrosoftEdge-Extensions** repo: diff --git a/devtools-extension/README.md b/devtools-extension/README.md index 34014a16..7fec569c 100644 --- a/devtools-extension/README.md +++ b/devtools-extension/README.md @@ -1,5 +1,9 @@ # Custom DevTools extension -This sample adds a custom tool in Microsoft Edge DevTools, including the tool's tab and panel. +This DevTools Extension sample is a Microsoft Edge extension that adds a **Custom** tool in Microsoft Edge DevTools, including a tab in the **Activity Bar**, and a panel below the tab. -For instructions, see [Sample: Custom DevTools tool (tab and panel)](https://learn.microsoft.com/microsoft-edge/extensions/developer-guide/devtools-extension). +* The **Custom** DevTools tool calls the DevTools API to display memory information. + +* The webpage under inspection, and the **Custom** DevTools tool, send messages back and forth, in two-way communication. + +For instructions, see [Sample: Custom DevTools tool](https://learn.microsoft.com/microsoft-edge/extensions/samples/custom-devtools-tool).