Repeatedly save new DOM content into the same text file

Question

What I'm trying to do is rather simple, but I haven't found any streamlined way to do it.

So far what I want is to listen to a part of the content of a webpage and, whenever it changes, save the new content of it into a text file (and overwrite if it already exists). I need that .txt file so it can be accessed in another program whenever it is changed.

I was doing it with a chrome extension until I realized it doesn't allow us to save to the filesystem and the only other way to do it I found was to cross-message it to an chrome app and then save there. It does sounds like a lot of hassle to make an app to read the message, pack it and then get the ID for the extension messaging.

So my question is, how can I automatically save the data from the DOM into a file every time it changes? Or save a message I send through an extension without having to also make an app for it?

Keep in mind it's something for personal use, I don't really care for running it in debug-mode/permissions/etc.

Answer 1

A MutationObserver is probably what you're looking for, coupled with event.target.innerHTML or some permutation.

https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

For the saving of data, I'd recommend checking this Q&A out: Chrome extension: How to save a file on disk

Answer 2

You could use a Mutation Observer and offer a download in the event handler.

function download(filename, text) {
  var element = document.createElement('a');
  element.setAttribute('href', 'data:text/plain;charset=utf-8,' + encodeURIComponent(text));
  element.setAttribute('download', filename);

  element.style.display = 'none';
  document.body.appendChild(element);

  element.click();

  document.body.removeChild(element);
}

// select the target node
var target = document.querySelector('#some-id');

// create an observer instance
var observer = new MutationObserver(function(mutations) {
  mutations.forEach(function(mutation) {
    download('changed.txt', mutation.target.textContent);
    // TODO might need some conversion here ^^
  });    
});

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