拡張機能を超簡単につくる方法！
● 前置き
２年間manifestが書けず、GoogleChromeの拡張機能が作れなかった
バカうp主が今回は超簡単にGoogleChromeの拡張機能をつくる方法を
説明します。(といってもコピペで作れるようにするだけですが…)
なので、普通に勉強すればGoogleChromeの拡張機能が作れる方に
この記事は合わないかもしれません。予めご了承ください。
■ 本題
今回はこのようなものを作っていきます！
ではやっていきましょう！。
まず、どこかに拡張機能を作るようのフォルダを作ってください。
(あとでそれをGoogleChromeに読み込ませて、拡張機能を認識させます。)
そうしたらそのフォルダの中に、以下のファイルを作ってください。
・icon.png
解像度が 38×38 の。
(この画像ファイルは拡張機能のicon(アイコン)になります。)
・manifest.json
(拡張機能の構成を定義するやつ。つまり拡張機能の骨組みとなるやつ。)
・popup.html
(拡張機能をクリックしたら出てくる↓これを定義するファイル)
もう一度いうと icon.png, manifest.json, popup.html これらファイルを
作ってください。
といっても icon.png を用意するのはちょっと手間だと思うので、
↓これをダウンロードしてください。
● ファイルの作り方がわからない方向けに解説
と言われてもわからない方はここで解説する内容の通りにやってください。
Step1. Extensionフォルダを作ってください。
(Extensionとは拡張という意味です。つまり拡張機能の拡張)
Step2. テキストファイルをつくる
テキストファイルというのはテキストドキュメントファイルのことです。
名前が長いので略しました。
スクショのとおりにしてテキストファイルを作ってください。
(ちなみにGit GUI Hereというボタンがあると思いますが無視してください。
Githubというソースコードを公開できるプラットフォームにデータを送ったりすることができるGitを入れたら現れるボタンなので…
といってもわからないですよね… 分からなくても無視すれば大丈夫です。)
そうすると名前が変えられる状態でこんなファイルが作成されると思います
そうしたらこのファイルで言うところの .txt という拡張子が表示されて
いない方は拡張子を表示させましょう。
□ 拡張子の表示方法
エクスプローラー(フォルダが見れるアプリ)の左上にあるファイルという
タブみたいなものをクリックしてください。
するとこれが表示されるので、フォルダと検索のオプションの変更 という
ボタンをクリックしてください。
そうしたらこれが表示されるので上の 表示 タブをクリックしてください。
するとこうなると思いますので、詳細設定: と書かれたところの下にある
ところを下にスクロールして、ファイルのアイコンのあとに
ファイルとフォルダの表示 と書かれたものを見つけてください。
その下に、隠しファイル、隠しフォルダー、および隠しドライブを表示する
と書かれたラジオボタンの項目がありますよね？。
それをクリックしてください。
あとはウィンドウの一番下にある OK ボタンを押せば完了です。
お疲れ様でした。
これによって .txt という拡張子が表示されると思うのでこのファイルの
名前を manifest.json にしましょう。
そうしたらもう一度
新規作成 から テキストドキュメント をクリックして、
テキストファイルを作って、このファイルの名前をまた変更して
今度は popup.html という名前にしてください。
そうしたら完了です。お疲れさまでした。ここまで大変でしたよね💦
ここまで付いてきてくださってありがとうございます。
あとは拡張機能のソースコードを書いていくだけですｗ ← 鬼
(言うて難しくないけどｗ)
■ ソースコードを書いていく
manifest.json ファイルにこいつを書いてください。
{
"manifest_version": 2,
"name": "Scratch Alert Checker",
"description": "nezuu",
"version": "1.0",
"browser_action": {
"default_icon": "icon.png",
"default_popup": "popup.html"
},
"permissions": [
"tabs", "http://*/*", "https://*/*"
]
}そしたら popup.html にこいつを書いてください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Scratch Alert Checker</title>
</head>
<body>
<h1>Extention</h1>
</body>
</html>以上！お疲れさまでした！と言いたいところですが、最後にGoogleChrome
にこの作った拡張機能を読み込ませていきましょう！。
■ 拡張機能を読み込ませる
まず、GoogleChromeを開いて、その他のツール という項目に
マウスカーソルを当てて、
さらに項目を表示させ、拡張機能という項目をクリックして
こんな拡張機能が並んでいる画面を表示させてください。
(この画面では拡張機能を管理することができます。)
そうしたらこの画面の右上にあるデベロッパーモードというところを
クリックして、ONにしてください。デベロッパーモードを。
そうしたら
このようになんか項目が３つ出てくるので、その項目の中の
パッケージ化されていない拡張機能を読み込むというボタンをクリックしてください。
そうしたらこの記事の初めで作るようお願いしたフォルダを開いてください
僕の場合はこのフォルダですね。
そうしたらこのように作った拡張機能が追加されると思います。
そうしたら2020/12/15の時点で最新版のGoogleChromeは、拡張機能を
非表示にしてくれる機能があるので、表示されていなければ、
拡張機能が表示されているところ(画面右上)の、パズルのピースみたいな
アイコンをクリックしてください。
するとこんなのが表示されるので、追加した拡張機能の項目の右側にある
画鋲が下向きになっているアイコンをクリックしたら、
青くなって、拡張機能が表示されるのでこれで完了です。
あとは右上にある x をクリックして、閉じてください。
そうして、拡張機能をクリックしてみると？
このようなものが表示されました！
表示されていれば成功です。
最後までお読みくださりありがとうございます！。
疲れていたらゆっくり休まれてください。
追記：
余談にはなりますが、こんな感じで長い文字打ったらはみ出ちゃった！
というときの対処法をお教えしたいと思います。
やり方は簡単です。
まず、popup.html に <link rel="stylesheet" href="stylesheet.css"> を
こんな感じで追記してください。
<!doctype html>
<html lang="ja">
<head>
<meta charset="utf-8" />
<title>Scratch Alert Checker</title>
<link rel="stylesheet" href="stylesheet.css"> <!-- ←ここに -->
</head>
<body>
<h2>Alertの内容</h2>
<button>更新</button>
</body>
<script src="/assets/js/main.js"></script>
</html>そうしたら popup.htmlが入っているフォルダ内に stylesheet.css という
テキストドキュメントファイルを追加してください。
そうしたらその stylesheet.css の中にこれを書き込んでください。
body{
white-space: nowrap;
}以上！これでちゃんと文字が横に表示されるようになります。
どういうトリックを使ったのかと言うと、CSSをご存じの方なら
おわかりいただけると思うのですが、body セレクタに
white-space: nowrap; という文字を勝手に改行させないようにする
プロパティを指定したわけです。
CSSがわからない方向けにも説明すると、white-space: nowrap; という
文字を勝手に改行させないようにする命令を書いたって感じです。
そしてbodyセレクタっていうのはコレのことです：
body{
}このセレクタというのはどこにそれを指定するのかを決めるためにあります
これがないと例えばタイトルの文字にだけ色を付けたいのに、画面全体の
文字に色が付いちゃった！なんてことになります。
なぜなら色を付けたい文字または範囲を指定していないからです。
ここから先の話は画像なしでは少し難しくなってしまうので、ご興味あればぜひ！ご自分で調べてみてください。
以上！追記でした！。余談が長くなってしまいすみません。
✨ 参考にさせていただいたサイト
✨ 参考になるサイト：
よろしければサポートお願いします！！ いただいたサポートはクリエイターとしての活動費に使わせていただきます。