反覆將新的DOM內容保存到同一文本文件

Question

我想要做的事情很簡單，但我還沒有找到任何簡化的方法來做到這一點。

到目前爲止，我想要聽取網頁內容的一部分，並且每當它發生變化時，將其新內容保存到文本文件中（並且如果它已經存在，則覆蓋）。 我需要那個.txt文件，所以只要它被改變，它就可以在另一個程序中被訪問。

我在做一個擴展名爲chrome的擴展，直到我意識到它不允許我們保存到文件系統並且唯一的另一種方式來做到這一點，我發現它是交叉消息給一個Chrome應用程序，然後保存在那裏。聽起來像是讓應用程序閱讀郵件，打包郵件，然後獲取擴展消息的ID，聽起來很麻煩。

所以我的問題是，每當它發生變化時，如何自動將DOM中的數據保存到文件中？或者保存我通過擴展程序發送的消息，而不必爲其創建應用程序？

請記住它是個人使用的東西，我真的不在乎在debug-mode/permissions/etc中運行它。

Answer 1

MutationObserver可能是你正在尋找的，加上event.target.innerHTML或一些排列組合。

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

對於數據的保存，我建議你檢查這個問答& A掉：Chrome extension: How to save a file on disk

Answer 2

你可以在事件處理程序使用Mutation Observer和offer a download。

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