diff --git a/README.md b/README.md index 1ba7411b..5f4fe7ed 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 | +|---|---|---|---|---| +| Custom DevTools tool | 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 a30474a4..b055129e 100644 --- a/devtools-extension/README.md +++ b/devtools-extension/README.md @@ -1,3 +1,9 @@ -# Create your own DevTools extension +# Custom DevTools tool -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 Microsoft Edge extension sample adds a **Custom** tool in Microsoft Edge DevTools, including a tab in the **Activity Bar**, and a panel below the tab. + +* The **Custom** DevTools tool calls the DevTools API to display memory information. + +* The webpage under inspection, and the **Custom** DevTools tool, send messages to each other. + +For instructions, see [Sample: Custom DevTools tool](https://learn.microsoft.com/microsoft-edge/extensions/samples/custom-devtools-tool). 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/devtools.js b/devtools-extension/devtools.js new file mode 100644 index 00000000..034a1b92 --- /dev/null +++ b/devtools-extension/devtools.js @@ -0,0 +1,57 @@ +let availableMemoryCapacity; +let totalMemoryCapacity; +let youClickedOn; + +chrome.devtools.panels.create("Custom", "icon.png", "panel.html", panel => { + // Code invoked on panel creation. + panel.onShown.addListener( (extPanelWindow) => { + // Memory API. + 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!");'); + }); + }); +}); + +// Update the Memory display. +setInterval(() => { + chrome.system.memory.getInfo((data) => { + if (availableMemoryCapacity) { + availableMemoryCapacity.innerHTML = data.availableCapacity; + } + if (totalMemoryCapacity) { + totalMemoryCapacity.innerHTML = data.capacity; + } + }); +}, 1000); + +// Send a message from the 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!'); // todo: delete this debug line + if (youClickedOn) { + youClickedOn.innerHTML = `(${request.xPosition}, ${request.yPosition})`; + } + sendResponse({ + xPosition: request.xPosition, + yPosition: request.yPosition + }); + } +}); + +// Create a connection to the background service worker. +const backgroundPageConnection = chrome.runtime.connect({ + name: "devtools-page" +}); + +// Relay the tab ID to the background service worker. +backgroundPageConnection.postMessage({ + name: 'init', + tabId: chrome.devtools.inspectedWindow.tabId +}); diff --git a/devtools-extension/icon.png b/devtools-extension/icon.png new file mode 100644 index 00000000..66355361 Binary files /dev/null and b/devtools-extension/icon.png differ diff --git a/devtools-extension/manifest.json b/devtools-extension/manifest.json new file mode 100644 index 00000000..08bf9974 --- /dev/null +++ b/devtools-extension/manifest.json @@ -0,0 +1,23 @@ +{ + "name": "Custom DevTools tool", + "description": "A DevTools extension interacting with the inspected page", + "manifest_version": 3, + "version": "1.0", + "devtools_page": "devtools.html", + "content_scripts": [{ + "matches": [ + "http://*/*", + "https://*/*" + ], + "run_at": "document_idle", + "js": [ + "content_script.js" + ] + }], + "background": { + "service_worker": "service-worker.js" + }, + "permissions": [ + "system.memory" + ] +} diff --git a/devtools-extension/panel.html b/devtools-extension/panel.html new file mode 100644 index 00000000..fb7711fa --- /dev/null +++ b/devtools-extension/panel.html @@ -0,0 +1,26 @@ + + + + + + +

Custom DevTools tool

+ +

Memory

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

Send message from DevTools to inspected page

+ +

Send message from inspected page to DevTools

+

Click somewhere in the inspected webpage.

+
+ Coordinates: +
+ + + 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 @@ - - - - - - - - - diff --git a/devtools-extension/sample 4/devtools.js b/devtools-extension/sample 4/devtools.js deleted file mode 100644 index fdf129f4..00000000 --- a/devtools-extension/sample 4/devtools.js +++ /dev/null @@ -1,37 +0,0 @@ -let youClickedOn; -chrome.devtools.panels.create("Sample Panel", "icon.png", "panel.html", panel => { - // code invoked on panel creation - panel.onShown.addListener( (extPanelWindow) => { - 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.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.`; - } - sendResponse({ - xPosition: request.xPosition, - yPosition: request.yPosition - }); - } -}); - -// Create a connection to the background service worker -const backgroundPageConnection = chrome.runtime.connect({ - name: "devtools-page" -}); - -// Relay the tab ID to the background service worker -backgroundPageConnection.postMessage({ - name: 'init', - tabId: chrome.devtools.inspectedWindow.tabId -}); diff --git a/devtools-extension/sample 4/manifest.json b/devtools-extension/sample 4/manifest.json deleted file mode 100644 index 18621aa6..00000000 --- a/devtools-extension/sample 4/manifest.json +++ /dev/null @@ -1,20 +0,0 @@ -{ - "name": "DevTools Sample Extension", - "description": "A Basic DevTools Extension Interacting with the Inspected Page", - "manifest_version": 3, - "version": "1.0", - "devtools_page": "devtools.html", - "content_scripts": [{ - "matches": [ - "http://*/*", - "https://*/*" - ], - "run_at": "document_idle", - "js": [ - "content_script.js" - ] - }], - "background": { - "service_worker": "background.js" - } -} diff --git a/devtools-extension/sample 4/panel.html b/devtools-extension/sample 4/panel.html deleted file mode 100644 index 458bf128..00000000 --- a/devtools-extension/sample 4/panel.html +++ /dev/null @@ -1,11 +0,0 @@ - - - - - - -

A Basic DevTools Extension Interacting with the Inspected Page

- -

- - diff --git a/devtools-extension/sample 4/background.js b/devtools-extension/service-worker.js similarity index 62% rename from devtools-extension/sample 4/background.js rename to devtools-extension/service-worker.js index 805cc666..30833475 100644 --- a/devtools-extension/sample 4/background.js +++ b/devtools-extension/service-worker.js @@ -2,17 +2,17 @@ let id = null; const connections = {}; chrome.runtime.onConnect.addListener(devToolsConnection => { - // Assign the listener function to a variable so we can remove it later + // Assign the listener function to a variable, so we can remove it later. let devToolsListener = (message, sender, sendResponse) => { if (message.name == "init") { id = message.tabId; connections[id] = devToolsConnection; - // Send a message back to DevTools - connections[id].postMessage("Connected!"); + // Send a message back to DevTools. + connections[id].postMessage("Connected!"); // todo: where can we see the message "Connected!" in DevTools? } }; - // Listen to messages sent from the DevTools page + // Listen to messages sent from the DevTools page. devToolsConnection.onMessage.addListener(devToolsListener); devToolsConnection.onDisconnect.addListener(() => {