Currently, I am delving into the world of Chrome Extension development and am faced with a roadblock in replacing elements on a live chat page. While most of my tasks are running smoothly, the one thing causing issues is the setInterval option that triggers the function every 3 seconds.
The need for setInterval arises from the fact that each time a new chat message appears on the console, it generates a
<td class=".profile-image">New Message</td>However, upon loading the page with all previous messages, there is a delay of 2 seconds before all messages appear, during which the class=".profile-image" element is not present. In order to tackle this issue, I added a setTimeout function to wait for 3 seconds before executing the desired action. The catch here is that this action only occurs once, necessitating a repeat of the process for every new chat message. My attempt to address this involved implementing a setInterval to continuously run the function, but this resulted in significant lag on the entire page.
My ultimate goal is to have the function automatically detect the presence of a new message and add the necessary class without causing any performance hitches.
Thank you for any assistance provided!
var dostuff = function() {
setTimeout(function() {
jQuery(".profile-image img").each(function() {
this.src = this.src.replace('small.jpg', 'large.jpg');
this.src = this.src.replace('small.png', 'large.png');
$(".profile-image img").attr("height", "64");
$(".profile-image img").attr("width", "64");
$(".profile-image img").attr("class", "pro_img");
});
}, 2000);
};
setInterval(dostuff, 3000);