Как отследить события на чужом сайте с помощью javascript?

Уважаемые программисты javascript! Меня мучает один вопрос - как отследить события на чужом сайте с помощью javascript? Буду благодарен, если поможете с ответом. Вводные данные: есть чужой (то есть я не могу писать код на нем) одностраничный сайт с динамическим контентом. Вопрос: можно ли, и если да, то каким образом, отследить изменение контента на этом сайте с помощью javascript? Например, есть div'ы, в которых динамически появляется интересующая меня информация, и если в div'е обнаруживается мною заданное ключевое слово, то мне на рабочем столе выводится уведомление. Сам функционал по выводу сообщения и обнаружению ключевого слова я сделаю. Мне лишь непонятно, как организовать отлов изменения контента на сайте. Ведь я не могу писать код на сайте.

Ответ

Всегда можно добавить клинетский код на страницу сайта при помощи расширения для браузера, но также можно просто вписать код в консоль браузера. (Chrome: Ctrl+Shift+J or F12)
В этом примере мы будем следить за изменениями в

прямо на этой странице. Для этого скопируем этот код в консоль браузера.
// select the target node var target = document.getElementById('question-header');
// create an observer instance var observer = new MutationObserver(function(mutations) { Notification.requestPermission(function (permission) { if (permission === "granted") { var notification = new Notification("Something has changed!"); } }); mutations.forEach(function(mutation) { console.log(mutation.type); }); });
// configuration of the observer: var config = { attributes: true, childList: true, characterData: true };
// pass in the target node, as well as the observer options observer.observe(target, config);
Затем, чтобы проверить, что всё работает давайте добавим элемент, прописав этот код опять же в консоль браузера.
var node = document.createElement("b"); var textnode = document.createTextNode("Hello new item"); node.appendChild(textnode); document.getElementById("question-header").appendChild(node);