QiitaをクリスマスカラーにするFirefox拡張機能

概要

これは初心者のブラウザ拡張機能 Advent Calendar 2024の5日目の記事です。

クリスマスシーズンということでQiitaの画面をクリスマスカラーにしてみようと思います。

クラスマスカラー拡張機能

デザイン紹介

こんな感じになります。

記事本文では雪が降るようにしてみました。

main.js

基本的に各要素を地道に取得して変えているだけです。

main.js

const header = document.querySelector(".style-1cnt4b8");
const headerInput = document.querySelector("header input");
const body = document.querySelector("html body");
const trendCards = document.querySelectorAll(".style-1uma8mh"); 
const timelineCards = document.querySelectorAll(".style-1w7apwp");
const questionCards = document.querySelectorAll(".style-12rpvzx");
const tags = document.querySelectorAll("a.style-mp1hhj"); 

const main = document.querySelector("html main");
const article = document.querySelector("html main article.style-itrjxe");
const buttonGood = document.querySelector("svg.style-ftns26 circle"); 
const buttonStock = document.querySelector("main button.style-1xwfn2v"); 

const snowMain = document.querySelector("html main");

const MAIN_COLOR = "#D81D00";
const SUB_COLOR_GREEN = "#00635D";
const SUB_COLOR_BROWN = "#5B2333";


header.style.backgroundColor = SUB_COLOR_GREEN;
headerInput.style.backgroundColor = MAIN_COLOR;
headerInput.style.color = "white";

body.style.backgroundColor = MAIN_COLOR;

trendCards.forEach(card => {
    card.style.backgroundColor = SUB_COLOR_GREEN;
});

timelineCards.forEach(card => {
    card.style.backgroundColor = SUB_COLOR_GREEN;
});

questionCards.forEach(card => {
    card.style.backgroundColor = SUB_COLOR_GREEN;
});

tags.forEach(tag => {
    tag.style.backgroundColor = MAIN_COLOR;
    tag.style.color = "white";
});

main.style.backgroundColor = MAIN_COLOR;
article.style.backgroundColor = SUB_COLOR_BROWN;

if (buttonGood !== null) {
    buttonGood.style.fill = SUB_COLOR_GREEN;
}
buttonStock.style.backgroundColor = SUB_COLOR_GREEN;


function createSnowflake() {
    const snowflake = document.createElement('div');
    snowflake.classList.add('snowflake');
    snowflake.style.left = Math.random() * 100 + 'vw';
    snowflake.style.animationDuration = (Math.random() * 3 + 2) + 's';
    snowMain.appendChild(snowflake);
    
    setTimeout(() => {
        snowflake.remove();
    }, 5000);
}

setInterval(createSnowflake, 200);

snow.css

雪用のCSSです。

snow.css

.snowflake {
    position: fixed;
    width: 10px;
    height: 10px;
    background: white;
    border-radius: 50%;
    pointer-events: none;
    z-index: 9999;
    animation: fall linear infinite;
}

@keyframes fall {
    to {
        transform: translateY(100vh);
    }
}

manifest.json

manifest.json

{
    "browser_specific_settings": {
        "gecko": {
          "id": "[e-mail]"
        }
    },
    "manifest_version": 3,
    "name": "xmas-qiita-extention",
    "version": "0.1",
  
    "description": "Qiitaをクリスマスカラーにする拡張機能",
  
    "icons": {
      "48": "icons/icon-48.png"
    },
  
    "content_scripts": [
      {
        "matches": ["*://qiita.com/*"],
        "js": ["main.js"],
        "css": ["snow.css"]
      }
    ]
}

デプロイ方法

ほかのアドベントカレンダー記事で公開しているので、よろしければ参考にしてください。

Firefox拡張機能を開発者センターに限定公開する手順