I’m writing a Chrome extension that needs to maintain a list of <object> and <embed> tags in a webpage. This means that it needs to create the list on page load and to update the list when the HTML is changed dynamically (via AJAX or otherwise). What is the most efficient way of doing this?
Here are some techniques I’ve explored:
-
Livequery offers a method that will run code whenever something matching a selector is created or destroyed. Unfortunately, my understanding is that this only works when the page is changed using jQuery. (Also, livequery is old.) I require a solution that will work for the entire web, so this won’t work. Is there a method available that will do this for dynamic changes not made using jQuery?
-
Create the same jQuery selector but create a timer on each page that runs at a frequent interval to update the page. Concerned about this being inefficient, especially if a large number of tabs are open.
-
Create a jQuery selector on page load to get the initial list. Rerun this code whenever having an up-to-date list is relevant (i.e. UI is shown or an action affecting all tabs is run.) This is less than ideal since for some of my planned functionality, I’d like to always have an up-to-date list.
Thanks.
Sounds like you know what to do on page load to get ya lists, after that you might want to look at DOM mutation events, here’s some links to get you started…
http://www.howtocreate.co.uk/tutorials/javascript/domevents
http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-eventgroupings-mutationevents
http://developer.mozilla.org/en/DOM/DOM_event_reference