2

Scenario: An element needs to be inserted into a page's <div class="insertHere"> element. The insertHere element is not created until later in the page's lifecycle (either a user action results in the creatation of the insertHere element, or after a certain period of time the insertHere element is created).

Currently, my code inserts an element only once the page is loaded. This results in a lack of the inserted element when the insertHere element of the page does not exist originally.

More specifically: I am writing a plugin that inserts a new button into YouTube's button toolbar found at the bottom of their video player. This new button is easily inserted when the video player is loaded right away, but if the user first starts at, for example, YouTube's homepage, and then navigates to a video, I believe some form of AJAX is used to update the page and thus my extension is not able to insert the new button into the toolbar.

David
  • 382
  • 2
  • 17
  • 1
    could you not make the extension enable on pages that would contain videos? e.g /watch?* using match patterns – user2950720 Apr 02 '16 at 07:07
  • I am sorry but this still does not solve my problem, thank you for your suggestion though! – David Apr 02 '16 at 07:20
  • 3
    I think what you looking for is [MutationObserver](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver). Have you tried playing with it to recognize changes in DOM? – Wolf War Apr 02 '16 at 08:48
  • I will give that a try. What if the DOM element does not exist when the page is accessed and is only later created? – David Apr 02 '16 at 17:33
  • 1
    @David at first thought, you test it in *window.onload/DOMContentLoaded*. If exist great, if not, listen for mutations and then test again. – Wolf War Apr 02 '16 at 17:44
  • Possible duplicate of [Is there a jQuery DOM change listener?](http://stackoverflow.com/questions/2844565/is-there-a-jquery-dom-change-listener) – Haibara Ai Apr 03 '16 at 03:23

0 Answers0