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

はじめましての方は、はじめまして。エンジニアの今井です。
前回の記事(その2)では作っていく機能の説明や☆を表示する処理についての話をしましたが、今回は実現したい機能の中のチャットデータの保存について書いていきます。

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

ブラウザ上でのチャットデータ保存方法ですが、[chrome.storage]というものを使って☆をクリックした際に、対象のチャットデータを保存する仕組みに決めました。簡単に [chrome.storage] を説明するのであれば、以下のような感じです。
・key-valueの形でデータを保持できる
・オブジェクトを保存できる
・chrome上でしか動作しない
・chrome.storage.syncを利用することでchromeにログインしているアカウント間でデータの同期ができる

詳細は公式ドキュメントをご覧ください。
・https://developer.chrome.com/extensions/storage

また、chrome.storageを利用するためにはmanifest.jsonに以下の記述を追加し、拡張機能に権限を追加する必要があります。

"permissions": [
  "storage"
]

2.データの保存と取得

今回は、前回の「その２」でチャットに表示した☆マークをクリックした際にそのチャットデータを保存する部分と、保存したデータを表示する処理の説明になります。初めに chrome.storageの保存と取得について、次に拡張機能の保存処理について説明したいと思います。

保存

保存は以下のような処理になります。指定したkeyにvalueを保存します。

chrome.storage.sync.set({'key': value}, function () {
});

取得

取得は以下のような処理になります。keyに対する値がvalueとして取得できます。

chrome.storage.sync.get(['key'], function (value) {
  console.log(value.key);
});

チャットデータを保存する処理

作成中の拡張機能でチャットデータを保存する処理は、上記の保存処理と取得処理を組み合わせて実装されています。

$('.sc-cgHJcJ').each(function (i) {
  $(this).append("<div class='star'>☆</div>");
  $('.star').off().on('click', function () {
    var data = $(this).parent().parent().parent().data();
    clickStar(data["mid"], data["rid"], $(this).parent().text());
  });
});

上記の処理で次に記述されているメソッドが☆をクリックした際に実行されるようにしています。

function clickStar(mid, rid, text) {
  var message = {
    mid: mid,
    rid: rid,
    text: text
  };

  // 取得処理
  chrome.storage.sync.get(['messages'], function (value) {
    if (typeof value.messages === 'undefined') {
      // 初回はデータが存在しないため新たに作成する
      value.messages = [message];
    } else {
      value.messages.push(message);
    }
    // 保存処理
    chrome.storage.sync.set({'messages': value.messages }, function () {
    });
  });
}

☆をクリックしたときに実行されるclickStarという関数を定義しました。chrome.storage.sync.get(['messages'], function (value)で保存済みのデータを取得し、chrome.storage.sync.set({'messages': value.messages }, function () {});});で保存を行うようになっています。

3.まとめ

今回は前回の「その２」で実装した☆マークをクリックした際に、対象のチャットデータを保存する処理と、処理内で使用されているchrome.storageについて説明しました。次回は保存したデータを見る機能などを実装し、ご紹介したいと考えています。