How to wait until an element exists?

by

DOMNodeInserted is being deprecated, along with the other DOM mutation events, because of performance issues – the recommended approach is to use a MutationObserver to watch the DOM. It’s only supported in newer browsers though, so you should fall back onto DOMNodeInserted when MutationObserver isn’t available.

let observer = new MutationObserver((mutations) => {
  mutations.forEach((mutation) => {
    if (!mutation.addedNodes) return

    for (let i = 0; i < mutation.addedNodes.length; i++) {
      // do things to your newly added nodes here
      let node = mutation.addedNodes[i]
    }
  })
})

observer.observe(document.body, {
    childList: true
  , subtree: true
  , attributes: false
  , characterData: false
})

// stop watching using:
observer.disconnect()

More Related Contents:

  1. How to use jQuery in chrome extension?
  2. Chrome Extension how to send data from content script to popup.html
  3. Can’t trigger click with jQuery in a Chrome extension
  4. In a Chrome Extension content script, must I wait for document.ready before processing the document?
  5. Chrome Extension “Refused to load the script because it violates the following Content Security Policy directive”
  6. tabs.executeScript – passing parameters and using libraries?
  7. How to simulate key presses or a click with JavaScript?
  8. Executing code at page-level from Background.js and returning the value
  9. How can a Chrome extension save many files to a user-specified directory?
  10. How can I remove the “No file chosen” tooltip from a file input in Chrome?
  11. Setting onbeforeunload on body element in Chrome and IE using jQuery
  12. Checkbox Check Event Listener
  13. How can I retain the scroll position of a scrollable area when pressing back button?
  14. How do I send an HTTP GET request from a Chrome extension?
  15. Completely lost on how to save extension popup window content
  16. How to disable Chrome’s saved password prompt setting through JavaScript
  17. Is there a way to uniquely identify an iframe that the content script runs in for my Chrome extension?
  18. Google Chrome Extensions: How to include jQuery in programmatically injected content script?
  19. Modify HTML of loaded pages using chrome extensions
  20. How do I send an HTTP request from a Chrome extension?
  21. Sending message to background script
  22. Get cursor or text position in pixels for input element
  23. Javascript: Let user select an HTML element like Firebug?
  24. Print repeating Page headers in Chrome [closed]
  25. How to clear chrome.storage.local and chrome.storage.sync?
  26. How to fix chrome-extension inline JavaScript invocation error?
  27. Can a website block a Chrome Extension? [duplicate]
  28. Chrome extension identity.email empty
  29. Can’t pass arguments to chrome.declarativeContent.SetIcon
  30. Chrome Extension get selected text

Leave a Comment