我可以在不属于我的网站上添加事件监听器吗？

Question

I would like to know about all changes in some DOM element on one site that is not mine so I could receive browser notifications about DOM element changes. How could I do this if I can't write a code on the site? I want to use this approach:

 // select the target node var target = document.getElementById('some-id'); // create an observer instance var observer = new MutationObserver(function(mutations) { 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); // later, you can stop observing observer.disconnect(); 

 <div id="some-id"></div> 

Thank you!

Answer 1

You can always add client side code to any website. That is the main behaviour of browser extensions for example.

But you can also just take your code and paste it to your browser's console (Chrome: Ctrl + Shift + J or F12 )

In this example we will obeserve the <div id="question-header"> of this SO page.

// 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 execute this to test if it is working:

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

Answer 2

You can achieve that with something like this :

$(function(){
    var keep = '';
    var ajaxurl = "http://foo.bar";

    setInterval(function(){
        $.get( ajaxurl, { sample_data : 'test' }, function(response){

            var log = "<p>Checked</p>";

            if( keep != '' && keep !== response )
                log = "<p>Something has changed</p>";

                $('.log-container').append( log );

        });

    }, 2000);
});

but you can do a more advanced thing with pusherJS https://github.com/pusher/pusher-js