Bir Chrome genişlənməsi yazmaq, xüsusən də üç fərqli süni intellekt söhbət interfeysini (ChatGPT, Claude, Gemini) eyni anda izləmək məcburiyyətindəsinizsə, gözlədiyinizdən daha çox baş ağrısı gətirə bilər. Tərtibatçı Julie DeChili, bu üç platformada HTML kod bloklarını aşkarlayıb birbaşa canlı URL-ə yerləşdirən genişlənmə üzərində işləyərkən 5 vacib dərs öyrənib. Gəlin onun təcrübəsindən nəticə çıxaraq.
1. MutationObserver kifayət deyil — debounce etmək lazımdır
Söhbət interfeyslərinin heç biri cavabı bir dəfəyə göstərmir — tokenlər axınla gəlir. Bu o deməkdir ki, DOM hər dəfə observer işə düşəndə natamam olur. Əvvəlcə Julie, <pre><code> blokunu görən kimi tutmağa çalışıb, amma nəticədə HTML-in yarısını itirib. Daha sonra o, DOM-un 'sabit olması' anlayışına keçib:
let debounceTimer; const observer = new MutationObserver(() => { clearTimeout(debounceTimer); debounceTimer = setTimeout(scanForCodeBlocks, 600); }); observer.observe(document.body, { childList: true, subtree: true });600 millisaniyə ərzində DOM-da heç bir dəyişiklik olmazsa, kod blokunun tamamlandığı qəbul edilir. Bu, hər üç platformanın fərqli axın sürətinə uyğun gəlir.
2. Sinif adlarına güvənməyin — strukturla işləyin
ChatGPT, Claude və Gemini tez-tez ön plan yeniləmələri göndərir. Julie'nin seçdiyi .language-html, .hljs kimi sinif adları bir neçə həftə sonra işləməz hala gəlib. Daha etibarlı həll: <pre> içərisində <code> tapmaq və onun mətninin <!DOCTYPE və ya <html< ilə başladığını yoxlamaq. Bu, CSS siniflərinə bağlı deyil.
3. Düzgün kodu seçmək çətin ola bilər
AI cavabında birdən çox kod bloku ola bilər — tam HTML səhifəsi, CSS parçası, JavaScript düzəlişi. Sadəcə 'ilk <pre>ni götür' yanaşması səhvə yol aça bilər. Julie namizəd blokları bal sistemi ilə sıralayıb: <!DOCTYPE> və ya <html> varsa yüksək bal, <head>/<body> varsa orta bal, 50 simvoldan qısa bloklar isə atılır. Bu, yanlış pozitivləri kəskin azaldıb.
4. iframe təhlükəsizliyi: srcdoc kifayət deyil
Julie əvvəlcə HTML-i srcdoc ilə iframe'ə yerləşdirib, amma AI tərəfindən yaradılan səhifədə window.parent-ə çatan <script> problemi yaranıb. Həll: sandbox atributunu məhdudlaşdırmaq.
<iframe sandbox="allow-scripts allow-same-origin" srcdoc="..."> </iframe>Bu kiçik düzəliş, genişlənmənin cari səhifəyə girişi olan bir uzantıda böyük fərq yaradır.
5. İstifadəçi etibarı: şifrələr harda saxlanılır?
Genişlənmə işə düşdükdən sonra istifadəçilərin ən çox verdiyi sual 'FTP şifrəm hara gedir?' olub. Julie'nin cavabı: heç bir etimadnamə öz arxa planından keçirilmir. FTP üçün hər şey birbaşa genişlənmə ilə host arasında baş verir. Self-hosted qurğular üçün isə yüngül PHP agent skripti təklif edilir ki, istifadəçi öz serverinə yerləşdirir və şifrələr heç vaxt genişlənmə yaddaşında saxlanmır.
Bu genişlənmə 'HTML Deployer' adlanır — ChatGPT, Claude və Gemini tərəfindən yaradılan HTML-i Netlify, GitHub Pages, FTP və ya self-hosted hədəfə yerləşdirir. Əgər siz də bu cür problemlərlə qarşılaşmısınızsa, Julie fikirlərinizi şərhlərdə bölüşməyə dəvət edir.
