🔖

Qiitaの「いいね」を「ハラショー！」に変える

2020/09/22に公開

CSS

Chrome Extension

Qiita

tech

Qiitaの「いいね」を「すごーい！」に変えるを見て，これはいい！と思い流用しようとしたものの，残念ながら参考元のソースが古いのか，manifest.jsonのcontent_scripts.matchesのURLが古かったりそもそもセレクタが無かったりしたので，なんやかんやでアイデアだけ拝借，今のQiitaに合わせました．
~~とは言ってもCSS使える人じゃないので，一部できずに挫折してます~~
というわけで本題！

ハラショー！(エリチ派)

Qiitaの「いいね！」を「ハラショー！」に変えるChrome拡張を作りました．
自分が投稿した記事は↓

他ユーザーが投稿した記事は↓

コメント部分も変えてます．

ソースは↓

harasyo.css

div.it-Footer_actions > div.it-Footer_like > div > button > span {
    font-size: 0px;
}

div.it-Footer_actions > div.it-Footer_like > div > button > span::after {
    font-size: 1.6rem;
    content: "ハラショー！";
}

div.commentHeader > div.commentHeader_metadata.pull-right > div.LikeButton.LikeButton--small > button > span:nth-child(2) {
    font-size: 0px;
}

div.commentHeader > div.commentHeader_metadata.pull-right > div.LikeButton.LikeButton--small > button > span:nth-child(2)::after {
    font-size: 11px;
    content: "ハラショー！";
}

div.it-Footer_actions > div.it-Footer_like > div > span.LikeLabel__text {
    font-size: 0px;
}

div.it-Footer_actions > div.it-Footer_like > div > span.LikeLabel__text::after {
    font-size: 16px;
    content: "ハラショー！";
}

manifest.json

{
    "manifest_version": 2,
    "name": "Qiitaハラショー！",
    "description": "Qiitaのいいねをハラショー！に変えます。ハラショー！",
    "version": "1.0",
    "content_scripts": [
        {
            "matches": ["https://qiita.com/*"],
            "css": ["harasyo.css"]
        }
    ]
}

使い方

harasyo.cssとmanifest.jsonのファイルを保存したディレクトリを用意します
ChromeのURIにchrome://extensions/と入力して，拡張機能を開きます
右上にあるディベロッパーモードをオンにします
1.で保存したディレクトリをドラッグ&ドロップ
ハラショー！

やりこみ要素

CSSにあるdivとか多分消せると思いますが，そこまでの熱意がないのでやめました(~~Chromeの開発者ツールを使ってセレクタ抽出するという手抜き工事しました~~)
マイルストーンにあるやつと自分がコメントしたいいね！ですが，数字といいねが同一タグ内にあるので，harasyo.cssの内容(元のフォントサイズを0にしてその後に文字を追加するやり方)をそのまま使ったら数字ごと消えて駄目でした
この拡張機能を追加すると，右上の拡張子ボタンQのアイコンが追加されたので，そこで表示する内容を設定できたらと思いましたが，そこまでの熱意がないのでやめました(再燃したらするかもしれない)

ハラショー！(エリチ派)

使い方

やりこみ要素

Discussion