Как реализовать отправку уведомлений?

Question

[thekot24]

В общем. У меня есть расширение, которое немного изменяет содержание сайта. Пусть этот сайт будет -- test.ru. Так вот, как сделать так, чтобы расширение отправляло уведомление пользователю (у которого оно установлено), если на сайте в DIV <div id="number">2</div> значение больше одного?
Знаю, как сделать отправку уведомлений, если пользователь сейчас сидит на сайте, а если вкладка с сайтом закрыта?

Answer 1

[Александр Попов]

Не является прямым ответом на вопрос, но всё же вынесу сюда, вдруг кому-то пригодится. Получить DOM дерево документа можно используя XHR2, указав правильный тип ответа: https://jsfiddle.net/b1k50r43/. Либо просто $(xhr.responseText).find(selector), если подключена jQuery :)

Также стоит учесть, что если речь не идёт о расширении (с ним проблем не будет), то нужны правильно настроенные заголовки CORS, чтобы запрос на другой домен прошёл, либо использовать самописный прокси-скрипт на PHP...

Comments

[thekot24]

Пригодится.

Answer 2

[Владислав Поляков]

var e = $('#number').text(); 
e > 1 ? fun1() : fun2(); // тернерная операция , аналогична if-else
fun1(){
  var mydiv = $('<div/>', {
    id:     'mydiv',
    class:  'mydiv',
    text: 	'Содержимое блока уведомления' 
  });
  $('.content').append(mydiv);
} // выполняется функция если e > 1

fun2(){

} // выполняется функция если e < 1 или e = 1

Comments

[thekot24]

Не, прикол в том, что расширение работает исключительно на том сайте. Если вызвать любую функцию из него на другом - ничего не произойдет.

[Владислав Поляков]

thekot24: А , понял . Простите , проглядел . На подобии этого forum.kinozal.tv/showthread.php?t=245004 ?

[thekot24]

Владислав Поляков: да, на подобии этого.

[Владислав Поляков]

thekot24: Ну там есть ссылка на репозиторию github https://github.com/versality/kinozal-chrome-extension
Далее читает статью на гитхабе https://habrahabr.ru/post/75639/
И используем XMLHttpRequest для получения данных с сайта.

[thekot24]

Владислав Поляков: ну что же попробую. Спасибо.

[Владислав Поляков]

Ну и статья создания уведомлений, может понадобится https://developer.chrome.com/extensions/notifications

[thekot24]

Владислав Поляков: то, что хотел -- нашел. Не могли бы Вы подсказать?

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://site.ru", true); // тут происходит ГЕТ запрос на указанную страницу
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) // если всё прошло хорошо, выполняем, что в скобках
  {
  var dannie = document.getElementById('dannie');
  dannie.innerHTML = xhr.responseText; // добавляем в блок с id=dannie  полученный код
  }
}
xhr.send();

есть такой код, но в ответе он получает абсолютно всю страницу, как сделать так, чтобы он получил поле с классом "user_count"?

[Владислав Поляков]

thekot24: .find();
xhr.responseText.find('.user_count');

[Владислав Поляков]

Точнее так правильней будет
$(xhr.responseText).find('.user_count');

[Владислав Поляков]

$("TAG_NAME", {"html":xhr.responseText}).find('.user_count').html()

[thekot24]

Владислав Поляков: не, не выходит. Ладно, спасибо. Удачи.

[Владислав Поляков]

thekot24: https://jsfiddle.net/brz9b1ps/

[thekot24]

Владислав Поляков: Ваш код работает, а с моим -- нет. Проблема, видимо, в том, что на странице 2 элемента с одним классом.

[Владислав Поляков]

thekot24: Попробуйте не через alert() , а через console.log() чтоб узнать , что именно приходит )

[Владислав Поляков]

upyourpic.org/images/201607/ppaziiikee.jpg

[Владислав Поляков]

https://jsfiddle.net/0j7kp5eg/

[thekot24]

Владислав Поляков: Ваш пример нормально работает. Спасибо.

[Александр Попов]

Владислав Поляков: А ведь есть же решение без использования JQuery? Вроде как, можно сразу получить не текст, а DOM дерево, XHR2 что-то такое умеет... Верно?

[Владислав Поляков]

Александр Попов: Если найдете рабочий пример , то почему бы и не написать сюда . Честно , я не знаю про XHR2

[Александр Попов]

Владислав Поляков: нашёл :)
Вот, набросал код: https://jsfiddle.net/b1k50r43/

[Александр Попов]

Владислав Поляков: или как альтернативный и громоздкий вариант, но не требующий поддержки querySelector и XHR2 (для совсем старых браузеров) - получить обычный responseText, а потом использовать это: https://developer.mozilla.org/en-US/docs/Web/API/D... В современных Firefox и Chrome работает "из коробки", для некоторых других браузеров там предложен полифил в конце статьи.

[Владислав Поляков]

Александр Попов: Красиво , но в данном примере , идет отправка на тот же домен , с которого и отправлялся запрос , а это не для расширений.

[Александр Попов]

Владислав Поляков: Так для расширений нет ограничений по домену. Главное, прописать необходимые домены в манифесте :)

[Владислав Поляков]

Александр Попов: Но в добавок нужно отправлять заголовки по XMLHttpRequest . Иначе сайт просто заблокирует , если на нем стоит защита .

[thekot24]

Владислав Поляков: Уважаемый, можете подсказать? На странице есть элемент с id="post1" пытаюсь через JQuery добавить к нему "(value)": $("#post"+id).append'(value)'); , но не выходит. (Всё это делаю в расширении, доступа к коду сайта нет)
На странице может быть несколько таких элементов... т. е.: id="post1", id="post2"... Как добавить к каждому "value"? Заранее благодарен.

[Владислав Поляков]

value - это что ? Тег , текст , новый id , класс , элемент ?

[thekot24]

Владислав Поляков: текст.

[Владислав Поляков]

thekot24: $("#post"+id).text(value);

[thekot24]

Владислав Поляков: если бы так работало -- сюда бы не писал. :)

[Владислав Поляков]

jsbin.com/buruqoyavu/edit?html,js,output

[thekot24]

Владислав Поляков: Вы указали конкретный идентификатор (var id = 1;), а у меня этих ID'ов может быть до миллиона, а то и больше.

[Владислав Поляков]

Используйте .each() . Я за вас код писать не буду.

[thekot24]

Владислав Поляков: спасибо.