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

Question

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

通过查看BetterTTV插件的源代码，我找到了负责发送聊天消息的函数：

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.

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

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

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

一步步

在manifest.js中定义content_script并使其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