開発環境／ツール
ブログ
GoogleChromeの拡張機能を作ってみた その4
1. はじめに
はじめましての方ははじめまして、エンジニアの今井です。前回の記事(その3)では拡張機能の「チャットデータの保存」についてご紹介しました。今回は、さらなる続編！その「保存したデータの取り出し」と「表示」について書いていきたいと思います。
2. どのように実装するのか？
データの取り出しは、保存する時も使用した[chrome.storage]から取り出します。
そして、データの表示箇所ですが、[Browser Action]を使用して表示します。
[Browser Action]とは何かというと、拡張機能のアイコンの部分をクリックしたときに何かしらの動作を起こせる機能です。
・chrome.browserAction(公式ドキュメント)
https://developer.chrome.com/extensions/browserAction
アイコンとはブラウザの右上に表示される部分です。
↓こんなの
今回はアイコンをクリックしたときに表示用のポップアップを出したいので、以下のようにmanifest.jsonに追記しました。
browser_actionのdefault_popupに設定したhtmlが、アイコンをクリックした際に表示されるようになります。
<span class="token punctuation">{</span>
<span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"chatwork_star"</span><span class="token punctuation">,</span>
<span class="token property">"version"</span><span class="token operator">:</span> <span class="token string">"0.0.1"</span><span class="token punctuation">,</span>
<span class="token property">"manifest_version"</span><span class="token operator">:</span> <span class="token number">2</span><span class="token punctuation">,</span>
<span class="token property">"content_scripts"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token punctuation">{</span>
<span class="token property">"matches"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"https://www.chatwork.com/*"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"run_at"</span><span class="token operator">:</span> <span class="token string">"document_end"</span><span class="token punctuation">,</span>
<span class="token property">"css"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"css/extension.css"</span><span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"js"</span><span class="token operator">:</span> <span class="token punctuation">[</span><span class="token string">"js/jquery-3.4.1.min.js"</span><span class="token punctuation">,</span><span class="token string">"js/main.js"</span><span class="token punctuation">]</span>
<span class="token punctuation">}</span>
<span class="token punctuation">]</span><span class="token punctuation">,</span>
<span class="token property">"browser_action"</span><span class="token operator">:</span> <span class="token punctuation">{</span>
<span class="token property">"default_popup"</span><span class="token operator">:</span> <span class="token string">"html/popup.html"</span>
<span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token property">"permissions"</span><span class="token operator">:</span> <span class="token punctuation">[</span>
<span class="token string">"storage"</span>
<span class="token punctuation">]</span>
<span class="token punctuation">}</span>3. データの保存と取得
popup.htmlは、以下のように表示用の入れ物を用意しているだけになっています。
読み込んでいるpopup.jsで <div id =”message”></div>の部分に保存されているメッセージを表示します。
<span class="token tag"><span class="token punctuation"><</span>html<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>head<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>../js/jquery-3.4.1.min.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>script <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>../js/popup.js<span class="token punctuation">"</span></span><span class="token punctuation">></span></span><span class="token script language-javascript"></span><span class="token tag"><span class="token punctuation"></</span>script<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>link <span class="token attr-name">rel</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>stylesheet<span class="token punctuation">"</span></span> <span class="token attr-name">type</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>text/css<span class="token punctuation">"</span></span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation">=</span><span class="token punctuation">"</span>../css/extension.css<span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>head<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"><</span>body<span class="token style-attr language-css"><span class="token attr-name"> style</span><span class="token punctuation">="</span><span class="token attr-value"><span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span></span><span class="token punctuation">"</span></span><span class="token punctuation">></span></span>
<div id ="message"><span class="token tag"><span class="token punctuation"></</span>div<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>body<span class="token punctuation">></span></span>
<span class="token tag"><span class="token punctuation"></</span>html<span class="token punctuation">></span></span>表示処理はpopup.jsに書かれています。
chrome.storage.sync.getで保存済のデータ(messages)を取得し、messagesの中身(message)を全て表示するようにしています。
<span class="token function">$</span><span class="token punctuation">(</span>window<span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">on</span><span class="token punctuation">(</span><span class="token string">'load'</span><span class="token punctuation">,</span> <span class="token keyword def">function</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
chrome<span class="token punctuation">.</span>storage<span class="token punctuation">.</span>sync<span class="token punctuation">.</span><span class="token keyword">get</span><span class="token punctuation">(</span><span class="token punctuation">[</span><span class="token string">'messages'</span><span class="token punctuation">]</span><span class="token punctuation">,</span> <span class="token keyword def">function</span> <span class="token punctuation">(</span><span class="token parameter">value</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
value<span class="token punctuation">.</span>messages<span class="token punctuation">.</span><span class="token function">forEach</span><span class="token punctuation">(</span><span class="token parameter">message</span> <span class="token operator">=></span> <span class="token punctuation">{</span>
<span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'#message'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">append</span><span class="token punctuation">(</span><span class="token string">'<div>'</span> <span class="token operator">+</span> message<span class="token punctuation">.</span>text <span class="token operator">+</span> <span class="token string">'</div><hr>'</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>現在はアイコンをクリックすると以下のような表示になりますが、これは保存されているテキストメッセージを表示しているだけです。削除処理も実装されておらず、見やすさも考慮してません。
そのため、まだまだ実装しなければならない部分は多く、どのようなデザインにするかも非常に迷っています。。。
4. まとめ
今回はbrowser_actionのdefault_popupでアイコンをクリックしたときに指定したhtmlを表示できる事と、前回と合わせてchrome.storageでデータの保存と取り出しにができる事についてご説明しました。そして次回は、、、実装について悩んでいる部分が多く、何を書くかは実はまだ決まっていません。どんな記事になるか、お楽しみに。