I'm developing a chrome extension which injects a link on every tweet. The injection implementation idea was taken from a official Twitter plugin where I saw that the injection was handled by running setInterval() function every two seconds. I wonder about performance though. Before that, I had been dealing with MutationObserver in order to get new DOM elements, but it didn't work for me on some cases, so I gave a try on the idea above.
In my case, when the user clicks on the injected link, my plugin should request Twitter the geolocation and, if found, return it, else it would be saved (maybe using indexedDB?) so it isn't showed again. This adds an extra query on whether or not to show that injected link on every tweet.
$(document).ready(function() {
$('body').append('<div id="map"></div>');
setInterval( function() {
inyect();
}, 2000);
});
function inyect() {
$(".tweet, .js-tweet").each(function(){
var inyected = $(this).find('.mapLink').length ? true : false;
if ( ! inyected ) {
// also, check against the "geo-fails" list. if not in, do:
var id = $(this).attr('data-tweet-id');
var geoElement = $(this).find('span.ProfileTweet-geo');
geoElement
.parent()
.prepend('<a class="mapLink" tweet-id="'+ id +'" href="#">map</a>');
}
});
}
$('body').on('click', 'a.mapLink', function(e) {
e.preventDefault();
var elem = $(e.target)
var id = elem.attr('tweet-id')
// request Twitter if the tweet contains geolocation data
// and save the position in that case
// show map
// else, SAVE that tweet id into the "geo-fails" list
// show message and hide the link.
}
Knowing my context, what are your recommendations on those two aspects (performance on injecting links & storage)?