Dart chrome 扩展：监听 chrome api 事件答案

【问题标题】：Dart chrome extension: Listen to chrome api eventsDart chrome 扩展：监听 chrome api 事件
【发布时间】：2014-10-27 04:34:21
【问题描述】：

为了更好地描述我的问题，我创建了一个用 Dart 编写的 chrome 扩展的小示例。您可以在Gist 上查看代码或下载扩展程序。

问题

此示例在 Dartium 中运行良好，但编译为 javascript 时出现类型错误：Uncaught TypeError: undefined is not a function for the line:

context['chrome']['runtime']['onMessage'].callMethod('addListener', [onMessageListener]);

我已经走了多远

正如您在示例中看到的那样，函数 alert() 或 console.log() 通过 dart:js 也在 js 扩展中工作。 所以这可能是 dart2js 和添加事件监听器的特殊问题？
还打印出context['chrome']['runtime']['onMessage'] 显示正确的事件对象。（例如：context['console'].callMethod('log', [context['chrome']['runtime']['onMessage']]);）
我知道有一个chrome pub包，但是在onMessage中响应接收到的消息时还是有一个bug。另见question。直接通过 dart:js 使用 chrome api 是该 dart 版本的解决方法。

我用代码玩了很多，但都导致相同的错误。现在我没有想法了。希望社区能再次帮助我。

编辑： 我现在按照罗伯特的建议在dartbug.com 上报告了这个错误。无论如何，如果有人知道，我仍然愿意寻求解决方法或其他方法。

【问题讨论】：

安迪，看看stackoverflow.com/questions/25193392/…。它对我有用。
是的！很感谢。我已经知道那个线程，但没有意识到这是同一个问题。在这个错误上卡了一个月......谢谢伙计:)

标签： google-chrome-extension dart dart2js dart-js-interop

【解决方案1】：

所以你的例子对我来说很好：

//Placed in web/

import 'dart:js';

void main() {
  //This doesnt work in js
  context['chrome']['runtime']['onMessage'].callMethod('addListener', [onMessageListener]);
  context['chrome']['runtime'].callMethod('sendMessage', ['someMessage']);
  context['chrome']['runtime'].callMethod('sendMessage', [null, 'someMessage']);
}


void onMessageListener(message, sender, sendResponse) {
  print("test");
  print(message);
}

输出

test (:1)
someMessage (:1)
test (:1)
someMessage (:1)

问候，罗伯特

// 抱歉错过了你得到的异常

您应该在 www.dartbug.com 上提交有关此问题的错误

问候，罗伯特

// 现在你应该可以使用 chrome 包了。它在这里工作正常：

import 'dart:js';
import 'package:chrome/chrome_ext.dart' as chrome;

void onMessageListener(message, sender, sendResponse) {
  print("test");
  print(message);
}

void main() {
  chrome.runtime.onMessage.listen((chrome.OnMessageEvent event) {
    print(event.message);
  });

  JsObject runtime = context['chrome']['runtime'];
  runtime.callMethod('sendMessage', ['someMessage']);
  runtime.callMethod('sendMessage', [null, 'someMessage']);
}

问候，罗伯特

【讨论】：

示例编译成Js了吗？ dart-version 也适用于我，但不适用于编译的 Js-version。
不，那是我的错误。马上调试。给我一秒钟:)
所以错误来自 addListener 访问。但我现在不能告诉你为什么。
没错。我的结果是相似的。如上所述： chrome.runtime.onMessage 可以访问。 context['console'].callMethod('log', [context['chrome']['runtime']['onMessage']]); 打印事件对象。但是在对象上调用 addListiner 会破坏扩展 :(
到您的编辑“现在您应该能够使用 chrome 包”：正如问题中所说，我使用了 chrome.runtime.onMessage.listen 但该包在 responding-functionality 中有一个错误 我也想用。这是我切换到 js-interop 变体的主要原因。可悲的是，还使用 dart:js 而不是 chrome(-package) 指出了这个错误。（对于 chrome-package 的错误，请参见很久以前发布的issue）

【解决方案2】：

正如 keerti 已经提到的：可以找到解决方法的类似问题here。

我的解决方案如下所示：

  //Tmp: sendResponse is buged, so we use the js-version
  //chrome.runtime.onMessage.listen(onMessageDartListener);

  //..and ofcourse the js-version is buged too. So this workaround here:
  var jsOnMessageEvent = context['chrome']['runtime']['onMessage'];
  JsObject dartOnMessageEvent = (jsOnMessageEvent is JsObject ? jsOnMessageEvent : new JsObject.fromBrowserObject(jsOnMessageEvent));
  dartOnMessageEvent.callMethod('addListener', [onMessageListener]);

【讨论】：