0

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?

jordn
  • 25
  • 4

1 Answers1

0

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

rd3n
  • 4,440
  • 1
  • 33
  • 45
  • I'm unable to give you much in the way of upvotes as I am still a lowly new account but instead have my sincere thanks. That works better than my code. If you could figure out why there is this particular peculiarity when working with the Twitter DOM directly that would be even better. – jordn Oct 12 '13 at 23:54