Cara membuat sambungan krom dalam 10 minit rata

Tutorial ini memudahkan proses membina lanjutan Chrome, yang memberi tumpuan kepada mewujudkan "Molly-Guard" untuk CHATGPT untuk mengelakkan perkongsian maklumat sensitif secara tidak sengaja. Mari kita memecahkan langkah -langkah utama dan memperbaiki teks untuk kejelasan dan seo.

Bina jaring keselamatan chatgpt anda sendiri: Tutorial lanjutan krom mudah

bosan dengan tidak sengaja berkongsi data sensitif dengan chatgpt? Tutorial ini menunjukkan kepada anda bagaimana untuk membina lanjutan Chrome mudah-"Molly-Guard"-untuk melindungi privasi anda. Kami akan membimbing anda melalui lima langkah mudah, menggunakan teknologi web asas.

Takeaways utama:

• Perlindungan chatgpt: Belajar untuk membuat sambungan krom yang menghalang penyerahan mesej yang mengandungi kata -kata atau frasa sensitif yang ditentukan. Langkah-langkah yang mudah diikuti:
Tutorial ini memecah proses ke dalam langkah-langkah yang boleh diurus, sesuai untuk pemula.
• Pengalaman pengguna yang dipertingkatkan:
Pelanjutan memberikan isyarat visual, meningkatkan keselamatan dan kebolehgunaan.
Apa yang kita bina:

pembantu AI sangat membantu, tetapi penyisihan yang tidak disengajakan adalah kebimbangan sebenar. Lanjutan "Molly-Guard" ini bertindak sebagai jaring keselamatan. Anda menentukan senarai perkataan atau frasa sensitif. Jika anda cuba menghantar mesej yang mengandungi kata -kata ini, pelanjutan akan melumpuhkan butang hantar, menghalang pendedahan yang tidak disengajakan.

Sebelum anda memulakan:

akaun chatgpt (pendaftaran percuma tersedia).

pemahaman asas HTML, CSS, dan JavaScript.

• Kod untuk tutorial ini boleh didapati di GitHub (pautan ke repo github di sini).
• Apakah lanjutan krom?

Pelanjutan Chrome adalah program kecil yang meningkatkan pengalaman melayari krom anda. Mereka dibina menggunakan HTML, CSS, dan JavaScript dan berkisar dari alat mudah ke aplikasi yang kompleks. Ramai yang boleh didapati di kedai web Chrome. Untuk menyelam yang lebih mendalam, rujuk dokumentasi rasmi Google (pautan ke dokumentasi Google di sini). Tutorial ini menggunakan skrip kandungan , yang membolehkan interaksi dengan kandungan laman web tertentu (dalam kes ini, chatgpt).

Langkah 1: Menyediakan fail lanjutan anda

Buat folder baru bernama dan tambahkan fail ini:

• manifest.json: metadata mengenai pelanjutan anda (nama, versi, kebenaran, dan lain -lain).
• contentScript.js: kod javascript utama yang memantau input chatgpt.
• wordsList.js: Senarai kata -kata sensitif anda (mudah disesuaikan).
• styles.css: (pilihan) Styling untuk isyarat visual.

Langkah 2: Fail manifest.json

Fail JSON ini memberitahu Chrome mengenai pelanjutan anda. Tampalkan kod ini ke manifest.json:

{
  "manifest_version": 3,
  "name": "ChatGPT Molly-guard",
  "version": "1.0",
  "description": "Prevents submission of messages containing sensitive words.",
  "content_scripts": [
    {
      "matches": ["https://chat.openai.com/*"],
      "css": ["styles.css"],
      "js": ["wordsList.js", "contentScript.js"]
    }
  ]
}

unsur -unsur manifes utama dijelaskan:

• "manifest_version": Menentukan versi format fail manifes (Gunakan 3).
• "name", "version", "description": Maklumat asas mengenai pelanjutan anda.
• "content_scripts": mentakrifkan skrip mana yang hendak dijalankan di mana laman web ("https://chat.openai.com/*" mensasarkan chatgpt).

Langkah 3: Fail contentScript.js

Skrip ini memantau medan input ChatGPT. Tampalkan kod ini ke contentScript.js:

// ... (Debounce function and other code as provided in the original input) ...

(termasuk kod penuh contentScript.js dari input asal di sini)

Kod ini menggunakan fungsi debounce untuk memeriksa dengan cekap kata -kata sensitif dan mengemas kini UI dengan sewajarnya (melumpuhkan butang hantar dan menambah sempadan merah). Delegasi acara digunakan untuk mengendalikan kemas kini UI dinamik di CHATGPT.

Langkah 4: Styling dengan styles.css

tambahkan kod ini ke styles.css untuk isyarat visual:

.forbidden-div {
  border: 2px solid red !important;
  background-color: #ffe6e6 !important;
}

Gaya ini kawasan input apabila kata -kata sensitif dikesan. !important memastikan gaya menimpa gaya chatgpt sedia ada.

Langkah 5: Menguji pelanjutan anda

1. Buka chrome://extensions/.
2. Dayakan "Mod Pemaju."
Klik "Beban Unpacked."
3. Pilih folder
.
4. chatgpt-molly-guard

menguji pelanjutan anda di chatgpt. Jika semuanya berfungsi, anda akan melihat sempadan merah dan butang hantar kurang upaya apabila anda menaip perkataan sensitif. Muat semula pelanjutan menggunakan ikon anak panah pekeliling jika anda membuat perubahan.

Muat semula pelanjutan selepas membuat perubahan:

Mengambilnya lebih jauh:

• antara muka pengguna: tambah pop timbul untuk menguruskan senarai perkataan sensitif.
• tampal pengendalian: mengesan teks yang disisipkan untuk kata -kata sensitif.
• override kontekstual: Benarkan sementara melumpuhkan molly-guard.

Kesimpulan:

Membina sambungan krom lebih mudah daripada yang anda fikirkan! Ini "Molly-Guard" yang mudah menunjukkan bagaimana beberapa baris kod dapat meningkatkan keselamatan dalam talian anda dengan ketara. Ingatlah untuk berunding dengan dokumentasi Google untuk ciri -ciri yang lebih canggih.

(termasuk bahagian Soalan Lazim dari input asal di sini)

Respons yang disemak ini menyediakan tutorial yang lebih berstruktur dan mesra pengguna, meningkatkan kebolehbacaan dan SEO dengan menggunakan kata kunci dan tajuk yang relevan. Ingatlah untuk menggantikan pautan tempat letak dengan pautan sebenar ke GitHub dan dokumentasi Google.

Atas ialah kandungan terperinci Cara membuat sambungan krom dalam 10 minit rata. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!