Mods—改造? ゲーム好きなら、改造されたゲームをプレイすることほど楽しいものはないことをご存知でしょう。お気に入りのゲームですが、さらなるパワー、機能、楽しさが備わっています。次に、同じ興奮を Web ブラウジング体験にもたらすことを想像してみてください。ブラウザ拡張機能はまさにそれです。ブラウザ拡張機能はブラウザの MOD のようなもので、これまで不可能だと考えられなかった方法でブラウザを強化します。

Chrome 拡張機能を使用すると、特定の URL をブロックしたり、新機能を追加したり、まったく新しい外観を与えたりするなど、ニーズに合わせてブラウザを調整できます。そして一番いいところは？これらの拡張機能は自分で構築できます。このガイドでは、独自の Chrome 拡張機能を作成するプロセスを段階的に説明します。

Web 拡張機能を使い始めるのは、思っているよりも簡単です! JavaScript を知っていれば、新しい API を学ぶだけで簡単に始めることができます。結局のところ、中核は依然として JavaScript です。

この記事は次の補足です: Chrome 拡張機能ハンドブック: メモリを大量に使用するものから運用環境に対応するものまで

目次

• ウェブ拡張機能 101
• マニフェストの詳細:
• シンプルな画像ダウンローダーの構築
• ダウンロード機能:
• 拡張機能をテストする準備ができました
• 拡張機能のロード
• 結論

Web 拡張機能 101

Web 拡張機能は MOD に似ていますが、ブラウザー用です。ブラウザの動作 (AdBlock など) や、Mozilla テーマなどの外観を完全にカスタマイズできます。

まず、新しいフォルダーを作成してください!

必要なのは、manifest.json だけです。これはメイン機能ですが、Web 拡張機能用です。これはブラウザが最初に探すファイルです!

{
    "manifest_version": 3,
    "name": "img-downl",
    "version": "1.0",
    "description": "image ac?",
    "content_scripts": [
        {
            "matches": [""],
            "js": ["content.js"]
        }
    ],
    "permissions": [
        "activeTab"
    ]
}

マニフェストには、拡張機能のすべてのメタデータが含まれています。これは、ブラウザが拡張機能をどのように理解し、何ができるかを表します。

マニフェストの詳細:

• "manifest_version": 3、 これにより、使用する API バージョンがブラウザーに通知されます。バージョン 2 が前のもので、バージョン 3 (V3) が最新の API です。安全性とパフォーマンスが向上しており、Chrome を含むほとんどのブラウザはバージョン 3 のみに移行しています。

重要な違いの 1 つは、永続的なバックグラウンド スクリプトから Service Worker への移行です。 V2 のバックグラウンド スクリプトは、拡張機能の存続期間全体 (ユーザーがブラウズしている間) に実行されるため、「永続的」な側面があります。 V3 では、必要な場合にのみ実行されます!

• コンテンツ スクリプト: コンテンツ スクリプトは Web ページ自体に挿入されます。この小さな拡張機能では、「matches」: [""] に一致する URL に content.js が挿入されます。したがって、任意の URL を参照するか、新しいタブを開くと、content.js がページに挿入されて実行されます。

コンテンツ スクリプトは、バックグラウンド スクリプトとは異なり、DOM にアクセスできます。

これは、単純なプラグインの基本的な構造です。さらに拡張プロジェクトを構築するにつれて、権限と追加機能について学習します。導入としては、この簡単な内訳で十分です。

シンプルな画像ダウンローダーの構築

準備ができて？

この拡張機能は、私が少し前に受講したコンピューター ビジョンのコースからインスピレーションを得たものです。 Google 検索から画像をダウンロードするツールを実装する必要がありました。

注: 閲覧するたびに画像をダウンロードする場合を除き、この拡張機能を常に実行しておくことはお勧めしません。

manifest.json と同じフォルダーに content.js を作成し、次の内容を貼り付けます:

async function processAllImages() {
    const images = document.querySelectorAll('img');
    let count = 0;
    for (const img of images) {
        const url = img.src;
        const filename = `image${count  }.png`; // Generate a filename for each image
        try {
            await downloadImage(url, filename);
            console.log(`Downloaded ${filename}`);
        } catch (error) {
            console.error(`Error downloading image from ${url}:`, error);
        }
    }
}
// Run the function to process and download images
processAllImages();

コンテンツ スクリプトは Web ページに挿入されることに注意してください。たとえば、example.com に移動すると、processAllImages が実行されます。

すべての画像要素を取得してダウンロード関数に渡すだけです:

const images = document.querySelectorAll('img');

ダウンロード機能:

async function downloadImage(url, filename) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (!response.ok) throw new Error('Network response was not ok.');
                return response.blob();
            })
            .then(blob => {
                const a = document.createElement('a');
                a.href = URL.createObjectURL(blob);
                a.download = filename;
                a.style.display = 'none';
                document.body.appendChild(a);
                a.click();
                URL.revokeObjectURL(a.href); // Clean up the object URL
                document.body.removeChild(a);
                resolve();
            })
            .catch(error => reject(error));
    });
}

注: これは静止画像に対してのみ機能します。動的イメージや遅延ロードされたイメージは破損する可能性がありますが、それは今後の反復で対処できるものです。

拡張機能をテストする準備ができました

私は Chrome ベースの Brave を使用していますが、プロセスはどのブラウザでも同様です。

テストするには、選択したブラウザで開発者モードを有効にする必要があります。

拡張機能のロード

Chrome 名前空間に依存していないため、この拡張機能は変更せずに Mozilla でも動作するはずです。

勇敢な：

アドレスバーに「brave://extensions/」と入力します。        

開発者モードを有効にします。      

フォルダーを選択して拡張機能を読み込みます。
             

Chrome および Edge: Brave と同様の手順に従います。

(chrome://extensions/ またはedge://extensions/)

結論

MOD—改造は楽しいです!この拡張機能は単純かもしれませんが、開始するための基本を示しています。 Mozilla の MDN には、Web 拡張機能 (一般的な Web 拡張機能とブラウザ固有の両方) の知識をさらに深めるのに最適なリソースがあります。

覚えておいてください: 不要なダウンロードを避けるために、完了したら拡張機能をオフにするかアンインストールしてください。

さらに良いのは…

課題: 入力 (ヒント: クリック、アイコン、および背景スクリプト) を受け取り、ユーザーがボタンをクリックしたときにのみプロセス画像関数を実行する方法を考え出します。