如何在Dart中用package:js声明异步函数实现Chrome上下文菜单监听

首先确保你的 pubspec.yaml 已引入 package:js 依赖：

dependencies:
  js: ^0.6.7

第一步：编写 JS 互操作绑定代码 #

import 'package:js/js.dart';

// 声明当前为JS互操作库
@JS()
library chrome_interop;

// 定义Chrome上下文菜单点击事件的参数结构
@JS()
@anonymous
class ClickData {
  external String get menuItemId;
  external String? get selectionText;
}

// 绑定chrome.contextMenus相关API
@JS('chrome.contextMenus.onClicked.addListener')
external void addContextMenuClickListener(Function listener);

// 如果你要调用的register是JS环境已有的全局函数，需要额外绑定
@JS('register')
external void register(String selectedText);

第二步：添加异步监听器 #

void initContextMenu() {
  // 直接传入Dart的async函数即可，package:js会自动完成Dart Future与JS Promise的互转
  addContextMenuClickListener(allowInterop((ClickData clickData) async {
    if (clickData.menuItemId == 'selectedText' && clickData.selectionText != null) {
      register(clickData.selectionText!);
    }
  }));
}

补充说明 #

• 所有传给JS侧的Dart函数都需要用allowInterop包装，否则JS无法正常调用
• async函数不需要额外特殊注解，Dart侧的Future返回值会被自动转换为JS侧的Promise，完全符合Chrome API的异步监听要求
• 你之前写的create方法注解写法有误，不需要携带括号，正确写法参考：

  @JS('chrome.contextMenus.create')
  external void createContext(Object createOptions);
  

内容的提问来源于stack exchange，提问作者JanProgramistaVII