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

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上下文，所以你不能访问WEB页面的javascript 对象来自 content_script.

Yoy 可以用那种方式做你想做的事:

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

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

循序渐进

定义 content_script 并使 proxy.js 可在 manifest.js:

中访问 Web

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

在content_scriptrunner.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 扩展内容脚本 - 未在 Ember 网站上定义应用程序

Chrome extension content script - App is not defined on Ember site

javascript

google-chrome

google-chrome-extension

ember.js

twitch

循序渐进

阅读更多