GoogleChromeの拡張機能を作ってみた　その4

2023.01.17 開発環境／ツール

ブログ

GoogleChrome

01｜はじめに
02｜どのように実装するのか？
03｜データの保存と取得
04｜まとめ

1. はじめに

はじめましての方ははじめまして、エンジニアの今井です。前回の記事(その3)では拡張機能の「チャットデータの保存」についてご紹介しました。今回は、さらなる続編！その「保存したデータの取り出し」と「表示」について書いていきたいと思います。

2. どのように実装するのか？

データの取り出しは、保存する時も使用した[chrome.storage]から取り出します。
そして、データの表示箇所ですが、[Browser Action]を使用して表示します。
[Browser Action]とは何かというと、拡張機能のアイコンの部分をクリックしたときに何かしらの動作を起こせる機能です。

・chrome.browserAction(公式ドキュメント)
https://developer.chrome.com/extensions/browserAction

アイコンとはブラウザの右上に表示される部分です。
↓こんなの

今回はアイコンをクリックしたときに表示用のポップアップを出したいので、以下のようにmanifest.jsonに追記しました。
browser_actionのdefault_popupに設定したhtmlが、アイコンをクリックした際に表示されるようになります。

{
  "name": "chatwork_star",
  "version": "0.0.1",
  "manifest_version": 2,
  "content_scripts": [
    {
      "matches": ["https://www.chatwork.com/*"],
      "run_at": "document_end",
      "css": ["css/extension.css"],
      "js": ["js/jquery-3.4.1.min.js","js/main.js"]
    }
  ],
  "browser_action": {
    "default_popup": "html/popup.html"
  },
  "permissions": [
    "storage"
  ]
}

3. データの保存と取得

popup.htmlは、以下のように表示用の入れ物を用意しているだけになっています。
読み込んでいるpopup.jsで <div id =”message”></div>の部分に保存されているメッセージを表示します。

<html>
    <head>
        <script src="../js/jquery-3.4.1.min.js"></script>
        <script src="../js/popup.js"></script>
        <link rel="stylesheet" type="text/css" href="../css/extension.css">
    </head>
   <body style="width: 300px;">
       <div id ="message"></div>
   </body>
</html>

表示処理はpopup.jsに書かれています。
chrome.storage.sync.getで保存済のデータ(messages)を取得し、messagesの中身(message)を全て表示するようにしています。

$(window).on('load', function () {
    chrome.storage.sync.get(['messages'], function (value) {
        value.messages.forEach(message => {
            $('#message').append('<div>' + message.text + '</div><hr>');
        });
    });
})

現在はアイコンをクリックすると以下のような表示になりますが、これは保存されているテキストメッセージを表示しているだけです。削除処理も実装されておらず、見やすさも考慮してません。

そのため、まだまだ実装しなければならない部分は多く、どのようなデザインにするかも非常に迷っています。。。

4. まとめ

今回はbrowser_actionのdefault_popupでアイコンをクリックしたときに指定したhtmlを表示できる事と、前回と合わせてchrome.storageでデータの保存と取り出しにができる事についてご説明しました。そして次回は、、、実装について悩んでいる部分が多く、何を書くかは実はまだ決まっていません。どんな記事になるか、お楽しみに。

テックメディア

1. はじめに

2. どのように実装するのか？

3. データの保存と取得

4. まとめ