Can debug with the MV3 Dart Debug Extension (#1802)

Author: elliette

dwds/debug_extension_mv3/pubspec.yaml

@@ -10,15 +10,20 @@ environment:
 
 dependencies:
   built_value: ^8.3.0
+  collection: ^1.15.0
   js: ^0.6.1+1
 
 dev_dependencies:
   build: ^2.0.0
   build_runner: ^2.0.6
+  built_collection: ^5.0.0
   built_value_generator: ^8.3.0
   build_web_compilers: ^3.0.0
   dwds: ^16.0.0
 
 dependency_overrides:
   dwds:
     path: ..
+  # TODO(elliette): Remove override once package:sse is published.
+  sse:
+    path: /Users/elliottbrooks/dev/sse

dwds/debug_extension_mv3/web/background.dart

@@ -12,8 +12,8 @@ import 'package:dwds/data/debug_info.dart';
 import 'package:dwds/data/extension_request.dart';
 import 'package:js/js.dart';
 
+import 'debug_session.dart';
 import 'chrome_api.dart';
-import 'data_types.dart';
 import 'lifeline_ports.dart';
 import 'logger.dart';
 import 'messaging.dart';
@@ -59,10 +59,8 @@ Future<void> _startDebugSession(Tab currentTab) async {
   if (!isAuthenticated) return;
 
   maybeCreateLifelinePort(currentTab.id);
-  final devToolsOpener = await fetchStorageObject<DevToolsOpener>(
-      type: StorageObject.devToolsOpener);
-  await _createTab('https://dart.dev/',
-      inNewWindow: devToolsOpener?.newWindow ?? false);
+  registerDebugEventListeners();
+  attachDebugger(tabId);
 }
 
 Future<bool> _authenticateUser(String extensionUrl, int tabId) async {
@@ -73,7 +71,7 @@ Future<bool> _authenticateUser(String extensionUrl, int tabId) async {
     debugError('Not authenticated: ${response.status} / $responseBody',
         verbose: true);
     _showWarningNotification('Please re-authenticate and try again.');
-    await _createTab(authUrl, inNewWindow: false);
+    await createTab(authUrl, inNewWindow: false);
     return false;
   }
   return true;
@@ -159,18 +157,3 @@ Future<Tab?> _getTab() async {
   final tabs = List<Tab>.from(await promiseToFuture(chrome.tabs.query(query)));
   return tabs.isNotEmpty ? tabs.first : null;
 }
-
-Future<Tab> _createTab(String url, {bool inNewWindow = false}) async {
-  if (inNewWindow) {
-    final windowPromise = chrome.windows.create(
-      WindowInfo(focused: true, url: url),
-    );
-    final windowObj = await promiseToFuture<WindowObj>(windowPromise);
-    return windowObj.tabs.first;
-  }
-  final tabPromise = chrome.tabs.create(TabInfo(
-    active: true,
-    url: url,
-  ));
-  return promiseToFuture<Tab>(tabPromise);
-}

dwds/debug_extension_mv3/web/chrome_api.dart

@@ -11,6 +11,7 @@ external Chrome get chrome;
 @anonymous
 class Chrome {
   external Action get action;
+  external Debugger get debugger;
   external Notifications get notifications;
   external Runtime get runtime;
   external Scripting get scripting;
@@ -43,6 +44,48 @@ class IconInfo {
   external factory IconInfo({String path});
 }
 
+/// chrome.debugger APIs:
+/// https://developer.chrome.com/docs/extensions/reference/debugger
+
+@JS()
+@anonymous
+class Debugger {
+  external void attach(
+      Debuggee target, String requiredVersion, Function? callback);
+
+  external void detach(Debuggee target, Function? callback);
+
+  external void sendCommand(Debuggee target, String method,
+      Object? commandParams, Function? callback);
+
+  external OnDetachHandler get onDetach;
+
+  external OnEventHandler get onEvent;
+}
+
+@JS()
+@anonymous
+class OnDetachHandler {
+  external void addListener(
+      void Function(Debuggee source, String reason) callback);
+}
+
+@JS()
+@anonymous
+class OnEventHandler {
+  external void addListener(
+      void Function(Debuggee source, String method, Object? params) callback);
+}
+
+@JS()
+@anonymous
+class Debuggee {
+  external int get tabId;
+  external String get extensionId;
+  external String get targetId;
+  external factory Debuggee({int tabId, String? extensionId, String? targetId});
+}
+
 /// chrome.notification APIs:
 /// https://developer.chrome.com/docs/extensions/reference/notifications
 
@@ -77,11 +120,19 @@ class Runtime {
 
   external Object getManifest();
 
+  // Note: Not checking the lastError when one occurs throws a runtime exception.
+  external ChromeError? get lastError;
+
   external ConnectionHandler get onConnect;
 
   external OnMessageHandler get onMessage;
 }
 
+@JS()
+class ChromeError {
+  external String get message;
+}
+
 @JS()
 @anonymous
 class ConnectInfo {
@@ -179,6 +230,10 @@ class Tabs {
 
   external Object create(TabInfo tabInfo);
 
+  external Object get(int tabId);
+
+  external Object remove(int tabId);
+
   external OnActivatedHandler get onActivated;
 
   external OnRemovedHandler get onRemoved;

dwds/debug_extension_mv3/web/data_serializers.dart

@@ -2,16 +2,24 @@
 // for details. All rights reserved. Use of this source code is governed by a
 // BSD-style license that can be found in the LICENSE file.
 
+import 'package:built_collection/built_collection.dart';
 import 'package:built_value/serializer.dart';
 import 'package:dwds/data/debug_info.dart';
+import 'package:dwds/data/devtools_request.dart';
+import 'package:dwds/data/extension_request.dart';
 
 import 'data_types.dart';
 
 part 'data_serializers.g.dart';
 
 /// Serializers for all the data types used in the Dart Debug Extension.
 @SerializersFor([
+  BatchedEvents,
   DebugInfo,
   DevToolsOpener,
+  DevToolsRequest,
+  ExtensionEvent,
+  ExtensionRequest,
+  ExtensionResponse,
 ])
 final Serializers serializers = _$serializers;