chrome拡張機能に触れてみる

拡張機能の種類

種類は以下の3つ

1. Browser actions
2. Page actions
3. Override Pages

Browser actions

ブラウザのツールバーにアイコンを表示させるタイプ

Page actions

アドレスバーの中にアイコンが表示されるタイプ

Override Pages

chrome内部のページを代替えするタイプ

必要なファイルを揃えていく

manifest.json

必ず必要なファイル
以下の記事で詳しく触れている。
参考：Chrome 拡張機能のマニフェストファイルの書き方

軽く備忘録を書いておく

manifest_version

ここは何も考えずに2とすればいい

name

拡張機能の名前

version

拡張機能のバージョン。拡張機能の自動更新機能でバージョンがチェックされ、バージョンが上がっていないと更新できないため、しっかりと書いておく。

browser_action

manigest.json

"browser_action": {
    "default_icon": {
        "19": "icon19.png"
    },
    "default_title": "Ext title",
    "default_popup": "popup.html"
},

出典：Chrome 拡張機能のマニフェストファイルの書き方

default_popup

browser_actionの子要素でアドレスバーに表示されるアイコンをクリックしたときに表示されるポップアップの中のhtml。つまり個々に書いたhtmlがポップアップ時に表示される。

content_scripts

開いているwebページに影響するscript
ここに設定することでページの背景を変えたりできる。開いているページに影響とはそういうこと。

background

content_scriptsやdefault_popupとの連携

個々のファイルの連携

連携はchrome.*APIで行われる

作りたいもの

youtubeの画面を明るくしたい

けそポテトというyouuberのジェイソンの動画をよく見ている。非常に面白く、特に作業しているときに流して、ラジオのように聞いている。
その動画はゲーム画面が暗いということもあって見にくい。いつもディベロッパーツールでcssのfilterをいじり、brightnessで画面を明るくしているが、いちいちその作業を経由するのも面倒だから、拡張機能で楽に画面を明るくできるようにしたい。

今回はcssをいじるのでcontent_scriptsが使えそう

もう少し情報を集めてみて作っていく。

参考

Chromeブラウザの拡張機能を作ってみたい初心者向けに開発方法を紹介！【サンプルあり】

Chromeのオリジナル拡張機能を開発しよう（ソースコードあり）