見出し画像

Chrome拡張機能を作ってストア公開してみた

たかやま

どうも、たかやまです。
今回は個人的なお知らせです！

私は普段、Chromeの閲覧履歴やキャッシュをこまめに削除するようにしているのですが、毎回手動で削除するのは面倒になったので、拡張機能を作ってみました。そして、せっかくなのでChromeウェブストアに公開してみました。

History Cleaner

Chrome起動時に自動で履歴を削除するだけの、いたってシンプルなツールになっております。以下にリンクを貼っておきます。

使い方

使用例

上の画像の通り、アイコンをクリックして削除したい項目を選んでおくと、次回起動時に自動でその履歴が削除されます。たったコレだけのシンプルなツールですが、個人的にはすごく楽になりました。これで完成でもいいのですが、指定したサイト以外のCookieを削除する機能だったり、英語と日本語を切り替える機能も追加してみたいですね。

もし利用される方がいらっしゃいましたら、ページ内の概要をよく読んでから自己責任でご利用ください。レビューお待ちしております！

この先では、History Cleanerを構成するファイルのコードを公開しています。

当記事で公開しているコードはバージョン1.1のものとなっております。
👇こちらの記事で最新バージョンの紹介してます。

構成ファイル

  1. manifest.json：これは最も重要なファイルです。プラグインの情報、使用するファイルの指定、権限などが含まれています。プラグインの設定を記述します。

  2. background.js：ブラウザのバックグラウンドで動作するスクリプトです。データの取得や保存、ブラウザに対する動作の記述を行います。

  3. popup.js：プラグインのポップアップ内で動作するスクリプトです。ユーザがアイコンをクリックしたときに表示されるウィンドウの動作を制御します。

  4. popup.html：ポップアップ内のコンテンツを記述するHTMLファイルです。ポップアップの表示内容を作成します。

  5. popup.css：ポップアップのスタイルを指定するCSSファイルです。

  6. icon16.png：16×16のアイコン画像です。

  7. icon48.png：48×48のアイコン画像です。

  8. icon128.png：128×128のアイコン画像です。

以上になります。それではひとつひとつ公開していきます。

1. manifest.json

{
  "manifest_version": 3,
  "name": "History Cleaner",
  "version": "1.0",
  "description": "Chrome起動時に自動でブラウザの履歴を削除する拡張機能です。プライバシーを保護し、よりクリーンなブラウジング体験を提供します。",
  "permissions": [
    "storage",
    "browsingData",
    "alarms"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "action": {
    "default_popup": "popup.html"
  },
  "icons": {
    "16": "icon16.png",
    "48": "icon48.png",
    "128": "icon128.png"
  }
}

2. background.js

chrome.runtime.onInstalled.addListener(() => {
  chrome.storage.sync.set({
    settings: {
      history: true,
      downloads: false,
      cookies: false,
      cache: false,
      passwords: false,
      autofill: false
    }
  });

  // 初回インストール時にアラームを作成
  chrome.alarms.create('clearBrowsingData', { when: Date.now() + 1000 }); // 1秒後に実行
});

chrome.runtime.onStartup.addListener(() => {
  // Chrome起動時にアラームを作成
  chrome.alarms.create('clearBrowsingData', { when: Date.now() + 1000 }); // 1秒後に実行
});

chrome.alarms.onAlarm.addListener((alarm) => {
  if (alarm.name === 'clearBrowsingData') {
    chrome.storage.sync.get('settings', (data) => {
      const settings = data.settings;
      const removalOptions = {
        since: 0
      };
      const dataToRemove = {};

      if (settings.history) dataToRemove.history = true;
      if (settings.downloads) dataToRemove.downloads = true;
      if (settings.cookies) dataToRemove.cookies = true;
      if (settings.cache) dataToRemove.cache = true;
      if (settings.passwords) dataToRemove.passwords = true;
      if (settings.autofill) dataToRemove.formData = true;

      chrome.browsingData.remove(removalOptions, dataToRemove, () => {
        console.log('Browsing data cleared');
      });
    });
  }
});

3. popup.js

document.addEventListener('DOMContentLoaded', () => {
  const historyCheckbox = document.getElementById('history');
  const downloadsCheckbox = document.getElementById('downloads');
  const cookiesCheckbox = document.getElementById('cookies');
  const cacheCheckbox = document.getElementById('cache');
  const passwordsCheckbox = document.getElementById('passwords');
  const autofillCheckbox = document.getElementById('autofill');
  const saveBtn = document.getElementById('saveBtn');
  const messageDiv = document.getElementById('message');

  chrome.storage.sync.get('settings', (data) => {
    const settings = data.settings;
    historyCheckbox.checked = settings.history;
    downloadsCheckbox.checked = settings.downloads;
    cookiesCheckbox.checked = settings.cookies;
    cacheCheckbox.checked = settings.cache;
    passwordsCheckbox.checked = settings.passwords;
    autofillCheckbox.checked = settings.autofill;
  });

  saveBtn.addEventListener('click', () => {
    const settings = {
      history: historyCheckbox.checked,
      downloads: downloadsCheckbox.checked,
      cookies: cookiesCheckbox.checked,
      cache: cacheCheckbox.checked,
      passwords: passwordsCheckbox.checked,
      autofill: autofillCheckbox.checked
    };

    chrome.storage.sync.set({ settings }, () => {
      messageDiv.classList.remove('hidden');
      setTimeout(() => {
        messageDiv.classList.add('hidden');
      }, 2000);
      console.log('Settings saved');
    });
  });
});

4. popup.html

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>History Cleaner</title>
  <link rel="stylesheet" href="popup.css">
</head>
<body>
  <h1>History Cleaner</h1>
  <p>
    削除したい項目を選択してください。<br>
    次回起動時に選択した履歴を自動で削除します。
  </p>
  <form id="settingsForm">
    <label><input type="checkbox" id="history"> 閲覧履歴</label>
    <label><input type="checkbox" id="downloads"> ダウンロード履歴</label>
    <label><input type="checkbox" id="cookies"> Cookieと他のサイトデータ</label>
    <label><input type="checkbox" id="cache"> キャッシュされた画像とファイル</label>
    <label><input type="checkbox" id="passwords"> パスワードとその他のログインデータ</label>
    <label><input type="checkbox" id="autofill"> 自動入力フォームのデータ</label>
    <button type="button" id="saveBtn">保存</button>
  </form>
  <div id="message" class="hidden">設定が保存されました。</div>
  <script src="popup.js"></script>
</body>
</html>

5. popup.css

body {
  font-family: Arial, sans-serif;
  margin: 10px;
  width: 300px;
}

h1 {
  font-size: 18px;
  margin-bottom: 10px;
}

label {
  display: block;
  margin-bottom: 8px;
}

button {
  display: block;
  margin-top: 10px;
  padding: 5px 10px;
  background-color: #007bff;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #0056b3;
}

#message {
  margin-top: 10px;
  padding: 10px;
  background-color: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
  border-radius: 4px;
  text-align: center;
}

.hidden {
  display: none;
}

6. 7. 8. icon.png

アイコン用のPNGファイル3パターン(16×16、48×48、128×128)は同じフォルダに置いてます。

最後まで読んでいただき、ありがとうございました！


この記事が気に入ったらサポートをしてみませんか？