diff --git a/api-samples/debugger/README.md b/api-samples/debugger/README.md index 70e7d3061b..266af3cfde 100644 --- a/api-samples/debugger/README.md +++ b/api-samples/debugger/README.md @@ -4,11 +4,27 @@ This sample demonstrates using the [`chrome.debugger`](https://developer.chrome. ## Overview -The extension calls `chrome.debugger.attach()` on a tab to capture network events when you click the extension's action button. The response data is logged in the developer console, to demonstrate extracting a network response's data such as the request headers and URL. +The extension calls `chrome.debugger.attach()` on a tab to capture network requests when you click the extension's action button. The `Fetch.enable` command is configured with URL patterns that restrict interception to only `http://` and `https://` requests. This prevents the security error: "Cannot access a chrome-extension:// URL of different extension." + +The request data is logged in the developer console, demonstrating how to extract network request information. + +## Key Implementation Details + +**Why URL patterns are necessary:** +- Chrome does not allow extensions to access resources from other extensions (chrome-extension://) +- Without restricting URL patterns, `Fetch.enable` attempts to intercept ALL requests, including chrome-extension:// URLs +- This causes a runtime error: "Unchecked runtime.lastError: Cannot access a chrome-extension:// URL of different extension." +- **Solution:** Use the `patterns` parameter with `Fetch.enable` to only intercept valid web requests: + ```javascript + patterns: [ + { urlPattern: 'http://*' }, + { urlPattern: 'https://*' } + ] + ``` ## Running this extension 1. Clone this repository. 2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked). 3. Navigate to an HTTP/HTTPS webpage and open the devtools window. -4. Pin the extension to the browser's taskbar and click on the action button to see the network event data logged to the console. +4. Pin the extension to the browser's taskbar and click on the action button to see the network request data logged to the console. diff --git a/api-samples/debugger/service-worker.js b/api-samples/debugger/service-worker.js index f504816506..e6e21bdf22 100644 --- a/api-samples/debugger/service-worker.js +++ b/api-samples/debugger/service-worker.js @@ -1,10 +1,19 @@ chrome.action.onClicked.addListener(function (tab) { if (tab.url.startsWith('http')) { chrome.debugger.attach({ tabId: tab.id }, '1.2', function () { + // Enable Fetch interception with URL patterns restricted to http/https only. + // This prevents the error: "Cannot access a chrome-extension:// URL of different extension." + // The patterns array ensures only web requests (http/https) are intercepted, + // not chrome-extension:// URLs which are restricted by browser security. chrome.debugger.sendCommand( { tabId: tab.id }, - 'Network.enable', - {}, + 'Fetch.enable', + { + patterns: [ + { urlPattern: 'http://*' }, + { urlPattern: 'https://*' } + ] + }, function () { if (chrome.runtime.lastError) { console.error(chrome.runtime.lastError); @@ -18,8 +27,10 @@ chrome.action.onClicked.addListener(function (tab) { }); chrome.debugger.onEvent.addListener(function (source, method, params) { - if (method === 'Network.responseReceived') { - console.log('Response received:', params.response); - // Perform your desired action with the response data + // Handle Fetch.requestPaused events from the restricted Fetch.enable patterns. + // Only http/https requests will trigger this, preventing chrome-extension:// errors. + if (method === 'Fetch.requestPaused') { + console.log('Request paused:', params.request.url); + // Perform your desired action with the request data } });