ページのリンクをTwitterからXに置換してくれるChrome拡張「twitter2x」を作りました

開発経緯

何気なくTwitterで検索履歴から見たいハッシュタグに移動しようと思ったら検索履歴が無くなってました。
どうやら数日前から「twitter.com」にアクセスすると「x.com」にリダイレクトする仕様らしい、そのせいで検索履歴が消えてたみたい。

このYahooニュースを見てたんですが、「もしリダイレクトされなくなったらリンク切れが続出する事態になるんじゃね？」って思っちゃったんですよね。

twitter2x

という事で、ページのリンクをTwitterからXに置換してくれるChromeの拡張機能を作りました。

manifest.json

{
  "name": "twitter2x",
  "description": "Webページのリンクを「twitter.com」から「x.com」に置換します。",
  "version": "1.0.0",
  "manifest_version": 3,
  "content_scripts": [{
      "matches": ["<all_urls>"],
      "all_frames": true,
      "js":      ["js/loader.js"],
      "run_at": "document_start"
  }],
  "web_accessible_resources": [{
      "resources": ["js/content.js",
                    "js/program.js"],
      "matches":   ["<all_urls>"]
  }]
}

js/loader.js

(async() => {
    const src = chrome.runtime.getURL("js/content.js");
    const contentMain = await import(src);
})()

js/content.js

import { ProgramClass } from "./program.js";

function main(){
    let target = document.body;
    let config = { childList: true, subtree: true };

    let program = new ProgramClass();

    let observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            program.run(mutation.target);
        });
    });

    observer.observe(target, config);
}

if(document.readyState === "loading"){
    document.addEventListener("DOMContentLoaded", function(){
        main();
    });
}else{
    main();
}

js/program.js

export class ProgramClass {
    constructor() {
        
    }

    run(target) {
        for(const element of target.querySelectorAll('a[href*="twitter.com"]:not([data-checked="true"])')){
            element.href = element.href.replace("twitter.com", "x.com");
            element.dataset.checked = "true";
        }
    }
}

やってる事は単純で、MutationObserverでページを監視して変化があったらaタグのhrefに「twitter.com」という文字列がある要素を検索して「x.com」に置換してるだけです。

参考資料