Fix debugger example to use Fetch.enable with URL patterns to prevent…

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.

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
   }
 });