ChatGPT で Microsoft Edge の拡張機能を作った

Qiita で特定のユーザーのコメントを非表示にする機能

こちらの記事で公開されている拡張機能を、Chromeで使用してみましたが、自分の使用手順の問題なのか、開発されてからページの構成が変わったためなのかわかりませんが、動きませんでした。開発者の方、記事がきっかけになりました。ありがとうございます。

作り方を ChatGPT に聞いた

何度もエラーが出て修正しましたが、結論のみを記録します。ここからは、Microsoft Edge を使用しています。

手順

1. Tampermonkey をインストールする
2. Tampermonkey で、コメントを非表示にするスクリプトを記述して、上書き保存（ctrl + S）する

1. Tampermonkey のインストール

Edgeブラウザを開き、アドレスバーに以下を入力してEnter

edge://extensions/

ページ右下にある「Microsoft Edge アドオンを検索」というリンクをクリック

または、直接 Microsoft アドオンストア https://microsoftedge.microsoft.com/addons/Microsoft-Edge-Extensions-Home へアクセスする

アドオンストアの検索ボックスに、Tampermonkey と入力して検索する

Tampermonkey をインストールする

2-1. コメントを非表示にするスクリプトを記述

ブラウザのメニューから、「拡張機能」をクリックして、Tampermonkey をクリック、「ダッシュボード」をクリックする

「+」マークをクリック

エディターに最初から記述されているテンプレートを削除

次のコードをペーストして、上書き保存する

// ==UserScript==
// @name         Qiita コメントブロック（動的監視強化版）
// @namespace    http://tampermonkey.net/
// @version      1.9
// @description  指定ユーザーのQiitaコメントを非表示にする（動的監視）
// @match        https://qiita.com/*
// @grant        none
// ==/UserScript==

(function () {
    'use strict';

    const blockedUsers = ['ユーザー名'];
    const HIDE_CLASS = 'blocked-comment';

    const hideBlockedComments = () => {
        const commentSections = document.querySelectorAll('section[id^="comment-"]');
        console.log('検出されたコメント数:', commentSections.length);

        commentSections.forEach(section => {
            if (section.classList.contains(HIDE_CLASS)) return; // 既に処理済みならスキップ

            const userLink = section.querySelector('a[href^="/"]');
            if (!userLink) return;

            const href = userLink.getAttribute('href');
            const username = href.replace('/', '').split('?')[0];

            console.log('検出ユーザー:', username);

            if (blockedUsers.includes(username)) {
                section.style.display = 'none';
                section.classList.add(HIDE_CLASS);
                console.log('コメントを非表示にしました:', username);
            }
        });
    };

    // 500ミリ秒ごとに監視
    setInterval(hideBlockedComments, 500);
})();

const blockedUsers = ['ユーザー名']; の、ユーザー名に@は不要

拡張機能を有効にして、ページをリロードする

2-2. 非表示にしたいアカウントが複数ある場合

ユーザー名をカンマで区切って追加する

const blockedUsers = ['username1', 'username2', 'username3'];