TECH MEDIA

テックメディア


開発環境/ツール
ブログ

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

GoogleChromeその他技術
目次
  1. 01|どのように実装するのか?
  2. 02|データの保存と取得
  3. 03|まとめ

はじめましての方は、はじめまして。エンジニアの今井です。
前回の記事(その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. データの保存と取得

今回は、前回の「その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. まとめ

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

RECRUIT 採用情報

「eビジネスに関わる全ての人を幸せにする」
私達とともに新たな時代をつくりませんか?