Yahooきっずダークモードをつくる - コミュ障だから明日が僕らをよんだって返事もろくにしなかった

諸君、私はYahooきっずが好きだ

やーやー全国のきっずのみんな、僕です。今日はかねてより僕が欲しいなと思っていたYahoo!きっずのダークモードを作っていこうと思う。なぜほしいなと思ったかといえば僕がYahoo!きっずヘビーユーザーだからさ。

ということで本日はChorome拡張作っていきます。ベースの書き方は以下記事の通りから雑に作っていきます。
inujini.hatenablog.com

まずは何はともあれmanifestファイルを作りました。

{
    "name": "Yahoo!きっず ダークモード",
    "description": "Yahoo!きっず用ダークモード設定",
    "manifest_version": 2,
    "version": "1.0.0.0",
    "icons": {
        "128": "yahoodark.png"
    },    
    "content_scripts": [{
      "css": ["darkstyle.css"],
      "matches": ["https://kids.yahoo.co.jp/*"]
    }],
    "browser_action": {
      "default_icon": "yahoodark.png",
      "default_title": "ダークヤフー！"
    }
}

今回はスタイルだけいじればできるはずなのでJavaScriptいじりはなしです。アイコンなどは各自ご用意お願いします。

body{
    background: #010001 !important;
    color: #ECECEC !important;
}

h1,h2,h3,h4,h5,h6,p{
    color: #ECECEC !important; 
}

#main{
    background: #010001 !important;
}

.Event__ttl,
.Event__subTxt,
.Today__txt,
.StudySummary__title,
.Search__title,
.txt,
#date,
#mainInner{
    color: #333 !important;
}

.Header{
    background: #010001 !important;
}

.GlobalNav__items span{
    color: #ECECEC !important; 
}

.GlobalNav__menus span{
    color: #ECECEC !important; 
}

#wrapper, 
.Header__uhd,
#commonFooter,
#guide,
#cmnInfo,
.mdPeriod,
#footer{
    background: #010001 !important; 
}

#Irn_nav,
.cont,
.text,
.GradeBody,
.guideLead__txt,
.ListNav,
.Keyword{
    background: #3B3B3B !important;
}

.cont a{
    color: #ECECEC !important;
}

.cont dl{
    background: #3B3B3B !important;
}
.cont dt{
    color: #ECECEC !important;
}

#footerArea{
    background: #0A0A0A !important; 
}

/* よみがなを読み上げる */
#yomiganaOn{
    display: none;
}

ノリだけで作ったら地獄みたいなCSSができてしまった。君たちはこの地獄のようなCSSを修正してもいいし、しなくてもいい……。シングルページのサイトばっかりつくってきたつけが回ってきたって感じですね。構成が全然わからん。まあ、動くのでいったんこれで……。ちなみに、よみがな部分を消しているのは僕の趣味です*1。

そんで実行するとこんなんなります。