Сценарий содержимого расширения Chrome — приложение не определено на сайте Ember

Я пишу простое расширение Google Chrome для каналов twitch.tv. Единственная функция, которая мне нужна, — это отправить сообщение в чат, желательно без явного использования текстового поля и кнопки чата.

Просмотрев исходный код аддона 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. Так же не нашел подобных проблем.


person Skipper    schedule 08.10.2016    source источник
comment
Ваш setTimeout код выполняет main() немедленно, а не после задержки. Вы должны использовать main без (). В настоящее время вы говорите ему выполнить функцию, возвращаемую немедленным выполнением main().   -  person Makyen♦    schedule 08.10.2016
comment
Один из методов, который я использовал для проверки времени настройки страницы, заключается в том, чтобы соответствующий код запускался с кнопки. Делая это для тестирования, вы можете напрямую контролировать выполнение кода. Очевидно, что если это проблема времени, вам нужно будет определить программный метод ожидания того, что вам нужно, чтобы быть доступным. Упрощенным способом сделать это будет цикл setTimeout, который многократно проверяет определение App и продолжает, если это не так, то просто установите другой тайм-аут. Возможно, лучше было бы следить за завершением запроса, который предоставляет код/информацию.   -  person Makyen♦    schedule 08.10.2016


Ответы (1)


Эта ошибка возникает из-за того, что content_script и WEB page имеют некоторый уровень DOM, но имеют разные контексты JavaScript, поэтому вы не можете получить доступ к объектам 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.

К сожалению, я не понимаю из вашего вопроса, каким образом вы хотите ввести сообщение, которое вы хотите отправить в чат, поэтому я приведу пример, как отправить фиксированное сообщение несколько раз.

Шаг за шагом

Определите content_script и сделайте proxy.js веб-доступным в manifest.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

person MobDev    schedule 08.10.2016