Yahooサイトをピンク色にする方法【Chrome拡張作った】

こういうタイトルにでもしないと届けるべき人に届かない気がしたので検索汚染してたらすみません。

Chromeというブラウザの拡張機能からYahooサイトをピンクにすることができます。

こんな感じです。

広告をブロックしたり、サイト上のカラーコードを調べたり、Chromeに自分の必要な機能を付け足しできる機能のことを拡張(Extension)と言います。

こちらのWebストアに色々なアドオンが転がっているので気になる人はぜひ。

詳しい使い方などはこちらの記事が参考になります。

そんで、僕が作ったのがYahooのサイトをピンクにするアドオンです。

こちらからダウンロードできます。

ダウンロードしたら適用すればYahooサイトがピンクになります。

本当にただピンクになるだけです。それ以外何もありません。ありがとうございます。

この記事をざっくり読む

経緯

友達が

https://takasaki.work/wp-content/uploads/2019/10/赤頭巾ちゃんのフリーアイコン3.png
赤ズキン

Yahooのサイトの色変更なくなってんやが!?

ってプチギレしてて、

https://takasaki.work/wp-content/uploads/2019/09/syoboiblog_icon.png
緑ズキン

拡張作ったことないから面白そう!

と思って、作ってみたのですが、

https://takasaki.work/wp-content/uploads/2019/10/赤頭巾ちゃんのフリーアイコン3.png
赤ズキン

いや、そこまではせんでええわw

と一刀両断されまして。

捨てるのもなんだかなぁと思い、とりあえずここに残しておくことにしました。

超ニッチですが、使いたい人いたら使ってやってください。

実装方法

chrome://extensions/

上記リンクにアクセスし、右上にあるデベロッパーモードをオンにします。

すると、『パッケージ化されていない拡張機能を読み込む』というリンクが出てくるので、そちらから先ほどダウンロードいただいたファイルを選択すればインストール完了です〜。

機能拡張の作り方

こちらの記事がすごく参考になります。

参考 Chrome拡張の作り方 (超概要)qiita

json形式のmanifestというファイルから、必要なパス通したり、ディスクリプションを書いたりして、パス通したファイルから色々機能追加や制御できるみたいです。

cssかjsファイル最低ひとつが必須の模様。

と言うか、それらがないと何も機能が付け加えられない虚無でしかなくなるので。

ちなみに、scssとsassは使えなそうでした。

無理やりパス通して使えるようにする方法もあるようですが、大掛かりのものでなければ普通にcss書いた方が早そう。

カラーカスタマイザーとかつけたらもう少し汎用性高まりそうですが、しんどいので堪忍を。

まとめ

アドオン作れるようになると自分だけのブラウザ感あって楽しいですねおわり。

コメントを残す

メールアドレスが公開されることはありません。