Dear javascript programmers!
I am tormented by one question - how to track events on another site using javascript?
I would be grateful if you help with the answer.
Input data: there is a stranger (that is, I cannot write code on it) a one-page website with dynamic content.
Question: Is it possible, and if so, how, to track the change of content on this site using javascript?
For example, there are divs in which information that interests me is dynamically appearing, and if a given keyword is detected by me in a div, then a notification is displayed on my desktop.
I myself will do the functional on the output of the message and the detection of the keyword. I just do not understand how to organize the capture of changes to the content on the site. After all, I can not write code on the site.

  • four
    write browser extension. install it and wait - Alexey Shimansky
  • Here is how! :) Thanks, I will try. - alwizo

3 answers 3

This code gets the content of the div on the current site:

enter image description here

I propose to wrap it in a loop, and check the contents of the html block you need, according to the schedule

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> </head> <body> <script src="https://code.jquery.com/jquery-3.0.0.min.js"></script> <div id='q'></div> <script> $('#q').load('https://crossorigin.me/http://ru.stackoverflow.com #nav-questions'); </script> </body> </html>

  • one
    This method is not suitable for dynamic sites. Because it will only load static content. - Grundy
  • @Grundy you mean that if you need to click on the button to get information, then the method will not work? - spectre_it
  • yes, this is like the easiest example - Grundy

well, if the task is purely one-time and purely for yourself - then you can "jot-inject" the js-code in the console ... if the page is updated dynamically (that is, without reloading) - you hang up the function on setInterval in the console, and wait ...

if the data is updated only by a full reboot, you can try to use the hole in IE ( https://learn.javascript.ru/same-origin-policy#%D0%B8%D1%81% D0%BA%D0%BB%D1 % 8E% D1% 87% D0% B5% D0% BD% D0% B8% D1% 8F-% D0% B2 (ie item 2), i.e. Add both sites to the trusted zone and try to access the DOM of the other from your own window (but something tells me that there are a lot of rakes waiting for us here)

    You can always add client code to the site page using the browser extension, but you can also simply enter the code in the browser console.
    (Chrome: Ctrl + Shift + J or F12 )

    In this example, we will follow the changes in <div id="question-header"> right on this page. To do this, copy this code into the browser console.

     // 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);

    Then, to check that everything works, let's add an element by writing this code again in the browser console.

     var node = document.createElement("b"); var textnode = document.createTextNode("Hello new item"); node.appendChild(textnode); document.getElementById("question-header").appendChild(node);