המלצה | ✨חסכו שעות עבודה עם ClarityAI: התוסף שמסכם, מתרגם ומסביר כל דף אינטרנט בשבילכם✨
-
@יוסי-רחמים תודה על גרסה 1.0.7! משהו מיוחד! ותודה גם על הX שהוספת בכפתור הצף.
אני חושב שכדאי להוסיף כזה X גם על סרגל הכלים בסימון טקסט (כמובן עם עיצוב מתאים), כי לפעמים הוא 'נתקע' באזור שמסתיר משהו וא"א להוריד אותו.
תודה על הכל!@לאצי כתב בהמלצה |
חסכו שעות עבודה עם ClarityAI: התוסף שמסכם, מתרגם ומסביר כל דף אינטרנט בשבילכם:אני חושב שכדאי להוסיף כזה X גם על סרגל הכלים בסימון טקסט (כמובן עם עיצוב מתאים), כי לפעמים הוא 'נתקע' באזור שמסתיר משהו וא"א להוריד אותו.
בסוף כל דבר יהיה עם איקסים
בעז"ה בגירסא הבאה
-
האם אתם, כמונו, נלהבים מהיכולות של LLMs ומוקסמים מהאופן שבו הם יכולים לשנות את זרימת העבודה? ב-ClarityAI Smart Tools, לקחנו את הקסם הזה צעד קדימה: שילוב עמוק ורספונסיבי של AI ישירות בתוך חווית הגלישה שלכם. אבל איך עושים את זה מבלי להקריב ביצועים, פרטיות או חווית משתמש? בואו נצלול פנימה.
בבסיסו, ClarityAI אינו רק "וובסייט" שרץ ב-iframe. הוא מערכת מלאה, מבוזרת, שתוכננה מראש להתגבר על אתגרי הסנדבוקסינג של הדפדפנים, תקשורת אסינכרונית וניהול משאבים:
1. ה-Frontend: אינטליגנציה בתוך ה-DOM
️
content.js - ה"זרועות" וה"עיניים" של ה-AI:
זהו הלב הפועם של האינטגרציה באתרים. הוא מוזרק לכל טאב ומופקד על:
הזרקת UI דינמית: כפתור ה-FAB הצף (Fluid Action Button), ה-Tooltip החכם בסימון טקסט, ובאנר ה"תובנות מהירות".
לכידת אירועי DOM:
זיהוי סימון טקסט, ריחוף על תמונות, ושינויים במבנה הדף (באמצעות MutationObserver) כדי לזהות ניווט ב-SPAs או טעינת תוכן חדש.
חילוץ תוכן:
קריאת תוכן הדף והכנתו לשליחה למודל ה-AI.
תקשורת Cross-Context:
שליחת בקשות ל-Service Worker (רקע) וקבלת תגובות, תוך ניהול Promises.
sidepanel.js - מרכז הבקרה האינטראקטיבי:
מופעל בחלונית הצדדית של הדפדפן. הוא מנהל את:
ממשק הצ'אט:
הצגה ועיבוד הודעות AI בסטרימינג, שמירת היסטוריית צ'אט מקומית.
אינטגרציית קבצים:
טיפול בהעלאת תמונות או קבצי אודיו לניתוח AI (למשל, תמונה בצ'אט).
ניהול סשנים:
טעינה ושמירה של שיחות עבר, מתן אפשרות לשינוי שם.
טעינת הקשר:
קבלת הקשר מיידי מה-content.js של הטאב הפעיל להמשך שיחה.
options.js - מטה-שליטה בהגדרות:
️ דף ההגדרות של התוסף. מטפל ב:
Persistence:
אחסון הגדרות המשתמש, סטטיסטיקות שימוש וקטעים שמורים (Snippets) ב-chrome.storage.local.
ניהול מודלים: 🧠 בחירה דינמית של מודלים לכל משימה (Gemini, Gemma, Custom), ואתגר הניתוב החכם (Smart Mode) שמחליט באיזה מודל להשתמש.
אימות מפתח API:
אימות מפתחות API מול שרתי Google AI ישירות מהלקוח.
סינכרון הגדרות:
️ אינטגרציה עם שירות ענן לניהול משתמשים וסנכרון מאובטח של הגדרות.
2. ה-Service Worker (background.js) - המוח הנסתר
זהו רכיב הליבה של התוסף, שרץ ברקע ומהווה את ה"מנוע" לכל הפעולות הכבדות והרב-ממדיות:
מרכז תקשורת (IPC):
נקודת המפגש לכל ההודעות הנכנסות מכל חלקי התוסף (Content Scripts, Side Panel, Options). הוא מנתב בקשות AI, שומר נתונים ועוד.
פרוקסי ל-AI API:
כל בקשות ה-AI עוברות דרכו. אם אין למשתמש מפתח API אישי, הוא מנתב את הבקשה לשרת ה-PHP שלנו, המאוחסן על פלטפורמת ענן סקיילבילית. אם יש מפתח אישי, הוא שולח ישירות ל-Google AI Studio.
ניהול מצב גלובלי:
אחראי על chrome.storage (local ו-session) לשמירת נתונים, סטטיסטיקות שימוש (כולל דוחות שבועיים אוטומטיים).
טיפול באירועי מערכת:
Context Menus (תפריט ימני), Browser Actions (לחיצה על אייקון התוסף), Alarms (למשל, לשליחת דוחות אוטומטיים).
chrome.offscreen Document - הקסם השחור של עיבוד תמונות:
️ זהו חידוש ב-Manifest V3. מכיוון ש-Service Workers לא יכולים לגשת ל-DOM (ולכן לא יכולים לעבד תמונות ב-Canvas), אנחנו מרימים דוקומנט Offscreen נסתר. כשהמשתמש בוחר אזור בתמונה או במסך, ה-Service Worker מצלם את המסך, שולח את התמונה לדוקומנט ה-Offscreen, שם היא נחתכת באמצעות Canvas API, ואז מוחזרת כ-Base64 ל-Service Worker לשליחה ל-AI. זהו פתרון אלגנטי שמגשר על פערים קריטיים.
3. ה-Backend (main-ai.php, 15flash.php, gamma.php) - השער חסר-המצב
"Proxy" למי שאין API Key:
️ השרת שלנו, שהוא יישום PHP המאוחסן על פלטפורמת ענן חסכונית ויעילה, משמש כמעבר אנונימי עבור משתמשים שבוחרים לא להזין מפתח API אישי.
Cost-Efficiency:
במקום שכל משתמש יצרוך מכסות ישירות מספק ה-AI (שעלולה להיות יקרה או מוגבלת), אנחנו מנהלים את התעבורה בצורה מרוכזת.
Statelessness: השרת אינו שומר שום מידע על המשתמש או על השיחות. הוא מקבל בקשה, מנסח פרומפט (אם נדרש), שולח לספק ה-AI, ומעביר את התגובה בסטרימינג חזרה לדפדפן. זה קריטי לאבטחה ולפרטיות.
ניהול מודלים: 🧩 ה-Backend גם יודע לנתב בקשות למודלים שונים (למשל, Gemma-3-27B-IT מול Gemini-1.5-Flash-Latest), בהתאם ללוגיקת ה-Smart Mode שלנו, תוך התחשבות במגבלות המודלים (למשל, Gemma לא תומך ב-Tools או System Instruction).
אתגרים מרכזיים ופתרונות הנדסיים:
ביצועים וסטרימינג: מכיוון שתגובות AI יכולות להיות ארוכות, הכל מבוסס על סטרימינג (Server-Sent Events) ל-Backend ול-Frontend, מה שיוצר חווית "מכונת כתיבה" רספונסיבית.
ניהול קונטקסט:
️ שמירה על הקשר (שיחה/דף) בין בקשות AI שונות, כולל העברת קונטקסט מורכב בין קומפוננטות התוסף.
פרטיות ואבטחה:
️ מפתחות API אישיים נשמרים ב-chrome.storage.local (מוצפנים ע"י הדפדפן) ולא עוברים בשרת שלנו. ה-Backend הוא Stateless ואינו מאחסן נתוני משתמש.
חווית משתמש חלקה: הימנעות מ"ריצוד" DOM או התנגשויות CSS/JS עם אתרים, על ידי הזרקה סלקטיבית של אלמנטים ושימוש ב-Shadow DOM (במקומות מסוימים).
אירועי רשת ו-Retry Logic
לוגיקת Retry מובנית לבקשות AI כושלות, וטיפול איתן בשגיאות רשת.
אופטימיזציית משאבים:
ניהול חכם של Service Worker (שאינו "חי" כל הזמן), ושימוש ב-offscreen document רק כשצריך.
הבנייה של ClarityAI היא מסע מרתק של הנדסת תוכנה. הוא משלב ידע מעמיק בתקני Web Extensions, ארכיטקטורות Backend מודרניות, אינטגרציית AI חכמה ועקרונות חווית משתמש מתקדמים.
מקווים שזה נתן לכם הצצה מעניינת אל מאחורי הקלעים! 🧐 נשמח לשמוע מכם – אילו אתגרים הנדסיים מעניינים אתכם במיוחד כשזה מגיע לבניית כלים מבוססי AI?
הורידו את ClarityAI והתחילו להבין עמוק יותר:
🧠
https://chromewebstore.google.com/detail/clarityai-smart-tools/cglajpafddcffakjmpijpdhlhdkgdebc -
תוקן הבאג בטמו?
תודה רבה -
תוקן הבאג בטמו?
תודה רבה@שלמה-ברייר כתב בהמלצה |
חסכו שעות עבודה עם ClarityAI: התוסף שמסכם, מתרגם ומסביר כל דף אינטרנט בשבילכם:תוקן הבאג בטמו?
תודה רבהעדיין לא
-
@שלמה-ברייר כתב בהמלצה |
חסכו שעות עבודה עם ClarityAI: התוסף שמסכם, מתרגם ומסביר כל דף אינטרנט בשבילכם:תוקן הבאג בטמו?
תודה רבהעדיין לא
@יוסי-רחמים
יש כבר גירסה אחרי גרסה אחרי 1.0.6? -
@יוסי-רחמים
יש כבר גירסה אחרי גרסה אחרי 1.0.6?@smct
1.0.7 -
@smct
1.0.7@יוסי-רחמים
יש מצב אתה מעלה לי כי אני בנטפרי? -
@יוסי-רחמים
יש מצב אתה מעלה לי כי אני בנטפרי?@smct אין אפשרות שנטפרי יפתחו את זה קבוע?
-
@smct אין אפשרות שנטפרי יפתחו את זה קבוע?
@יוסי-רחמים
כרגע אין לי אפשרות לשלוח להם לבדיקה -
@יוסי-רחמים
כרגע אין לי אפשרות לשלוח להם לבדיקה -
@יוסי-רחמים
זה בכלל אתר שלא יכול להפתח בנטפרי -
@יוסי-רחמים
זה בכלל אתר שלא יכול להפתח בנטפרי@smct כתב בהמלצה |
חסכו שעות עבודה עם ClarityAI: התוסף שמסכם, מתרגם ומסביר כל דף אינטרנט בשבילכם:@יוסי-רחמים
זה בכלל אתר שלא יכול להפתח בנטפרישלי או זה?מה שעכשיו פירסמתי זה קישור ישירות לCRX מהשרתים של גוגל ולא לאתר שלי
-
@smct כתב בהמלצה |
חסכו שעות עבודה עם ClarityAI: התוסף שמסכם, מתרגם ומסביר כל דף אינטרנט בשבילכם:@יוסי-רחמים
זה בכלל אתר שלא יכול להפתח בנטפרישלי או זה?מה שעכשיו פירסמתי זה קישור ישירות לCRX מהשרתים של גוגל ולא לאתר שלי
@יוסי-רחמים האתר שהבאת בפוסט האחרון חסום בנטפרי ללא אפשרות לפתיחה
-
@יוסי-רחמים האתר שהבאת בפוסט האחרון חסום בנטפרי ללא אפשרות לפתיחה
@smct זה קישור ישירות לשרתים של גוגל... מה אני יעשה? אם זה לא פתוח אז זה אומר שאתה לא יכול להתקין שום דבר מחנות כרום...
-
@smct זה קישור ישירות לשרתים של גוגל... מה אני יעשה? אם זה לא פתוח אז זה אומר שאתה לא יכול להתקין שום דבר מחנות כרום...
@יוסי-רחמים
להתקין תוספים מחנות כרום אני יכול אבל יכול להיות שמישהו שלח להם בקשת בדיקה של התוסף הזה והם חסמו אותו -
@יוסי-רחמים
להתקין תוספים מחנות כרום אני יכול אבל יכול להיות שמישהו שלח להם בקשת בדיקה של התוסף הזה והם חסמו אותו@smct אין שום פיתרון מאשר כל פעם להעלות CRX כל גירסא?
דרך אגב אם לא מתקינים מכרום אז כרום לא מזהה את זה בתור התקנה ומעלה את המספר משתמשים... -
@smct אין שום פיתרון מאשר כל פעם להעלות CRX כל גירסא?
דרך אגב אם לא מתקינים מכרום אז כרום לא מזהה את זה בתור התקנה ומעלה את המספר משתמשים...@יוסי-רחמים
כנראה אפשר לנסות לפתוח את האתר שלך אבל לא בטוח שיפתחו -
@יוסי-רחמים
כנראה אפשר לנסות לפתוח את האתר שלך אבל לא בטוח שיפתחו@smct אבל גם הוא מוריד דרך הקישור שקודם הבאתי...
-
@smct אבל גם הוא מוריד דרך הקישור שקודם הבאתי...
@יוסי-רחמים
אז כנראה שלא -
@יוסי-רחמים יש לי את התוסף הרשמי מכרום ולא התעדכן לי ל1.0.7 [יש לי 1.0.6]
 { const baseUrl = "https://www.google.co.il/search?q=site:mitmachim.top"; const m = location.pathname.match(/^\/(topic|category)\/(\d+)/); const type = m ? m[1] : null; const id = m ? m[2] : null; let searchInput; function search(path = "") { const query = searchInput.value.trim(); if (query) { window.open(`${baseUrl}${path}%20${encodeURIComponent(query)}`, "_blank"); } } let buttons = {}; buttons.searchAll = { id: "bb-search-all", label: `חיפוש ${type ? "בכל הפורום" : ""}`, className: type ? "btn-secondary" : "btn-primary", callback: () => search(), }; if (type === "topic") { buttons.searchTopic = { label: "חיפוש בנושא זה", className: "btn-primary", callback: () => search(`/topic/${id}`), }; } else if (type === "category") { buttons.searchCategory = { label: "חיפוש בקטגוריה זו", className: "btn-primary", callback: () => search(`/category/${id}`), }; } buttons.cancel = { label: "ביטול", className: "btn-default", "data-bs-dismiss": "modal" }; const dialog = bootbox.dialog({ title: '<div style="text-align:center;"><img src="/assets/uploads/files/1625950269825-mt-google.png" width="400" alt="חיפוש בגוגל"></div>', message: '<input id="bb-inp" class="bootbox-input bootbox-input-text form-control" placeholder="הקלידו כדי לחפש בגוגל" autocomplete="off"/>', buttons, backdrop: true, show: true, onEscape: true }); dialog.on("shown.bs.modal", function () { searchInput = document.getElementById("bb-inp"); if (searchInput) { searchInput.focus(); searchInput.addEventListener("keydown", function (e) { if (e.key === "Enter") { e.preventDefault(); const query = this.value.trim(); if (query) { search(); dialog.modal("hide"); } } else if (e.key === "Escape") { e.preventDefault(); dialog.modal("hide"); } }); } const searchAllButton = document.getElementById("bb-search-all"); if (searchAllButton) { searchAllButton.title = "לחצו על אנטר כדי לחפש"; } }); })(); void 0;){kind=link}