Twitterの丸くなったアイコンを元に戻すUserScript（＆Chrome拡張機能）

12423 ワード
Twitter chrome-extension CSS JavaScript Chrome CSS テキストリンク

追記 (16:40)

右上の自分のアイコンが丸になっていると報告を受けたので修正しました。

追記 (10:48)

Chrome拡張機能のほうが便利という声があったので、拡張機能として公開しました。インストールは以下のリンクから。

Twitter Icon Come Back - Chrome ウェブストア

ただし、Chrome拡張機能ではrun-atをdocument-bodyにできないので、document-endに変更しています。この関係で、UserScript版より若干反映が遅れます。UserScriptの導入に抵抗がない方は、以下のUserScript版をおすすめします。

リポジトリはここです。UserScript版もここに置きました。
foooomio/twitter-icon-come-back: Google Chrome extension for reverting the old-style icons for Twitter Web and Tweetdeck

追記 (02:48)

※ run-atの指定についてはdocument-startが最速ですが、bodyを変更するこのスクリプトにおいて、document-bodyが最速という意味です。

これでだいぶ安定して動くはず。上記問題は解決済み。しれっとタイトル変えました。ライセンス明記してなかったので書きました。MIT Licenseでお願いします。

(追記) 最新版は随時ここにアップしてます。
twitter-icon-come-back/userscript.js at master · foooomio/twitter-icon-come-back

// ==UserScript==
// @name         Twitter Icon Come Back
// @namespace    https://foooomio.net
// @match        https://twitter.com/*
// @author       foooomio
// @run-at       document-body
// @grant        none
// @license      MIT License
// ==/UserScript==

(function() {
    document.body.className = document.body.className.replace('edge-design');
    new MutationObserver(function(mutations) {
        if (!mutations.some(function(mutation) {
            return mutation.oldValue.indexOf('edge-design') !== -1;
        })) return;
        document.body.className = document.body.className.replace('edge-design');
    }).observe(
        document.body,
        { attributes: true, attributeOldValue: true, attributeFilter: ['class'] }
    );
})();

無限ループしたらごめんなさい(>_<)
ちなみにアロー関数使ってないのは、TampermonkeyのLinterが認識してくれなくてな・・・

追記 (02:13)

// ==UserScript==
// @name         Twitter Icon Come Back
// @namespace    https://twitter.com
// @match        https://twitter.com/*
// @grant        none
// ==/UserScript==

(function() {
    document.body.className = document.body.className.replace('edge-design');
})();

追記 (02:07)

これが一番早くて確実。GreaseMonkeyやTamperMonkeyに以下のjsを打ち込みましょう。（@ArcCosine@githubさん、ありがとうございます！！）

// ==UserScript==
// @name         Twitter Icon Come Back
// @namespace    https://twitter.com
// @match        https://twitter.com/*
// @grant        none
// ==/UserScript==

(function() {
    document.body.className = document.body.className.replace(/edge-design/);
})();

本文

取り急ぎ。

.edge-design .Avatar,
.edge-design .DashboardProfileCard-avatarImage,
.edge-design .DashboardProfileCard-avatarLink,
.edge-design .Gallery.is-tweetless .Gallery-content,
.edge-design .Gallery.is-tweetless .Gallery-media,
.edge-design .MomentCapsuleCover .MomentUserByline-avatar,
.edge-design .MomentCapsuleItemTweet--withText .MomentUserByline-avatar,
.edge-design .MomentCapsuleSummary .MomentUserByline-avatar,
.edge-design .MomentMakerRecommendedTweetsSearch--users .MomentMakerRecommendedTweetsSearch-userContainer .avatar,
.edge-design .ProfileAvatar,
.edge-design .ProfileAvatar-image,
.edge-design .ProfileAvatar-placeholderImage,
.edge-design .ProfileAvatarEditing,
.edge-design .ProfileAvatarEditing-button,
.edge-design .ProfileAvatarEditing-overlay,
.edge-design .ProfileCard-avatarImage,
.edge-design .ProfileCard-avatarLink,
.edge-design .ProfileCardMini-avatarImage,
.edge-design .ProfileListItem-avatar,
.edge-design .ProfileUserList .Avatar {
    border-radius: 7px;
}

.edge-design .avatar {
    border-radius: 7px;
}

StylishとかStylebotとかの拡張機能を使うと良いです。漏れがあったら編集リクエストください。

Python学習ノート(八)——Python異常処理
Python SSH接続