雑記
Chrome拡張機能の「メモ帳」を手探りで開発してみました（後編）
はち
更新日:2021/08/12
こんにちは、はちです。
Chrome拡張機能の「メモ帳」を手探りで開発してみました（前編）では、Chrome拡張機能を開発するにあたって必要な「仕様書」の部分、”manifest.json”の作成まで行いました。
（まだ見ていない人は前編も御覧ください！）
後編では、中身をサクッと作って、仮で動かしパッケージ化する所まで進んでみたいと思います。
では早速中身を作っていきましょう。
Chrome拡張機能を作る
1.目に見える所から。HTML部分の作成
ここからの作り方は基本的に通常のWebアプリと同じです。
まずはHTMLから作りましょう。manifest.jsonの”browser_action”で指定した「popup.html」を作ります。
といってもただのテキストボックスと保存ボタンがあれば良いので、こんな感じのHTMLが出来上がると思います。
この中にある「load.js」と「save.js」は後ほど作成します。
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
<!DOCTYPE html> <html lang="ja"> <head> <meta charset="utf-8"> <script src="js/load.js"></script> </head> <body style="min-width:500px"> <form id="form"> <textarea rows="10" name="contents"></textarea> <input type="submit" class="btn btn-primary" value="保存"> </form> </body> <script src="js/save.js"></script> </html> |
2.テキストボックス内の文字を保存する機能の作成
フォームのボタンが押されたら、テキストボックス内にあるデータを取得して、Chromeが用意するストレージに保存してあげる機能を作ります。
そのためにchromeAPIの“storage”を使用します。使い方は以下の通り。
| chrome.storage | 拡張機能が持つデータベースにコンテンツを格納するAPI | |
|---|---|---|
| sync |
Chromeにログインしておけば、どのPCからでもアクセスできるストレージ領域。 ただし制限が多く、比較的少量の領域になる。
|
chrome.storage.sync.set({ 変数名1:値1, 変数名2:値2 }); |
| local | PC単位で保存するので、PCが変わるとアクセスできなくなるが 制約が緩いので、文章単位の保存が可能なストレージ領域。
|
chrome.storage.local.set({ 変数名1:値1, 変数名2:値2 }); |
今回はメモ帳なので、制限なく使える「local」を採用します。
“save.js”というファイルを用意して、まずは「保存ボタンが押された時」というJavascriptを書いて…
|
1 2 3 |
document.getElementById('form').onsubmit = function(){ } |
次にid=contentsに書かれたテキストを取得します。
|
1 2 3 |
document.getElementById('form').onsubmit = function(){ var contents = document.getElementById('form').contents.value; } |
そして、chrome.storage のset関数でローカルストレージのhold_contentに保存します。
|
1 2 3 4 5 |
document.getElementById('form').onsubmit = function(){ var contents = document.getElementById('form').contents.value; chrome.storage.local.set({hold_content:contents}); return false; } |
以上で保存する処理が完成しました。
3.保存した文章を取り出す機能の作成
さて、このメモ帳アプリは起動した（拡張機能のマークを押した）時点で文章が読み込まれている、という機能にしてあげたいです。
そこで使用する関数はget関数になります。
“load.js”というファイルを用意して、以下のように書き込んでください。
|
1 2 3 |
chrome.storage.local.get("hold_content", function(items) { document.getElementById('form').contents.value = items.hold_content; }); |
取り出された値は、すべてfunction(items)のitemsに格納されます。
後はid=contentsがついているテキストボックスに取得した値を適用すると無事起動時に表示されるようになります。
いかがでしょうか。これでメモ帳アプリが完成しました。簡単ですね！
実際に作ったアプリを仮で動かしてみる
では、実際に作ったアプリをChromeに読み込ませて、テストしてみましょう。
- Chromeを起動 → 右上にある「︙」マークをクリック。
- 「その他ツール」→「拡張機能」に移動
- 右上にデベロッパーモードという項目があるので、有効化する。
- 「パッケージ化されていない拡張機能を読み込む…」を選択
- manifest.jsonのあるディレクトリを選択し、決定を押すとインストールされます。
インストールに失敗した場合は、親切にChromeがどこが駄目だったかを教えてくれます。
インストールに成功したら、ひとまず動かしてみて気になった所を修正していきましょう。
完成した拡張機能を実際に公開してみる
開発した拡張機能を皆に使ってもらう場合でも、特定の人にだけ使ってもらう場合でもChrome拡張機能を実際に公開（ChromeWebストアにUP）しなければいけません。
まず完成したChrome拡張機能をzipファイルに収めます。
manifest.jsonが入っているフォルダをそのままお手持ちのソフトでzip化すれば大丈夫です。
その時、バージョン番号がリリースしたい番号になっているかを確認して下さい。
完了したら、実際にアップロード作業に移ります。
- ChromeWebストア → 右上のIDの横にあるマークをクリック。
- 「デベロッパーダッシュボード」を選択
※初めての公開の場合、$5の支払いを要求されます。クレジットカード等で支払いが出来ます。 - 新しいアイテムを追加をクリック
- 拡張機能またはアプリ（.zip ファイル）をアップロード欄を使って、先程生成したzipをアップロードする
-
下記情報を入力する
詳細説明 ChromeWebストアで対象のアプリを選択した場合に表示される説明文です。
16,000文字入力できますので、アイテムの紹介や操作方法などを存分に入力することが出来ます。アイコン ChromeWebストアで表示するアイコンはここにアップロードします。
基本アプリ開発時に作っていた128×128pxアイコンをここにアップロードすれば大丈夫です。スクリーンショット 1280×800 もしくは 640×400 サイズで実際の拡張機能のスクリーンショットを配置します。
拡張機能に至っては必須のものではありませんが、ストア詳細の見た目が良いので、
積極的に配置することをオススメします。- 基本1280 × 800pxのスクリーンショットが良いです。
- 最大5枚アップロードできます。
- 角は直角で、四方を完全塗りつぶし（空白なし）のスクリーンショットを用意する必要があります。
他にもYouTube動画のリンクをスクリーンショット欄として貼ることが出来ます。
プロモーションタイル画像 ChromeWebストア一覧等で表示される画像をここにアップロードします。
ストアを開いた最初の画面やアプリ検索結果一覧で出てくる各アプリの画像が
この”プロモーションタイル”画像となります。
一番人の目に入ってくるところになりますので、気合を入れて作っておくと良いです。- タイル（小）… 440×280px、タイル（大）…920×680px、マーキー…1400×560px 全部作りましょう。
- 暗めの背景を使用すると目立ちます。（外枠が白なので）
- 角は直角で、四方を完全塗りつぶし（空白なし）のタイルを作成します。
- 文字は小さくなって潰れてしまうので、あまり置かないほうが良いです。
- スクリーンショットをそのまま使わず、アプリのアイコンや特徴をシンプルに表現すると良いでしょう。
ウェブサイト 開発したChrome拡張機能が、特定のWebサイト公式のアプリだったり、
その拡張機能を説明したWebサイトやサポートページを外部に持っている場合は、
ここにURLを記載します。カテゴリ 開発したChrome拡張機能が属するカテゴリはここで指定します。 - ショッピング … Amazonやショッピングサイトの補助ツールや商品検索ツール
- スポーツ
- ソーシャル・コミュニケーション … SNSに関連するツール全般や交流に役立つツール
- デベロッパーツール … Web制作やPCを用いた開発に役立つツール
- ニュース＆天気
- ブログ
- ユーザー補助機能 … 普段Chromeで行っている動作を楽にするツール等はここ
- 検索ツール
- 娯楽 … 主にゲームや動画閲覧ツール
- 仕事効率化
- 写真
価格と支払い 拡張機能の価格を指定できます。デフォルトは無料です。
有料にする場合、支払い方法、分割回数、価格、無料試用版の提供有無まで選ぶことが出来ます。
また、支払い方法はChromeウェブストア決済というかんたん決済システムが用意されています。地域 拡張機能を公開する地域を選べます。
基本は日本を選んでおけば問題ないです。Google Play for Education 学校に配布するChromeBookに搭載できる拡張機能にしますか？という内容のものです。
基本はOFFです。無視して構いません。言語 拡張機能が対応している言語を指定します。 成人向けコンテンツ 拡張機能が成人向け（暴力的表現も含む）ものであれば必ずチェックを入れて下さい。 インラインインストール Chrome拡張機能をChromeWebストアに行かなくても、所定のリンクをクリックすることで
インストール処理ができるようにしたい場合にチェックを入れます。
使用する場合は以下の手順を踏むことで可能になります。- 前述の「ウェブストア」の新しいサイトを追加（もしくはGoogle Search console）で対象のURLを追加
- 対象のコードを自身のWebサイトに追加
1<link rel="chrome-webstore-item" href="https://chrome.google.com/webstore/detail/itemID">
Googleアナリティクス Googleアナリティクスを使ってアイテムをトラッキングすることが可能です。
その場合はアナリティクスIDを入力して下さい。成人向けコンテンツ 拡張機能が成人向け（暴力的表現も含む）ものであれば必ずチェックを入れて下さい。 要件 manifest.jsonで”requirements”を設定している場合、ここに要件が表示されます。 公開設定オプション 拡張機能の公開範囲を指定することが出来ます。 - 公開 … ChromeWebストアにて検索可能になり、すべてのユーザーが見ることが出来ます。
- 限定公開 … 発行されたリンクを踏んだユーザーのみがインストールできます。
- 非公開 … デベロッパーダッシュボードで設定した「Trusted Tester」のみがインストールできます。
- 全て設定し終わったら、変更を公開をクリック。
長々と書きましたが、これでChrome拡張機能を実際にインストールして使えるようになりました。
最後に（おまけもあるよ！）
前編、後編に分けてChrome拡張機能の開発方法について書きましたが、いかがだったでしょうか。
メモ帳で開発でき、Webアプリのように開発できるけど、自身のサーバーも用意する必要なし、ミニアプリでも十分活躍できるフィールド、Chromeの需要も大きい！
と、なんとも至れり尽くせりな場所のようです。
と、実はここまでに仮で開発していたメモ帳アプリですが、実はそれに機能をグリグリと加えてChrome拡張機能として実は公開しています！
その名も「ぱっと保存メモ帳」！です。
よかったらインストールして使ってみて下さい。それでは。
Chrome拡張機能「ぱっと保存メモ帳」の紹介ページへ 