Qiita記事のコードスタイル部分を以前のやつに戻すChrome Extension作った

created at:

経緯

Qiitaがサイトリニューアルされて、記事内のコード部分の色がガラッと変わり、個人的に見づらかったのでなんとか変えたかった。

メインブラウザがChromeなのでExtensionで自動的に変わるみたいなのがあったらいいなと思って作った。突発的に作って、個人的に使う程度のものなのでストアには登録してません。

内容

やってることは至極簡単で、読み込まれたら</head>の直前にオーバーライドされたCSSを読み込むようにしているだけ。

document.head.insertAdjacentHTML('beforeend',
    '<link rel="stylesheet" type="text/css" href="' + chrome.runtime.getURL("style.css") + '">'
);

manifest.jsonで以下の設定するのがミソっぽいです

{
  "web_accessible_resources": [
    "style.css"
  ]
}

デモ

https://gyazo.com/923e0fd8f4151121597121378f848b9d

ラグありますが、読み込み完了したら反映みたいな感じです。

Github

https://github.com/yamanoku/Qiita_Code-Style_Before ここからクローンなりダウンロードでディレクトリ落としてもらってデベロッパーモードで追加してください。いらんかったら削除ください。

自分がよく見る分は補完してますがこの言語のここが対応していないなどあったらIssueかプルリクでもおなしゃす。

参考

アーカイブ一覧へ戻る

アーカイブ記事のため、内容に関する更新依頼は受け付けておりませんが、誤字や脱字などありましたらご連絡ください。

この記事に関する修正依頼
トップページに戻る