Googleのグループメールから送信する方法
のえる
Google Chromeの拡張機能を作ろう
のえる
Google Chromeには 拡張機能 というものがあります。
Chromeウェブストアからインストールすることができ、ブラウジングにおいて非常に便利な機能ですが、欲しい機能が必ずしも提供されているわけではありません。
では欲しい機能が無ければ諦める？
いいえ、だったら作ればいい、それがDIYの精神です！
というわけで、今回はGoogle Chromeの拡張機能を作っていきましょう。
必要知識
拡張機能を作るには下記の知識が必要です。
- HTML
- JavaScript
- (必要に応じて)CSS
構成
今回はおみくじをひく拡張機能を作ります。
作成するにあたり、中身の構成は下記のようになります。
|
1 2 3 4 5 6 |
extensions : アプリをまとめるディレクトリ |- manifest.json : マニフェストファイル(拡張機能の名前やバージョン、説明などを記載) |- popup.html : 表示する画面ファイル |- popup.js : プログラム本体 |
拡張機能を作る
まずはマニフェストファイルを記述していきましょう。
(記事作成時点では「manifest_version」は 2 となります)
|
1 2 3 4 5 6 7 8 9 10 |
{ "manifest_version": 2, "name": "おみくじ", "description": "押すとおみくじがひける", "version": "1.0", "browser_action": { "default_popup": "popup.html" } } |
name にはアプリ名、description には説明文を書きます。
また、拡張機能を押したら表示するHTMLファイルも設定しておきます。
続いて画面ファイルを作りましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
<!DOCTYPE html> <html> <head> <meta charset="utf8" /> <style> button { width: 120px; } #result { height: 30px; width: 100%; margin: 0 auto; text-align: center; line-height: 30px; } </style> </head> <body> <button type=button id="paperFortune">おみくじを引く</button> <div id="result"></div> <script src="popup.js"></script> </body> </html> |
内容はとても簡単なHTMLファイルです。
最後にプログラムを書くファイルを作ります。
「おみくじを引く」 ボタンを押したら、おみくじの結果が出る処理を書いていきましょう。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
let paperFortune = document.getElementById('paperFortune'); let result = document.getElementById('result'); paperFortune.onclick = function(element) { let rand = Math.floor(Math.random() * 100); let text = ''; if(rand >= 95) { text = '大吉'; } else if(rand >= 80) { text = '吉'; } else if(rand >= 60) { text = '中吉'; } else if(rand >= 35) { text = '小吉'; } else if(rand >= 20) { text = '末吉'; } else if(rand >= 5) { text = '凶'; } else { text = '大凶'; } result.innerHTML = text; }; |
ここまで出来たら開発は終了です。
拡張機能をインストール
次はGoogle Chromeに作成した拡張機能をインストールしましょう。
メニューから その他のツール > 拡張機能 を選択します。
拡張機能画面の右上にある デベロッパーモード をクリックしてオンにします。
あとは作成した拡張機能のフォルダを、拡張機能画面にドラッグ＆ドロップしましょう。
これで拡張機能がインストールされ、ブラウザ右上に 「お」 と書かれたアイコンが出来上がります。
これを押すと、おみくじを引くことができます。
さいごに
今回は一番シンプルな拡張機能を実装してみました。
実際はLocalStorageや画面要素を書き換えたり、画面要素を取得したりなど、様々なことができます。
もちろん普通のHTMLと同じに扱えますので、jQueryも使用することができます。
気になる方は下記の公式ドキュメントを参考にいろいろ試してみてください。
- おすすめ記事
-
-
ノウハウ
2020.05.15 のえる
-
おすすめ
jQueryはもう不要？2019年のフロントエンド事情を考えてみる
2019.08.27 もきち
-
やってみた
ブラウザで簡単にAR機能を実装する
2019.05.24 のえる
-
POPULAR
のえる
Full-stack Developer
人気記事
