如何刷新Chrome扩展的内容脚本，如DOM更改

问题描述：

我很难从content_script为Chrome扩展重新运行一些简单的JS。这基本上是我设置的。下面的代码工作，但只有一次：如何刷新Chrome扩展的内容脚本，如DOM更改

manifest.json的

{ 
    "content_scripts": [ { 
    "matches": ["https://www.amazon.com/*"], 
    "js": ["./content_scraper.js", "./main.js"], 
    "run_at": "document_end" 
    } ], 
    "permissions": ["tabs","webNavigation"] 
}

content_scraper.js

function dataUpdater() { 
    // this function scrapes the page and updates the data var 
} 

chrome.runtime.onMessage.addListener(
    function(message, sender, sendResponse) { 
    switch(message.type) { 
     case "getItems": 
     sendResponse(data) 
     break; 
    } 
    } 
);

main.js

function getItemsData() { 
    chrome.tabs.query({active: true, currentWindow: true}, function(tabs) { 
    chrome.tabs.sendMessage(tabs[0].id, {type: "getItems"}, function(resp) { 
     resp.map(item => { 
     // do some things 
     } 
    }) 
    }) 
} 

document.addEventListener("DOMContentLoaded", getItemsData)

因此，上面的代码在加载DOMContent后工作。我已经尝试了DOMNodeInserted事件，并且阅读document.readyState以再次触发脚本，但似乎无法从content_scripts访问dataUpdater函数。

我只是试图在DOM更新时运行content_scraper.js（它位于content_scripts中）。谢谢你的帮助！

答

你需要寻找MutationObserver并观察对文档正文subtree，像这样：

const observer = new MutationObserver(function(mutations) { 
... 
}); 
observer.observe(document.body, { subtree: true });

见参考：https://developer.mozilla.org/cs/docs/Web/API/MutationObserver

如何刷新Chrome扩展的内容脚本，如DOM更改

相关推荐