如何在DOM更改时刷新chrome扩展的内容脚本

时间:2017-03-08 01:23:26

标签: javascript google-chrome

我很难从content_script为chrome扩展重新运行一些简单的JS。这基本上就是我设置的内容。以下代码有效,但只有一次:

的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中)。谢谢你的帮助!

1 个答案:

答案 0 :(得分:0)

您需要查找MutationObserver并在subtree文档正文中观察,如下所示:

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

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