JavaScript
Chrome
chrome-extension
dmm
vue.js

DMM.R18の商品閲覧履歴を保存して確認できるChrome拡張を作りました。

私は現在に至るまでにDMM.R18で398本の商品を購入している、そこそこのユーザーです。そんな私がDMMを利用して直面した課題を解決するために拡張を作りました。

作ったもの

DMM History

DMMの商品(動画のみ)閲覧履歴を保存・表示する拡張機能です。

usage2.gif

  • 拡張が有効な状態で、商品ページを開くと履歴が保存されます。
  • 拡張をクリックするとポップアップが表示され、「履歴を見る」をクリックすると履歴ページに遷移します。
  • 履歴は削除と絞り込み検索ができます。
  • 履歴の最大保存数は120であり、それを超えると新しい履歴を追加される度に古い履歴が削除されます。

補足

  • この拡張ではユーザーが訪問した動画商品ページの情報のみを、拡張のローカルストレージに保存して利用しています。情報を収集したり送信などはしておりません。
  • 履歴ページの商品URLにDMMアフィリエイトIDを追加しています(サイト登録申請はGithubのリポジトリURLを申請に出したら審査が通りました)。
  • 画像は、DMMアフィリエイトで画像の使用許可が出ているものを利用しております。

インストール

規約上、Chrome Web Storeでは公開できないため。ダウンロードしたChrome拡張ファイルをインストールしてもらう形になります。

Chrome拡張ファイルのダウンロードとインストール方法はGitHub(hira777/dmm-history)に記載しましたので、そちらをご覧ください。コードも置いております。

何故この拡張を作ったのか

上記の通り、私はそこそこの本数の商品を購入しているわけですが、手当たり次第購入するわけではなく、様々な商品を吟味して購入にいたります。その本数は数十本から数千本までです(さすがに一度に数千本をセールにするのは吟味が辛いのである程度絞ってほしいです)。

そんな莫大な本数の商品を吟味するために、過去に閲覧した商品をチェックするための閲覧履歴が欲しいのですが、なんとDMMは閲覧履歴を8件までしか保持できないです。そのため、一瞬で履歴が消し飛びます

仕方がないので、気になる商品をタブを開いておくのですが、以下の通り景観を損ねます。

tab.jpg

タブを開きすぎると、どのタブがどの商品なのかがわからなくなります。また、タブをずっとこのままにしておくわけにもいかないため決断を急かされます。

また、私はそもそもタブ開いていることを忘れてスリープしてしまい、来客がいるときに何気なくスリープを解除してしまったインシデントを起こしてしまったことがあるため、もう同じ事故は起こしたくないです。

というわけで、大量の閲覧履歴を保存でき、好きな時に比較的安全に履歴をチェックできる拡張を作りました。

使用技術

フロントエンド

  • Vue.js
  • Vuex
  • Bulma(CSSのフレームフレームワーク。各役割ごとにSassファイルが分かれており、必要なファイルだけimport)

DOM操作はnativeのJS。

それぞれのコンポーネントはVue.jsのSingle File Components形式で分けて、webpackでビルドしています。

以下の理由でVue.jsとVuexを利用しています。

  • 状態の更新時にViewの更新をするため。
  • コンポーネント間で共通の状態を時つため。
  • 機能を追加予定であり、状態管理が今より複雑になる想定のため。
  • アプリーケーションの構造はそこまで複雑ではないため。

chrome拡張で利用できるAPI

chrome.storage

拡張内で有効になるストレージ。いくつか種類がありますが、今回はローカルのストレージに履歴を保存しています。

商品ページを開いた時にストレージに履歴を保存し、履歴ページを開いた時にストレージから履歴を取得して描画しています。

// データをストレージにセットする
chrome.storage.local.set({key: value}, function() {
  console.log('Value is set to ' + value);
});

// データをストレージから取得する
chrome.storage.local.get(['key'], function(result) {
  console.log('Value currently is ' + result.key);
});

storageを利用するためには、manifest.jsonpermissions項目にstorageを追加する必要があります。

manifest.json
{
  "name": "My extension",
  ...
  "permissions": [
    "storage"
  ],
  ...
}

chrome.runtime.getURL

相対パスを完全修飾URLに変換します。

例えば

chrome.runtime.getURL(history.html);

を実行すると、history.htmlを以下のようなURLに変換してくれます。

chrome-extension://pbmjlokhidigaadndmkeindlalkglbgg/history.html

今回はhistory.htmlを開くために利用しています。

window.open(chrome.runtime.getURL('history.html'));

Chrome拡張開発の学習方法、開発の進め方に関して

開発してみてわかったことですが、日本語の情報が圧倒的に少なく、英語の情報も古いものが多かったです(探し方の問題?)。

まずは公式ドキュメントで概要や基本的な機能は理解しつつ、APIサンプル(そこそこ古い)をしっかり読んで理解する必要があります。また、ドキュメントを見てもわからないこともあるので、GitHubでコードを見たり、Stack Overflowなどで調べる必要もあります。そのため、ちょっとした問題を解決しようと思ったら結構時間がかかってしまうこともありました(今回とは別の拡張の開発時に)。

Chrome拡張を作ろうと思っている方は、まずは最小限の機能だけを実装して、徐々に拡張をしていった方が良いと思いました。特に実務で開発することになったら、事前の調査は徹底してやった方が良いです。

日本語では以下の記事を参考にさせてもらいました。

終わり

私の周囲にDMMで商品を購入している方がいないため、利用者がいるかどうかはわかりませんが、私と同じ課題に直面している方がいれば、是非使っていただければと思います。

質問や不具合などありましたらQiitaのコメント、TwitterGitHubからご連絡ください。