How to replace twitter stream avatar's with their bigger version?

Question

I'm trying to create a browser extension that automatically replaces the twitter avatars in the stream from their _normal version eg _normal to their _bigger version (replace the _normal.jpg string with _bigger.jpg)

The following code has no problem doing this replacement when performed externally in a jsfiddle jsfiddle to test.

$("img.avatar").replaceWith(function () {
  if ($(this).attr("src")) {
      return $(this).attr("src", $(this).attr("src").replace("_normal", "_bigger"));
  } else {
      return $(this);
  }
});

But when I try to use the same code in the console on the twitter page all the avatar images just disappear. Why is this?

Answer 1

I have not found yet why this is working on jsFiddle but not in twitter but this is working on twitter :

$("img.avatar[src]").each(function() {
    var img = $(this);
    img.attr('src', img.attr('src').replace("_normal", "_bigger"));
});

Thus you don't remove the img element but just replace its src attribute value with the new one.

Also note that instead of testing the src attribute value in the replaceWith function you can use the [attributeName] selector to get only img.avatar with src attribute defined.

I will try to investigate a little more on why your method is not working on twitter