概要
- p2 で不要なスレをスレ一覧から非表示にする機能を実装します。
前回
スレッド一覧の改造
前回、ゴミ箱ボタンの押下時の動作を追加しました。ただ、押下した情報を保存していないので、ページのリロードするとまだ全てのスレが表示されてしまいました。
今回、押下したスレの情報を Chrome 拡張で扱えるストレージに保存し、ページロード時に読み込みたいと思います。
Chrome 拡張でのストレージについて
以下のページを参考にさせて頂きました。
ざっくりとは key/value で保存し、処理方法としては local/sync があるとのことです。
storage パーミッションの追加
manifest.json を編集して、permissions 配列に "storage" を追加します。
...
"permissions": [
"tabs",
"http://*/*",
"https://*/*",
"storage"
],
...
スレッド非表示ボタンクリック時のスレ情報の保存
storage というハッシュを用意し、key にスレッドID、value にスレのタイトルを設定したいと思います。
$('#' + threadId).click(function() {
storage[threadId] = title;
chrome.storage.local.set(storage, function() {
var tr = $(this).parent().parent(); // span > td > tr
tr.hide();
});
});
ページロード時のストレージの読み込み・スレ非表示
ページロード時にストレージを読み込み、key としてスレッドID が含まれていれば、そのスレは非表示にします。以下のようなイメージ。
chrome.storage.local.get(function(storage) {
...
if (threadId in storage) {
tr.hide();
}
...
});
最終的なコード
上記の点以外にも、tr の値の持ち方などを多少変更しています。
'use strict';
$(function() {
chrome.storage.local.get(function(storage) {
$('tr:not(.tableheader)').each(function() {
var tr = $(this);
var url = tr.find('.tl>a:last, .tl2>a:last').attr('href');
var title = tr.find('.tl>a:last, .tl2>a:last').text();
if (typeof url !== 'undefined') {
var result = url.match(/&key=([^&]+)&/);
var threadId = result[1];
// ゴミ箱の表示追加
tr.append('<td class="t"><span id=\'' + threadId + '\'>🗑</span></td>');
if (threadId in storage) {
tr.hide();
} else {
// ゴミ箱クリック時ハンドラ
$('#' + threadId).click(function() {
storage[threadId] = title;
chrome.storage.local.set(storage, function() {
tr.hide();
});
});
}
}
});
});
});
まとめ
ということで、今回までの Chrome 拡張の実装で、以下を行いました。
- スレッド非表示ボタンの表示
- ボタン押下でその行のスレを非表示
- ボタン押下したスレ情報をストレージに保存
- ページロード時にストレージを読み込み、すでに非表示ボタンが押されているスレは非表示
今後、さらに Chrome 拡張の勉強として実装を追加するなら、設定ページから非表示済みスレを解除できるように、等が考えられますが、多分やらない。
これで読みたいスレを探すのがかなり快適になるはず。