Chrome 拡張機能の構築 : 概要

MOD—改造? ゲーム好きなら、改造されたゲームをプレイすることほど楽しいものはないことをご存知でしょう。お気に入りのゲームですが、さらなるパワー、機能、楽しさが備わっています。では、同じ興奮を 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": ["<all_urls>"],
            "js": ["content.js"]
        }
    ],
    "permissions": [
        "activeTab"
    ]
}

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

---

マニフェストの詳細:

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

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

• コンテンツスクリプト: コンテンツ スクリプトは Web ページ自体に挿入されます。この小さな拡張機能では、「matches」: ["<all_urls>"] に一致する 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 dan Edge: Ikuti langkah yang sama seperti Brave.

         (chrome://extensions/ atau edge://extensions/)

     

---

Kesimpulan

Mod—Pengubahsuaian memang menyeronokkan! Sambungan ini mungkin mudah, tetapi ia menunjukkan asas untuk memulakan anda. MDN Mozilla mempunyai sumber yang sempurna untuk menambah pengetahuan anda tentang sambungan web (kedua-dua sambungan web umum dan khusus penyemak imbas).

Ingat: Matikan sambungan atau nyahpasangnya apabila anda selesai untuk mengelakkan muat turun yang tidak diingini.

Atau lebih baik lagi…

Cabaran: Cari cara untuk menerima input (petunjuk: klik, ikon dan skrip latar belakang) dan jalankan fungsi imej proses hanya apabila pengguna mengklik butang.

以上がChrome 拡張機能の構築 : 概要の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。