Использование углового JS страницы в расширении Chrome

javascript angularjs google-chrome-extension

2248 просмотра

3 ответа

373 Репутация автора

У меня есть HTML-страница, на которой настроен DOM с Angular. Сейчас я создаю расширение Chrome для изменения значения в текстовом поле. element.value= newValueне будет работать, так как текстовое поле разработано с Angular. Прочитав некоторые ресурсы, я узнал, что мне нужно внести изменения в область действия элемента. Я пытался сделать это в расширении.

var eleScope = window.angular.element(document.querySelector('.textbox')).scope();
eleScope.$apply(function() {
  eleScope.item.request.box = newValue;
});

Это не похоже на работу. Когда я углубился в проблему, я понял, что угол в области окна не соответствует нужной области.

Я также попытался внедрить angular.js из моего расширения и использовать angular.elementнапрямую, что также не решает проблему.

Я что-то пропустил. Цените ваши ответы.

Автор: RaviTeja Источник Размещён: 03.04.2014 04:26

Ответы (3)


4 плюса

771 Репутация автора

Хотя ваша веб-страница и скрипт содержимого вашего расширения Chrome используют один и тот же DOM, они имеют разные контексты выполнения JS. Другими словами, несмотря на захват элемента через angular.element().scope()расширение Chrome, вы все еще не получаете доступ к нужному объекту области. (Подробнее об этом см. В документации по Chrome dev .)

Чтобы перенести измененные данные из вашего расширения Chrome на страницу, вы можете либо манипулировать DOM с помощью своего скрипта контента, либо предпринять некоторые дополнительные шаги, чтобы перенести измененные данные в контекст выполнения веб-страницы (и впоследствии в контроллер вашего компьютера). объем).

Для последнего, решение состоит в том, чтобы использовать API передачи сообщений Chrome; в частности, API, разработанный для связи между веб-страницей и расширением Chrome (см. здесь ).

Вот пример из документации:

Сначала включите API для соответствующего веб-сайта (ов) в файле manifest.json:

"externally_connectable": {
  "matches": ["http://*.foo.com/*"]
}

С веб-страницы сделайте запрос на подключение к расширению Chrome. При обратном вызове вы обновите модель:

// Chrome extension's ID
var extensionId = "abcdefghijklmnoabcdefhijklmnoabc";

chrome.runtime.sendMessage(extensionId, {foo: 'bar'},
  function(response) {
    if (response.success) {
      $scope.myData.foo = response.data;
      $scope.$apply();
    }
  });

В background.jsфайле вашего расширения Chrome добавьте прослушиватель для запроса:

chrome.runtime.onMessageExternal.addListener(
  function(request, sender, sendResponse) {
    if (request.foo) {
      sendResponse({ data: 'modified data goes here' });
    }
  });

Этот процесс позволит вашему расширению Chrome отправлять данные в правильную среду выполнения, что позволит вашему приложению AngularJS работать с ним.

Автор: Jonathan Guerrera Размещён: 17.10.2014 06:32

6 плюса

173 Репутация автора

Решение

Хм ... На самом деле вы должны иметь возможность просто изменить значение с помощью vanilla Javascript или JQuery и не должны обновлять область видимости, так как это двусторонняя привязка, т.е. Обновление представления обновляет модель и наоборот.

Единственная причина, по которой модель не обновляется, заключается в том, что наблюдатели для обновления модели запускают только определенные события, такие как «щелчок» или «ввод».

Таким образом, решение здесь было бы вручную инициировать эти события. Это можно сделать:

// the selector used is based on your example.
var elementTOUpdate = $('.textbox');
input.val('new-value');
input.trigger('input');

Последний оператор вызовет все обработчики в элементе для события «input» (которое будет запускать угловых наблюдателей) и обновит область. Более подробная информация о функции триггера: http://api.jquery.com/trigger/

Автор: Venkatesh Размещён: 17.10.2014 07:16

0 плюса

58107 Репутация автора

Основная проблема хорошо объяснена в ответе Джонатана Герреры : вы не можете просто загрузить Angular в свое расширение и ожидать, что он будет работать, потому что это другой экземпляр Angular; настоящий находится в другом контексте JS.


Другое возможное (хотя и хакерское) решение - ввести код в контекст страницы . Таким образом, вы фактически манипулируете собственным Angular страницы.

Его можно комбинировать с другими методами взаимодействия между сценарием уровня страницы и сценарием содержимого .

Автор: Xan Размещён: 02.02.2016 11:13
Вопросы из категории :
32x32