Nghe để tạo thành phần và kích hoạt sự kiện khi xuất hiện trên trang trong Tiện ích mở rộng của Chrome

Question

Có thể tiện ích mở rộng của Chrome lắng nghe sự xuất hiện của yếu tố chưa được tạo không?

Giả sử người dùng nhấp vào nút và sự kiện nhấp tạo thành phần <div id='myDiv'>My Div</div> và thêm nó vào trang/DOM. Có thể đặt người nghe sẽ tự động kích hoạt sự kiện khi phần tử đó xuất hiện không?

Hoặc tôi có phải nghỉ mát để bỏ phiếu cho trang và kiểm tra phần tử này cứ sau mỗi mili giây không?

jQuery và các thư viện khác không phải là một tùy chọn cho tôi btw.

Answer 1

DOM4 MutationObserver mới có thể thực hiện việc này. Tôi chưa cho rằng nó được hỗ trợ rộng rãi, nhưng may mắn cho bạn, nó được hỗ trợ trong Chrome, dưới dạng WebKitMutationObserver.

Modified từ trang hướng dẫn liên quan, đây lắng nghe cho các đột biến ở khắp mọi nơi trên trang:

var observer = new WebKitMutationObserver(function(mutations) { 
    mutations.forEach(function(mutation) { 
     for (var i = 0; i < mutation.addedNodes.length; i++) { 
      if(mutation.addedNodes[i].id == "myDiv") { 
       // target node added, respond now... 
      } 
     } 
    }); 
}); 
observer.observe(document, { subtree: true }); 

Nếu bạn có thể thu hẹp nghe của bạn trong observer.observe đến một yếu tố cụ thể hơn document, mà sẽ cung cấp cho bạn một số đạt được hiệu suất .

Answer 2

Bạn có thể sử dụng arrive.js, nó bao bọc api Mutation Observers. Cách sử dụng:

document.arrive(".test-elem", function() { 
    // 'this' refers to the newly created element 
    var newElem = this; 
});