Panduan Pemula untuk Membina Skrip Kandungan

Pelanjutan penyemak imbas ialah alat tambah kepada penyemak imbas yang digunakan untuk menambah estetika pada tapak dan juga memberikan pengalaman pengguna yang optimum.
Konsep skrip kandungan dalam pembangunan sambungan adalah pengetahuan yang cukup berguna untuk diperoleh oleh pembangun kerana ia telah mengembangkan kes penggunaan sambungan penyemak imbas dengan ketara.

Artikel ini bertujuan untuk memperkenalkan skrip kandungan dan cara ia berfungsi. Terdapat juga projek demo di mana asas sambungan krom akan dibincangkan dan skrip kandungan mudah akan digunakan dalam sambungan kami. Dengan itu, mari kita mulakan.

Memahami Skrip Kandungan

Pertama sekali, apakah itu skrip kandungan? Skrip kandungan ialah kod JavaScript yang pada interaksi dengan halaman web melalui sambungan penyemak imbas, dilaksanakan untuk mengubah suai halaman web.

Ia mencapai ini dengan mudah dengan berinteraksi dengan model objek dokumen halaman web. Model objek dokumen halaman web ialah struktur mentah halaman web yang diberikan. Cara skrip kandungan Chrome bertindak untuk mengubah suai halaman web yang dimaksudkan biasanya dipanggil suntikan.

Setelah mempunyai pengenalan ringkas kepada skrip kandungan, kami kemudiannya akan melaksanakannya pada halaman web kami. Tetapi sebelum itu, kami perlu menyediakan sambungan penyemak imbas kami yang akan menguasakan skrip.

Menyediakan Sambungan Chrome Anda

Menyediakan fail sambungan Chrome agak mudah. Untuk rujukan lanjutan bangunan rujukan, dilampirkan di bawah adalah pautan ke halaman dokumentasi sambungan Chrome.
Sambungan Chrome yang ideal mesti mengandungi fail manifest.json yang terperinci dengan baik yang menyediakan maklumat latar belakang lalai tentang sambungan Chrome.
Selain itu, fail JS yang sesuai untuk dilaksanakan turut disertakan. Fail tambahan lain (HTML dan CSS) membantu memberikan estetika pada sambungan.
Dengan itu, mari kita teruskan membina sambungan kami, menggabungkan suntikan skrip kandungan kami. Kami akan menggambarkan kuasa skrip kandungan dengan mencipta sambungan Chrome yang memaparkan tindanan butang pada mana-mana halaman web aktif yang kami navigasi.

Menulis fail Manifes

Dalam bahagian ini, bahagian fail manifes akan diserlahkan dan dibincangkan. Berikut ialah kod kepada fail manifes untuk projek itu.

{
    "manifest_version": 3,
    "name": "Add Button",
    "version": "1.0",
    "description": "An extension that alerts a response when clicked",
    "permissions": ["activeTab"],
    "content_scripts": [
{
        "matches": ["<all_urls>"],
        "js": ["ContentScript.js"],
        "CSS": ["Button.css"]
}
]
}

Versi manifes: Versi manifes biasanya diminta. Secara lalai, ia ditetapkan kepada 3. kerana ia merupakan peningkatan ketara yang lebih baik daripada versi 2.
Nama: Nama sambungan juga ditaip dalam fail manifes. Dalam kes saya, projek itu dinamakan butang Tambah. Itu boleh diubah suai mengikut keutamaan pengguna.
Versi sambungan Chrome juga dimasukkan. Dalam kes kami, ini ialah versi pertama sambungan maka ia dinamakan 1.0, penambahbaikan seterusnya pada sambungan ini boleh menggesa mengubah suai fail untuk meningkatkan versi masing-masing.
Perihalan: Penerangan tentang perkara yang dilakukan oleh sambungan itu juga memberikan kepercayaan kepada sambungan Chrome kepada pengguna bukan teknikal sambungan itu.

Mata yang dibangkitkan seterusnya cukup meyakinkan dalam membina skrip kandungan.

Objek kebenaran menyerlahkan laluan untuk pelaksanaan skrip kandungan. Ini juga menghalang skrip kandungan daripada berjalan dalam tab dan halaman web yang tidak dijangka. Ia membolehkan kami menyenaraikan semua kebenaran yang mungkin diperlukan oleh sambungan Chrome kami. Sesetengah sambungan Chrome mungkin memerlukan akses kepada storan penyemak imbas, API Chrome lain dan beberapa tapak yang berkenaan. Dalam kes kami untuk projek ini, kami mengehadkan sambungan Chrome kami kepada hanya tab penyemak imbas aktif yang digunakan. Adalah penting untuk menyediakan perkara ini untuk mengurangkan risiko sambungan Chrome menjejaskan bahagian lain penyemak imbas Chrome kami yang tidak digunakan.

Kami kemudian akan mengkonfigurasi medan skrip kandungan dalam fail manifes kami.
Medan skrip kandungan menentukan pelbagai fail kod yang kami ingin masukkan ke dalam halaman web kami.
Ia mengandungi sub medan padanan yang menentukan URL halaman web yang kami mahu ia bertindak. Untuk kemudahan penggunaan, kami hanya memasukkan semua URL yang membenarkan ini bertindak pada semua halaman web yang kami akses. Walau bagaimanapun, anda boleh menentukan URL yang anda ingin masukkan dalam nilai subfield. Cth www.google.com,

"matches": ["https://*.google.com/*"]
run_at": "document_idle

Fail JS yang mengandungi kod suntikan juga ditentukan. Dalam kes kami,
Fail JS kami dinamakan Content script.js. Kami juga menentukan fail CSS yang digunakan dalam menggayakan projek ini.

Dengan ini, kami telah melaksanakan miniatur fail manifes untuk projek kami. Kami kemudian akan terus menulis kod suntikan kami di bahagian seterusnya

Mencipta Skrip Kandungan

Dalam semangat memastikan perkara mudah, kami akan mencipta butang ringkas yang apabila diklik, menunjukkan mesej amaran. Butang ini dijangka menindih halaman web sedia ada.
Berikut ialah kod di bawah

// Create a button element
const button = document.createElement("button");

// Set the button's text content
button.textContent = "Click me";

// Set the button's ID
button.id = "clickMe";

// Append the button to the document body
document.body.appendChild(button);

// Add a click event listener to the button
button.addEventListener("click", () => {
  // Show an alert when the button is clicked
  alert("Click event listener was added");

  // Log a message to the console
  console.log("Hello world");
});

The styling can be changed to suit your preference however a styling template has been included in the code repository.

here is a picture of its implementation.

Here is the link to the source code containing the code styling.

Advanced Techniques and Use Cases

So far we have completed the project. However to advance one's knowledge, here are some of the advanced techniques and best practices you can also implement while building content scripts.

• Cross-interaction with browser background scripts
• Implementation of data state managers to allow for dynamic scripting
• Integrating other external APIs allows for data manipulation and analysis
• Employing caching strategies in order to optimize extension performance
• Integrating Content scripts with service workers

Conclusion

You can also interact with me on my blog and check out my other articles here. Till next time, keep on coding!

Atas ialah kandungan terperinci Panduan Pemula untuk Membina Skrip Kandungan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!