羅針盤 技術航海日誌

株式会社羅針盤の技術ブログです

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

Tool

この記事は羅針盤 アドベントカレンダー 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等の確認ができます。
かわいいやつです。

早速PHP警告を発見しました。恥ずかしいやつです。

機能 - Heading

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

私は多分イエベです

機能 - Social

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

機能 - Image

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

base64ã‚‚OK

機能 - A Link

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

正直1ページ中のタグの多さに圧倒されます

機能 - 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を使うようにしました。
（上部タブの状態管理も同様）

まとめ

LukeHagarさんのテンプレートで簡単にUI付きのExtensionを作ることができました。
私もコーディーより戦う市長派です。

github.com

ただ、コード中には何が埋め込まれているか分からないので最終的には自身できちんと確認するようにしましょう。
OSSの良い部分ですね。感謝。