Chrome Extension: Sveltekitで作ってみる (Compass SEO Checker)

この記事は羅針盤アドベントカレンダー 2024の10日目の記事です。
qiita.com

9日目の記事は LinearBでDORA Four Keysはどーだ？ - 羅針盤技術航海日誌でした。

こんにちは、羅針盤の森川です。
7日目に引き続き、今回もChrome Extensionの話です。

2024年もChrome ExtensionもSveltekitで書きたいですよね？
Reactとか言ってる方は今すぐブラウザを閉じて rm -rf /tmp/ilovejsx してください。

とか言っておいてなんですが、tl;dr これ使えばすぐできます。

github.com

Skeletonが最初から入ってるので嫌いじゃなければかなり楽です。

右上の Use this template からコピーしてこれをベースに開発してください。
すみません、もうこれで何も解説することが無くなってしまいました。
あとはもう宣伝だけして終わりにします。すみません。

Compass SEO Checker

動機

SEO関連のExtensionは有名なのがいくつかあると思うんですが、hreflangが確認できるものが少ないのが苦痛でした。
毎日イライラばかりが募り、それはやがていつしか祈りへと変わりました。

そして地味に情報ぶっこ抜きリスクもあるので、謎の企業や開発者を信じるわけにはいきません。
疑いはいつしか信仰へと変わりました。

そんなわけで休日に作ったのがこのChrome Extensionです。今のところ怪しいコードは仕込んでいません。祈り、そして信じてください。

chromewebstore.google.com

機能 - Main

Exntensionのアイコンを押すとMainが開きます。
<title> タグやSEOで使う<meta> タグ、favicon等の確認ができます。
かわいいやつです。

機能 - Heading

<h1> ~ <h6> を抜き出した情報が表示されます。
かわいいやつです。

OG設定が確認できます。
かわいいやつです。

機能 - Image

<img> タグや <style> タグ中の画像データを確認できます。
ファイルサイズの確認でよく使います。
かわいいやつです

機能 - A Link

<a> タグを確認できます。
さりげなく<a>内の画像も確認できます。
かわいいやつです。

機能 - JS

HTML中の外部JSファイルとインラインJSを確認できます。 preload とか prefetch とかもついでに確認できます。かっこいいやつです。

開発時のTips

最後に申し訳程度につけておきます。
routes/+page.svete の onMount の中でHTML解析の実行を開始しています。

onMount(function () {
    if (!window.chrome) {
        return;
    }

    // `vite dev` の時の動作
    if (import.meta.env.DEV) {
        const currentURL = window.location.href;
        const data = getDummyData(currentURL);
        updateData(data);
        return;
    }

    if (!chrome.scripting) {
        console.error('[onMount] chrome.scripting does not activated');
        return;
    }

    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        const activeTab = tabs[0];
        const currentURL = activeTab.url;
        chrome.scripting.executeScript(
            {
                target: { tabId: activeTab.id },
                function: () => document.documentElement.outerHTML
            },
            (result) => {
                const html = result[0].result as string;
                const data = getTagsFromHTML(html, currentURL);
                updateData(data);
            }
        );
    });
});

Extensionとして機能させずとも、ローカルデバッグ（vite dev実行時）できるようにダミーデータをロードするようにしています。

updateData では store を使ってデータの更新をしています。子コンポーネントで subscribeして検知をしてます。
最初はオブジェクトを引数にして、コンポーネントに渡していたんですが、私のSvelte力が低くて更新検知されないパターンが出てきたので大人しくstoreを使うようにしました。
（上部タブの状態管理も同様）