開いている全てのタブの全てのリンクを取得する #Chrome

Google Chromeで開いている全てのタブ（ページ／HTML）の全てのリンク（URL）を取得（スクレイピング）する拡張機能を作成しました。

どうして作ろうと思ったか

私はいくつかメディアを持っていて、中には収益化が最適化できていない、行き届いていないサイトやページが多くあります。それらをどう収益化するか、つまり、例えばどんなアフィリエイト広告・プログラムが最適だろうか、と考えていました。

ある記事（例： "Linuxコマンドの使い方【初心者向け】"）があるとします。単純なアイデアですが、例えばあるクエリで検索（例："Linux コマンド"）をして検索結果に表示されるサイト・ページを全てクロールし、リンクを取得し、アフィリエイトASPっぽいURLをそこからフィルタ・抽出（例えば"a8.net"でフィルタしたり、あるいは"aff"でフィルタしたり）して、他の人がどんなプログラムを採用しているのか分かればヒントになるかもしれない、と考えました。

ツールの動作と使い方

まずスクリプトを実行します。

スクリプトが実行されると、アクティブなウィンドウ（一番全面にあるウィンドウ）の全てのタブの情報を自動で取得し、リンク抽出の処理も行った上でログをし終了します。

（画像左側出典： "Webkaru"さま）

ログ上でオブジェクトをコピーすると、JSON形式でコピーされます。

コピーされたJSONをテキストエディタで開き、Ctrl-Fで検索してみます。

するとa8.netのリンクも何件が見つけることができました。他にもmoshimo（もしもアフィリエイト）など使われているサイトもありました。

（画像右側出典： "キツネの惑星"さま）

Google Chromeで開いている全てのタブ（ページ／HTML）の全てのリンク（URL）を取得（スクレイピング）する拡張機能

今回はリンクを取得しましたが、HTML上にある情報であれば制約なく取得することができます。例えば、HTML上にある全ての画像URLを取得することもできます。

あるいは、同一のリンクが重複している場合、重複を削除することもできますし、カウントし統計情報を追加することもできます。

開いている全てのタブの全てのリンクを取得するツール

全体のコードは以下のようになります。

(async () => {
    const sleep = m => new Promise(r => setTimeout(r, m));
    const moment = (await import('https://cdn.jsdelivr.net/npm/moment@2.29.4/+esm')).default;
    const axios = (await import('https://cdn.skypack.dev/axios@1.4.0')).default;
    const URLParse = (await import('https://cdn.skypack.dev/url-parse@1.5.10')).default;
    const uuid = (await import('https://cdn.skypack.dev/@lukeed/uuid@2.0.1')).v4;
    const jsyaml = (await import('https://cdn.skypack.dev/js-yaml@4.1.0')).default;
    const script = (await axios.get(`http://localhost:8080/web/lib/utils.js?ts=${(+new Date())}`)).data;
    eval(script);

    app.console.setLogPrefix("[Link Scraper]");

    app.console.warn("waiting... (a window)");
    let activeWindowTabs;
    for (;;) {
        activeWindowTabs = await ChromeUtils.getActiveWindowTabs();
        await sleep(200);
        if (activeWindowTabs.length >= 1) break;
    }
    
    app.console.info({activeWindowTabs, });

    let detailedTabs = [];
    for (let tab of activeWindowTabs) {
        let outerHTML = await ChromeUtils.exec(tab.id, `document.documentElement.outerHTML`);
        outerHTML = outerHTML?.[0];
        const parser = new DOMParser();
        const doc = parser.parseFromString(outerHTML, 'text/html');
        let links = Array.from(doc.getElementsByTagName('a')).map(link => link.href);
        let linksWithTexts = Array.from(doc.getElementsByTagName('a')).map(link => { return { text: link.innerText, link: link.href }})
        detailedTabs.push({
            ...tab,
            linksWithTexts,
        });
    }

    app.console.info(detailedTabs)
    app.console.info("y.");
})();

（プロダクトには上記コードには含まれない、上記のコードと依存関係にある私の自作ライブラリも付属します。）

まとめ

このツールを使うと、開いている全てのタブの全てのリンクを取得することができます。例えばこれを使って、他の人がどんなアフィリエイトプログラムを使っているのか、どんな広告を貼っているのか、を調べることができます。他にも様々な使い方があると思います。