twitter_status_image.user.js

// ==UserScript==
// @name            Twitterの画像をでかく表示するやつ
// @description     画像:large付けてwidth指定
// @include         https://twitter.com/*/status/*
// @grant           GM_addStyle
// ==/UserScript==
/*
 * サイドにおすすめ画像でるときのためにCSS調整
 * min-width: 560px;
 * 
 * タイミングがズレてるのでMutation Observer使う
 */
(function() {
    'use strict';
    var minWidth = 560,
        loaded   = {},
        css = [ '.permalink-container { width: <% widthPermalink %>px !important; }',
                '#page-container { width: <% widthPage %>px !important; }',
                'img.media-full-size {',
                '     width: auto !important; height: auto !important;',
                '     max-width: 100% !important; max-height: 100% !important;',
                '}',
                '.Trends  .trend-item { white-space: normal !important; }'
              ].join(''),
        observer = new MutationObserver(function(mutations) {
            mutations.forEach(function(mutation) {
                if (mutation.type == 'childList') {
                    imgFind();
                }
           });
        });

    function imgFind() {
        var media = document.querySelectorAll('.media-thumbnail img');
        if (!media) return;

        for (var i = 0, len = media.length; i < len; i++) {
            var img = media[i];
            img.parentNode.className = img.parentNode.parentNode.className = img.style.cssText = '';
            img.src += ':large';
            img.className = 'media-full-size';
            loaded[img.src] = false;
            img.addEventListener('load', imgLoad, false);
        }
    }
    function imgLoad(event) {
        var width = this.naturalWidth,
            complete = true;

        loaded[this.src] = true;
        for (var key in loaded) {
            if (!loaded[key]) complete = false;
        }
        if (minWidth < width) minWidth = width;
        if (complete) addStyle(minWidth);
        this.removeEventListner('load', imgLoad, false);
    }
    function addStyle(width) {
        // width + padding 40px*2 + border 1px*2 + side 250px
        width += 80 + 2;
        GM_addStyle(css.replace(/<% widthPermalink %>/g, width)
                       .replace(/<% widthPage %>/g, (width + 250)));

        observe.disconnect();
    }
    observer.observe(document.body, {childList: true});

})();