🔖

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

3 min read

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

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

Qiitaの「いいね!」を「ハラショー!」に変えるChrome拡張を作りました.
自分が投稿した記事は↓
image.png
他ユーザーが投稿した記事は↓
image.png

コメント部分も変えてます.
image.png

ソースは↓

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"]
        }
    ]
}

使い方

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

やりこみ要素

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

Discussion

ログインするとコメントできます