📚

見られてたくないブラウザ履歴だけを自動削除! [Chrome拡張機能開発]

2023/05/15に公開
3

背景

画面共有を行う際に、ブラウザのアドレスバーで検索すると、自分が見ていたサイトがサジェストとして表示されることがありますよね。
思わぬ形でプライバシーが露わになってしまう瞬間です。
例えば、下記ではpと打った瞬間にブラウザのサジェストによって、私が漫画サイトのpiccoma打撃マンを読んでいたことが分かってしまいます。
※打撃マンはとてもブッ飛んでいて面白いのでオススメです!

このような事態を避けるため、ブラウザの設定で上手くできないか模索しました。
一律、履歴からサジェストしないことは可能であることは分かったのですが、履歴からのサジェスト機能自体はとても便利で活用しているので、失いたくありません。

見られて恥ずかしい履歴は、事前に自分で把握できているので、特定の履歴だけを残さないような機能があれば、この課題は解決できそうでした。

具体的にはサイトのドメインを指定して、そのサイトの履歴を一切保存しないようにすれば良さそうです。ただブラウザの設定では、そのような機能は無かったため、自分で拡張機能を開発することにしました。

実際できた拡張機能

この拡張機能は指定したドメインのサイトについて、ブラウザの検索履歴、Cookie、キャッシュを自動的に削除します。
また、オプション画面で対象のドメインの管理(追加・削除)も可能です。
使い方は非常にシンプルで、オプション画面で対象となるドメインを追加すれば、あとは自動的にそのドメインの履歴を削除してくれます。


オプション画面


履歴以外にもキャッシュやCookieも削除できます

拡張機能はChrome WebStoreからダウンロードできます。
https://chrome.google.com/webstore/detail/history-trimer/cdmacgacnnldaeikoeomojfenpbhohdm/

また、ソースコードはGitHubにて公開しています。
https://github.com/aozou99/history-trimmer

開発期間

金曜の夜に思いつき、土日を使って開発しました。合計3日間の開発期間でした。

使用技術

  • jQuery
  • Tailwind
  • Flowbite

技術的に悩んだところ

開発の過程で特に悩んだのはフレームワークの選定とHTML/jsのコンポーネント化でした。
最初、必要な画面がoptions_pageだけだったので、シンプルなjQueryで十分と思っていました。しかし、Reactに慣れている私にとって、jQueryの使用は思った以上に大変でした。Vue.jsも試しましたが、Vue.jsが内部でeval()を利用していることでmanifest v3によるCSPに違反しており、使用を見送りました。

また、HTMLのコンポーネント化はjquery-templateプラグインを使うことで解決し、jsのコンポーネント化はES Modulesを利用しました。これにより、webpackを使わずにコンポーネントに分けて作成することができました。これは大変便利で、作りやすかったのですが、最終的にはFlowbiteの機能を利用するためにwebpackを導入しました。

感想

全体を通してみて、この拡張機能の開発は多くの学びとともに、新たな試みでもありました。ユーザーが自分のプライバシーを保護し、ブラウジング体験をより快適にするためのツールとして、この拡張機能が役立つことを願っています。

ぜひ一度お試しください、そして、何かご意見やご感想がありましたら、お気軽にコメントいただければと思います。

Discussion