How to rewrite twitter images dynamically by jQuery?

Question

I'm a begginner of Javascript and jQuery, and trying to remove all icons in twitter timeline.

What I want to do is, to remove all icons in twitter-timeline dynamically(I mean, each time when the "See new tweets" button is pushed) and also, re-write each icon by randomly-chosen color.

So, what I'm going to do is like this. https://photos.google.com/share/AF1QipNU-ct8h6oA1_-QNgA4rLNrBpmdbULS-THe3Zt6FONNkxhMwI4rrBT-x0weyRq7YA?key=dDhHaENQNzkzLVYwYm5zUWczTF9XVl9RdFpGYUVB

Here is my codes.

// If class containts 'avatar', just rewrite.

// rewrite for each tag https://symfoware.blog.fc2.com/blog-entry-1515.html

$(function(){
    $("img").each(function(){

      // https://stackoverflow.com/questions/3196613/jquery-determine-if-ul-has-class-or-another-one

        if ($('img').hasClass('Avatar Avatar--size32') ||
           $('img').hasClass('avatar size32') ||
           $('img').hasClass('DashboardProfileCard-avatarImage js-action-profile-avatar') ||
           $('img').hasClass('avatar js-action-profile-avatar ') ||
           $('img').hasClass('top-timeline-tweet-box-user-image avatar size32') ||
           $('img').hasClass('avatar js-action-profile-avatar ') ||
           $('img').hasClass('avatar js-action-profile-avatar') ||
           $('img').hasClass('MomentUserByline-avatar') ||
           $('img').hasClass('ProfileAvatar-image') ||
           $('img').hasClass('ProfileCardMini-avatarImage')
        ) {
          // https://peacepopo.net/blog-entry-161.html
          var hue = 'rgb(' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ',' + (Math.floor(Math.random() * 256)) + ')';
          // Rewrite image to random colors
          // http://shanabrian.com/web/jquery/image01.php

          var stylechar = "background-color:" + hue
           $("img").removeAttr('src');
           $("img").attr('style',stylechar);
      }
    });
});

Some icons is removed, but there are lots of problems. The problems are,

• only top of 2 or few icons in timeline are removed.
• Not dynamically working. When "new tweets" button is pushed, icons appear as itself.
• icon-backgroundcolor isn't still changed.

If you could know how this can be fixed, I would be very grateful. Thanks.

Answer 1

You did not say what your code is set to execute at (you should set it to document idle in your manifest). This could help some, but you will need some kind of event for the dynamically changing content of twitter. Put your code in a function then you can listen to clicks on the "See new tweets" button or setup a Mutation Observer to execute your function again when the page changes.