Расширение Google Chrome - Как я могу включить контентный скрипт более одного раза?

Question

Последние несколько дней я работаю над расширением Chrome для веб-сайта. Это идет очень хорошо, но я столкнулся с проблемой, с которой вы могли бы помочь.

Вот краткое описание того, что делает расширение (эта функциональность завершена):

1. Пользователь может ввести свое имя пользователя и пароль во всплывающем окне расширений и подтвердить свою учетную запись для определенного веб-сайта
2. Когда пользователь просматривает http://twitter.com, динамически включается контентный скрипт, который манипулирует DOM, добавляя дополнительную кнопку рядом с каждым отображаемым твитом.
3. Когда пользователь нажимает эту кнопку, ему предоставляется диалоговое окно

Я добился большого прогресса, но вот моя проблема:

Когда пользователь заходит в Твиттер, скрипт контента активируется, и все твиты на странице получают мою новую кнопку - но если пользователь нажимает «Еще ...» и динамически загружает следующие 20 твитов ... эти новые дополнения к сценарий содержимого не влияет на DOM страницы (поскольку он уже загружен).

Я мог бы добавить прослушиватель событий к кнопке «Еще ...», чтобы затем он снова запускал исходный контент-скрипт (и добавляет новую кнопку), но мне нужно было бы предсказать длину ответа ajax-запроса в twitter. Я не могу подключиться к их Ajax-запросу, который привлекает больше твитов, и вызвать мою функцию addCurateButton () после завершения запроса.

Как вы думаете, что является лучшим решением? (если есть)

Answer 1

То, что вы хотите сделать, это повторять ваш контент-скрипт каждый раз, когда меняется DOM.К счастью, для этого есть событие. Посмотрите на событие мутации с именем DOMNodeInserted .

Перепишите сценарий содержимого, чтобы он прикреплял прослушиватель событий к телу DOM для события DOMNodeInserted.См. Пример ниже:

var isActive = false;
/* Your function that injects your buttons */
var inject = function() {
  if (isActive) {
    console.log('INFO: Injection already active');
    return;
  }
  try {
    isActive = true;
    //inject your buttons here
    //for the sake of the example I just put an alert here.
    alert("Hello. The DOM just changed.");
  } catch(e) {
    console.error("ERROR: " + e.toString());
  } finally {
    isActive = false;
  }
};
document.body.addEventListener("DOMNodeInserted", inject, false);

В последней строке будет добавлен прослушиватель событий.Когда страница загружается, событие вызывается довольно часто, поэтому вы должны определить логическое значение (например, var isActive), которое вы инициализируете как false.Всякий раз, когда запускается функция инъекции, проверьте, isActive == true и затем прервите инъекцию, чтобы не выполнять ее слишком часто в одно и то же время.

Answer 2

Вы можете прикрепить обработчик событий к кнопке или ссылку, которая используется для получения дополнительных результатов.Затем прикрепите к нему функцию, чтобы при каждом нажатии кнопки ваше расширение удаляло все кнопки из DOM и начинало с их вставки, или проверяло, существует ли ваша кнопка в этом конкретном классе элемента DOM или нет, и присоединяйте кнопку, если это не так.«т.

Answer 3

Взаимодействие с Ajax, вероятно, самая сложная задача, чтобы заставить контент-скрипт работать, но я думаю, что вы на правильном пути. Существует несколько разных подходов к решению этой проблемы. В вашем случае, однако, я думаю, что комбинация двух подходов (о которых я расскажу в последнюю очередь) была бы наилучшей.

1. Подключите прослушиватели событий к DOM, чтобы обнаружить соответствующие изменения. Это решение является тем, что вы предложили, и вводит условие гонки.

2. Постоянно проверяйте DOM на наличие изменений внутри цикла (предпочтительно один выполняется с setInterval). Это решение будет эффективным, но относительно неэффективным.

Лучшим из двух подходов было бы инициировать цикл проверки только после нажатия кнопки more . Это решение позволит избежать проблемы с синхронизацией и будет эффективным.