Auto-deploy: 2026-08-05 16:17:53

post_feed.js

@@ -102,25 +102,28 @@
 
     const isRTL = /[\u0600-\u06FF]/.test(commentText);
 
+    // The post text is written by a third party and flows through the model into
+    // this box, so nothing here may go through innerHTML. Interpolating it would
+    // let any post inject markup — including a </textarea> break-out — into the
+    // extension's own UI on linkedin.com.
+    const skipped = !commentText.trim();
+
     const box = document.createElement('div');
     box.className = BOX_CLASS;
     box.innerHTML = `
       <div class="lja-cb-header">
         <span class="lja-cb-icon">🤖</span>
-        <span class="lja-cb-title">Smart Comment & Analysis</span>
+        <span class="lja-cb-title">Smart Comment &amp; Analysis</span>
         <button class="lja-cb-close" title="Close">✕</button>
       </div>
-      <div style="padding: 10px 14px; background: rgba(108, 99, 255, 0.05); border-bottom: 1px solid rgba(255, 255, 255, 0.06);">
-        <div style="font-size: 11px; color: #ff8787; margin-bottom: 4px; font-weight: 600;">🕵️ التحليل والمصداقية:</div>
-        <div style="font-size: 12px; color: #e0deff; line-height: 1.5; text-align: right;" dir="rtl">
-          ${arabicSummary}
-        </div>
+      <div class="lja-cb-analysis">
+        <div class="lja-cb-analysis-label">🕵️ التحليل والمصداقية:</div>
+        <div class="lja-cb-analysis-body" dir="rtl"></div>
       </div>
-      <textarea
-        class="lja-cb-text"
-        dir="${isRTL ? 'rtl' : 'ltr'}"
-        style="text-align: ${isRTL ? 'right' : 'left'}; font-family: monospace; font-size: 13px;"
-      >${commentText}</textarea>
+      <div class="lja-cb-skip" dir="rtl" hidden>
+        ⏭️ لا يوجد تعليق يستحق النشر على هذا المنشور — راجع التحليل أعلاه.
+      </div>
+      <textarea class="lja-cb-text"></textarea>
       <div class="lja-cb-actions">
         <button class="lja-cb-copy">📋 Copy</button>
         <button class="lja-cb-paste">✅ Paste into Comment</button>
@@ -128,6 +131,22 @@
       </div>
     `;
 
+    box.querySelector('.lja-cb-analysis-body').textContent = arabicSummary;
+
+    const textArea = box.querySelector('.lja-cb-text');
+    textArea.value = commentText;
+    textArea.dir = isRTL ? 'rtl' : 'ltr';
+    textArea.style.textAlign = isRTL ? 'right' : 'left';
+
+    // The prompt deliberately returns an empty comment when it has nothing
+    // worth adding. Show the reasoning rather than an empty box to paste.
+    if (skipped) {
+      box.querySelector('.lja-cb-skip').hidden = false;
+      textArea.hidden = true;
+      box.querySelector('.lja-cb-copy').disabled = true;
+      box.querySelector('.lja-cb-paste').disabled = true;
+    }
+
     box.querySelector('.lja-cb-close').addEventListener('click', () => box.remove());
 
     box.querySelector('.lja-cb-copy').addEventListener('click', function () {
@@ -305,38 +324,41 @@
       imagePrompt = parts[1].trim();
     }
 
+    // Same rule as the comment box: model output derived from a third-party post
+    // never touches innerHTML. Only the static shell does.
     const box = document.createElement('div');
     box.className = BOX_CLASS;
     box.innerHTML = `
-      <div class="lja-cb-header" style="background: linear-gradient(135deg, #FF6B6B 0%, #C92A2A 100%);">
+      <div class="lja-cb-header lja-cb-header--rewrite">
         <span class="lja-cb-icon">✍️</span>
         <span class="lja-cb-title">Rewritten Post</span>
         <button class="lja-cb-close" title="Close">✕</button>
       </div>
-      <div style="padding: 12px; font-size: 13px; color: #666; font-weight: 500; border-bottom: 1px solid rgba(0,0,0,0.05);">
-        Post Content:
-      </div>
-      <textarea
-        class="lja-cb-text"
-        dir="${isRTL ? 'rtl' : 'ltr'}"
-        style="text-align: ${isRTL ? 'right' : 'left'}; min-height: 120px;"
-      >${postContent}</textarea>
-      ${imagePrompt ? `
-      <div style="padding: 12px; font-size: 13px; color: #666; font-weight: 500; border-top: 1px solid rgba(0,0,0,0.05); border-bottom: 1px solid rgba(0,0,0,0.05);">
+      <div class="lja-cb-section-label">Post Content:</div>
+      <textarea class="lja-cb-text lja-cb-text--tall"></textarea>
+      <div class="lja-cb-section-label lja-cb-section-label--img" hidden>
         Image Generation Prompt (Midjourney / DALL-E):
       </div>
-      <textarea
-        class="lja-cb-image-prompt"
-        style="width: 100%; border: none; padding: 12px; background: rgba(0,0,0,0.02); resize: vertical; min-height: 80px; font-family: monospace; font-size: 12px; outline: none;"
-        readonly
-      >${imagePrompt}</textarea>
-      ` : ''}
+      <textarea class="lja-cb-image-prompt" readonly hidden></textarea>
       <div class="lja-cb-actions">
         <button class="lja-cb-copy">📋 Copy Post</button>
-        ${imagePrompt ? '<button class="lja-cb-copy-img">🎨 Copy Image Prompt</button>' : ''}
+        <button class="lja-cb-copy-img" hidden>🎨 Copy Image Prompt</button>
       </div>
     `;
 
+    const postArea = box.querySelector('.lja-cb-text');
+    postArea.value = postContent;
+    postArea.dir = isRTL ? 'rtl' : 'ltr';
+    postArea.style.textAlign = isRTL ? 'right' : 'left';
+
+    if (imagePrompt) {
+      box.querySelector('.lja-cb-section-label--img').hidden = false;
+      const imgArea = box.querySelector('.lja-cb-image-prompt');
+      imgArea.value = imagePrompt;
+      imgArea.hidden = false;
+      box.querySelector('.lja-cb-copy-img').hidden = false;
+    }
+
     box.querySelector('.lja-cb-close').addEventListener('click', () => box.remove());
 
     box.querySelector('.lja-cb-copy').addEventListener('click', function () {