Membina Sambungan Chrome : Gambaran Keseluruhan Pantas

Mod—Pengubahsuaian? Jika anda meminati permainan, anda tahu tiada apa yang setanding dengan bermain permainan diubah suai. Ia adalah permainan kegemaran anda, tetapi dengan kuasa tambahan, ciri dan keseronokan. Sekarang, bayangkan membawa keseronokan yang sama kepada pengalaman menyemak imbas web anda. Itulah yang dilakukan sambungan penyemak imbas—ia seperti mod untuk penyemak imbas anda, mengecasnya dengan cara yang tidak pernah anda fikirkan.

Dengan sambungan Chrome, anda boleh mengubah suai penyemak imbas anda untuk memenuhi keperluan anda dengan sempurna—sama ada menyekat URL tertentu, menambah ciri baharu atau memberikannya rupa yang segar sepenuhnya. Dan bahagian yang terbaik? Anda boleh membina sambungan ini sendiri. Dalam panduan ini, saya akan membawa anda melalui proses langkah demi langkah untuk membuat sambungan Chrome anda sendiri.

---

Bermula dengan sambungan web adalah lebih mudah daripada yang anda fikirkan! Jika anda tahu JavaScript, mudah sahaja—hanya perlu mempelajari API baharu. Lagipun, ia masih menjadi asas JavaScript.

Artikel ini ialah tambahan untuk: Buku Panduan Sambungan Chrome: Memori-Berat hingga Sedia Pengeluaran

---

Jadual Kandungan

• Sambungan Web 101
• Memecahkan Manifes:
• Membina Muat Turun Imej Mudah
• Fungsi Muat Turun:
• Kami Bersedia Menguji Sambungan Kami
• Memuatkan Sambungan
• Kesimpulan

Sambungan Web 101

Pelanjutan web adalah seperti mod, tetapi untuk penyemak imbas. Anda boleh menyesuaikan sepenuhnya cara penyemak imbas berkelakuan—fikirkan AdBlock—atau rupanya, seperti tema Mozilla.

Untuk bermula, buat folder baharu!

Apa yang anda perlukan hanyalah manifest.json. Ia adalah fungsi utama tetapi untuk sambungan web. Ia adalah fail pertama yang dicari oleh penyemak imbas!

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

Manifes mengandungi semua metadata untuk sambungan anda. Beginilah cara penyemak imbas memahami sambungan anda dan perkara yang boleh dilakukannya.

---

Memecahkan Manifes:

• "versi_manifest": 3, Ini memberitahu pelayar versi API yang akan anda gunakan. Dengan versi 2 yang sebelumnya, versi 3 (V3) ialah API terkini. Ia lebih selamat dan berprestasi, dan kebanyakan penyemak imbas, termasuk Chrome, telah beralih ke versi 3 sahaja.

Satu perbezaan utama ialah peralihan daripada skrip latar belakang yang berterusan kepada pekerja perkhidmatan. Skrip latar belakang dalam V2 dijalankan sepanjang hayat sambungan (semasa pengguna menyemak imbas), oleh itu aspek "berterusan". Dalam V3, mereka hanya berjalan apabila perlu!

• Skrip Kandungan: Skrip kandungan disuntik ke dalam halaman web itu sendiri. Dalam sambungan kecil kami, content.js akan disuntik ke dalam mana-mana URL yang sepadan dengan "padanan": [""]. Jadi, apabila anda menyemak imbas ke mana-mana URL atau membuka tab baharu, content.js akan disuntik ke dalam halaman dan dijalankan.

Skrip kandungan, tidak seperti skrip latar belakang, mempunyai akses kepada DOM.

Ini adalah anatomi asas pemalam mudah. Semasa anda membina lebih banyak projek sambungan, anda akan belajar tentang kebenaran dan fungsi tambahan. Untuk pengenalan, pecahan ringkas ini sudah memadai.

---

Membina Pemuat Turun Imej Mudah

Bersedia?

Sambungan ini diinspirasikan daripada kursus penglihatan komputer yang saya ambil sebentar tadi. Kami dikehendaki melaksanakan alat untuk memuat turun imej daripada carian Google.

Nota: Saya tidak mencadangkan sambungan ini dijalankan pada setiap masa melainkan anda mahu memuat turun imej setiap kali anda menyemak imbas.

Dalam folder yang sama dengan manifest.json anda, buat content.js dan tampal yang berikut:

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();

Ingat, skrip kandungan disuntik ke dalam halaman web. Contohnya, apabila anda menavigasi ke example.com, processAllImages akan dijalankan.

Apa yang dilakukannya ialah ambil semua elemen imej dan hantarkannya ke fungsi muat turun:

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

---

Fungsi Muat Turun:

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));
    });
}

Nota: Ini hanya berfungsi untuk imej statik. Imej dinamik dan malas dimuatkan mungkin rosak—itulah sesuatu yang boleh anda kendalikan dalam lelaran akan datang.

---

Kami Bersedia untuk Menguji Sambungan Kami

Saya menggunakan Brave, yang berasaskan Chrome, tetapi prosesnya serupa merentas penyemak imbas.

Untuk menguji, anda perlu mendayakan mod pembangun dalam penyemak imbas pilihan anda.

---

Memuatkan Sambungan

Pelanjutan ini, tidak berubah, harus berfungsi dalam Mozilla juga kerana kami tidak bergantung pada ruang nama Chrome.

          Berani:        

              Taip brave://extensions/ dalam bar alamat.        

              Dayakan mod pembangun.      

              Muatkan sambungan dengan memilih folder.
             

   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 melanjutkan 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: Tentukan cara untuk menerima input (petunjuk: klik, ikon dan skrip latar belakang) dan jalankan fungsi imej proses hanya apabila pengguna mengklik butang.

Atas ialah kandungan terperinci Membina Sambungan Chrome : Gambaran Keseluruhan Pantas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!