Question

我正在为twitch.tv频道撰写简单的Google Chrome扩展程序。我需要的唯一功能是发送聊天消息，最好不要明确使用聊天文本框和按钮。

通过查看BetterTTV addon的源代码，我找到了负责发送聊天消息的功能：

App.__container__.lookup('controller:chat').currentRoom.tmiRoom.sendMessage('test message');

现在，当我使用Chrome DevTools中的控制台执行此操作时，它完全正常。

但是，在扩展程序的内容脚本中使用它会抛出：script1.js:28 Uncaught ReferenceError: App is not defined

尝试使用window.Ember（在控制台中工作，在内容脚本中抛出未定义）时，情况也是如此。

以防万一，这里是内容脚本的完整测试代码：

$(document).ready(function() {
    setTimeout(function() {
        main();
    }, 5000);
});

function main() {
    var tmi = App.__container__.lookup('controller:chat').currentRoom;

    tmi.tmiRoom.sendMessage('TEST'); 
}

虽然我在chrome扩展方面有一些经验，但我从来没有处理过有关Ember.js的任何事情。我也没有发现任何类似的问题。

Answer 1

发生此错误是因为content_script和WEB page有一些DOM层，但是有不同的JavaScript上下文，因此您无法从content_script访问WEB页面的javascript对象。

Yoy可以通过这种方式做你想做的事情：

注入页面proxy脚本，该脚本可在页面的JS上下文中工作，并从content_script收听自定义事件。
将来自content_script的自定义消息与您的消息发送给页面的监听器。
在收到来自App.__container__.lookup('controller:chat').currentRoom.tmiRoom.sendMessage('test message');的消息时，从1开始在监听器中运行content_script。

遗憾的是，我不明白你的问题是什么方式输入要发送给聊天的消息，所以我将举例说明如何发送固定消息几次。

一步一步

定义content_script并在 manifest.js 中访问proxy.js网址：

...
"content_scripts": [
  {
    "matches": ["https://www.twitch.tv/*"],
    "js": ["runner.js"]
  }
],
"web_accessible_resources":["proxy.js"]
....

在content_script runner.js 中将proxy.js注入页面并向其发送消息：

...
var inject = document.createElement("script");
inject.src=chrome.extension.getURL("proxy.js");
(document.head||document.documentElement).appendChild(inject);


// replace it with your code which sends message to the proxy, now for example it sends "Hi!" message for every second
setInterval('window.postMessage({"event":"chatMessage","value":"Hi!"},"*");',1000);
...

在 proxy.js 中收听消息并将其代理到聊天中，如果这是您的活动：

...
window.addEventListener("message", function(event){
    if(event.data.hasOwnProperty("event") && event.data.event == "chatMessage")
    {
        App.__container__.lookup('controller:chat').currentRoom.tmiRoom.sendMessage(event.data.value);
    }
});
...

这就是全部！：）

了解更多

关于跨页面管理的Chrome内容脚本文档：https://developer.chrome.com/extensions/content_scripts#host-page-communication

Chrome扩展程序内容脚本 - 在Ember网站上未定义应用程序

1 个答案:

一步一步

了解更多