どうも、こんにちは。いつもSlackBotの作り方を参考にして頂き、ありがとうございます。
実は先日、自作のChrome拡張をリリースしました〜〜！🎉🎉
機能やコードの中身はともかく、Chrome拡張を作ること、そしてリリースすることは伝えられます。
というわけで今回から何回かに分けてChrome拡張の作り方を解説していきます！
Chrome拡張とは
Google Chromeというブラウザで動くアプリケーションです。
- 広告を非表示にしたい
- 特定ページのCSSを書き換えたい
- URLを書き換えたい
- 今表示されているページのスクショを保存したい
などなど、ブラウザに関連する機能であればある程度自由に制御することが出来ます。
今回作るもの
今回は特別な設定がなく、簡単に出来るTwitterのフォントを変えるChrome拡張を作ります。
作成手順
ディレクトリを1つ作ってその中に manifest.json を用意する
まず一番最初に manifest.json というファイルを作成します。
manifest.jsonとは「このアプリはこんなアプリですよ」というのをChromeに伝えるファイルになります。「必要なファイルはどこにあるのか」といった情報も含まれます。
Chrome拡張はmanifest.jsonを設定することから始まります。
manifest.jsonの書き方は公式ページより確認ができます。
ただ、オプションな項目が多いので私の方で今回のアプリを作る上で必要な最低限の項目をまとめました。
{
"manifest_version": 2,
"name": "Twitter Custom Font",
"version": "1.0.0",
"description": "Twitterのフォントを変えるChrome拡張です",
"content_scripts": [
{
"matches": ["https://twitter.com/*"],
"css": ["style.css"]
}
]
}“manifest_version”, “name”, “version” は必須項目です。
“description” はなくてもいいですが、一応付けときました。
今回重要なのは “content_scripts” です。
この記述によって
『”https://twitter.com/*” にアクセスしたら “style.css” というファイルを読み込みます』
という意味になります。
あ、最後の “*” ←アスタリスクを付けるのを忘れないでください！
必要な処理を書いていく
"css": ["style.css"]と書いたので、style.cssを同じディレクトリに作ります（manifest.jsonを編集すればディレクトリ分けも出来ます）
こんな感じ。
style.cssの中身は以下のようにしました。
* {
font-family: "Yuppy SC" !important;
}これだけ。これで全ての処理は完了です。爆速すぎワロタ。「!important使うな」とか突っ込まんといて。
ちなみに “Yuppy SC” はChromeに組み込まれているフォントになります。
chrome://settings/fonts
↑からどんなフォントが入っているか確認することが出来るのでご参考にどうぞ。
（正しいリンクとして認識されないのでアドレスバーにコピペする必要あるかも）
外部のフォントも読み込ませようとしたのですが、うまく行かなかったので出来た人教えてください…(´・ω・`)
chromeに読み込ませる
以下のページからChrome拡張の設定ページに遷移します。
chrome://extensions/
もしくは下記のように「設定」→「拡張機能」から遷移できます。
Chrome拡張の設定ページに移動したら「パッケージ化されていない拡張機能を読み込む」を選択。
読み込ませるものは一番最初に作ったmanifest.jsonが入ったディレクトリです。
ディレクトリ直下にmanifest.jsonがあることを確認して、そのディレクトリを読み込ませるとchrome拡張が読み込まれます。
あとは自分のTwitterのページに移動してフォントが書き換わっているか確認してみてください。
すべての道は manifest.json に通ず
今回はChrome拡張でTwitterのフォントを書き換えるという簡単なアプリを作ってみました。
応用をすれば「特定のページにjsを読み込ませる」ことも可能です。
やり方は簡単で css の場所を js に書き換えるだけです。
jsを使えば、buttonタグを増やしたり、入力フィールドに自動で文字を挿入したりすることも、、、と考えると色々な拡張を作ることが出来ますよね。
今回は最初ということで manifest.json の役割とファイル読み込みの方法を紹介しましたが、どんなChrome拡張も manifest.json から始まります。
ポップアップ、バックグラウンド実行、extension API、アプリのリリース方法、などなどまだまだ書く予定の項目はあるのでしばしお待ち下さい。
ここまで読んで頂きありがとうございました！
コメント