特定URLだけをChromeの履歴から自動で消去する拡張機能作った

RSSリーダーのfeedly.comで閲覧すると、このような感じにズラッと履歴を占有してしまうので何とかしたい…と思って入れていたのがHistory Blacklistという拡張機能。

ですが残念なことにManifest V3に対応しておらず、代わりの拡張機能も見つからずで困り果てたので、ChatGPTさんに作って貰いました。

作りは最小限しかなくアイコンさえもないので、ちゃんと作ってストアに提出する気もないのですが、とりあえず作った記念でアップ。

この下の続きもChatGPTさんが著者ですw

今回は、指定したURLに関連するブラウザの履歴を自動的に削除するカスタムChrome拡張機能の設定と使い方をご紹介します。この拡張機能は、消去間隔を1分から1440分までの範囲でユーザーが設定できるように設計されています。

拡張機能のインストール方法

まず、以下の手順に従って、Chrome拡張機能をローカルでインストールします。

ファイルの準備:
以下のファイルを作成し、任意のフォルダに保存します。
- manifest.json
- background.js
- options.html
- options.js
拡張機能管理ページにアクセス:
Chromeを開き、アドレスバーに chrome://extensions/ と入力してアクセスします。右上の「デベロッパーモード」をオンにします。
パッケージ化されていない拡張機能を読み込む:
「パッケージ化されていない拡張機能を読み込む」をクリックし、保存したフォルダを選択します。

コード例

ここでは、各ファイルのコード例を紹介します。

manifest.json

{
  "manifest_version": 3,
  "name": "Custom URL History Cleaner",
  "version": "1.0",
  "permissions": [
    "history",
    "storage",
    "alarms"
  ],
  "background": {
    "service_worker": "background.js"
  },
  "options_page": "options.html"
}

background.js

chrome.runtime.onInstalled.addListener(() => {
    setAlarm();
});

chrome.runtime.onMessage.addListener((message) => {
    if (message.action === "updateAlarm") {
        setAlarm();
    }
});

function setAlarm() {
    chrome.storage.sync.get('interval', function (result) {
        const interval = result.interval || 1; // デフォルトで1分
        chrome.alarms.clearAll(() => {
            chrome.alarms.create('deleteHistoryAlarm', { periodInMinutes: interval });
            console.log('Alarm set for every ' + interval + ' minutes.');
        });
    });
}

chrome.alarms.onAlarm.addListener(function(alarm) {
    if (alarm.name === 'deleteHistoryAlarm') {
        deleteCustomUrlsHistory();
    }
});

function deleteCustomUrlsHistory() {
    chrome.storage.sync.get(['urls'], function (result) {
        const urls = result.urls || [];
        urls.forEach(function (url) {
            chrome.history.search({ text: url, maxResults: 100 }, function(results) {
                results.forEach(function(item) {
                    chrome.history.deleteUrl({ url: item.url }, function() {
                        console.log('Deleted:', item.url);
                    });
                });
            });
        });
    });
}

options.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Options - URL Cleaner</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 10px;
        }
        ul {
            list-style-type: none;
            padding: 0;
        }
        li {
            margin-bottom: 10px;
            display: flex;
            justify-content: space-between;
            align-items: center;
        }
        button.delete-btn {
            background-color: #e74c3c;
            color: white;
            border: none;
            padding: 5px 10px;
            cursor: pointer;
        }
        button.delete-btn:hover {
            background-color: #c0392b;
        }
    </style>
</head>
<body>
    <h1>Manage URLs to Clean</h1>
    <input type="text" id="urlInput" placeholder="Enter URL to clean" style="width: 100%;">
    <button id="addUrlButton">Add URL</button>
    <ul id="urlList"></ul>

    <h2>Set Cleaning Interval</h2>
    <input type="number" id="intervalInput" placeholder="Enter interval in minutes" style="width: 100%;">
    <button id="saveButton">Save Changes</button>

    <script src="options.js"></script>
</body>
</html>

options.js

document.addEventListener('DOMContentLoaded', function () {
    const urlInput = document.getElementById('urlInput');
    const urlList = document.getElementById('urlList');
    const intervalInput = document.getElementById('intervalInput');
    const saveButton = document.getElementById('saveButton');

    chrome.storage.sync.get(['urls', 'interval'], function (result) {
        const urls = result.urls || [];
        const interval = result.interval || 1;

        urls.forEach(function (url) {
            addUrlToList(url);
        });

        intervalInput.value = interval;
    });

    document.getElementById('addUrlButton').addEventListener('click', function () {
        const url = urlInput.value.trim();
        if (url) {
            addUrlToList(url);
            urlInput.value = '';
        }
    });

    saveButton.addEventListener('click', function () {
        const urls = [];
        document.querySelectorAll('#urlList li span.url-text').forEach(function (span) {
            urls.push(span.textContent);
        });

        const interval = parseInt(intervalInput.value, 10);

        if (isNaN(interval) || interval < 1 || interval > 1440) {
            alert('Please enter a valid interval between 1 and 1440 minutes.');
            return;
        }

        chrome.storage.sync.set({ urls: urls, interval: interval }, function () {
            chrome.runtime.sendMessage({ action: "updateAlarm" });
            alert('Settings saved!');
        });
    });

    function addUrlToList(url) {
        const li = document.createElement('li');
        const span = document.createElement('span');
        span.textContent = url;
        span.className = 'url-text';
        const deleteButton = document.createElement('button');
        deleteButton.textContent = 'Delete';
        deleteButton.className = 'delete-btn';

        deleteButton.add

EventListener('click', function () {
            li.remove();
        });

        li.appendChild(span);
        li.appendChild(deleteButton);
        urlList.appendChild(li);
    }
});

おわりに

この拡張機能を使用することで、指定したURLに関連する履歴を自動的に削除し、ブラウジング体験をより安全かつプライバシーに配慮したものにすることができます。必要に応じて、インターバルを調整して、自分に最適な設定を見つけてください。

ぽんハウス BLOG

2024/08/29