vg-coder-cli 2.0.22 → 2.0.24

package/vetgo-auto/chrome/CSP_IMPROVEMENTS.md

@@ -0,0 +1,147 @@
+# CSP Script Injection Improvements
+
+## Vấn đề ban đầu
+
+Extension gặp lỗi CSP khi inject script trên các website có Content Security Policy nghiêm ngặt:
+
+```
+Refused to load the script 'blob:...' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'..."
+```
+
+## Giải pháp đã implement
+
+### 1. CSP Detection Logic
+
+```typescript
+private static detectStrictCSP(): boolean {
+  // Check CSP meta tags
+  // Check known strict domains (midjourney.com, github.com, etc.)
+}
+```
+
+**Domains được detect:**
+- midjourney.com ✅
+- openai.com
+- github.com  
+- google.com
+- googletagmanager.com
+- facebook.com
+- twitter.com
+- linkedin.com
+
+### 2. Smart Injection Order
+
+**Cho sites có CSP nghiêm ngặt:**
+1. 🎯 **Background Injection** (chrome.scripting với world: 'MAIN')
+2. 🔧 **Eval Method** (direct execution trong content script)
+3. 💬 **PostMessage Bridge** 
+4. 🎈 **Blob URL** (sẽ fail nhưng vẫn thử)
+5. 📄 **Data URL** (sẽ fail nhưng vẫn thử)
+
+**Cho sites bình thường:**
+1. 🎈 **Blob URL** (fastest)
+2. 📄 **Data URL**
+3. 🎯 **Background Injection**
+4. 🔧 **Eval Method**
+5. 💬 **PostMessage Bridge**
+
+### 3. Enhanced Logging
+
+```
+Injecting script for MAIN (Strict CSP: true)
+Trying Background injection...
+✅ Script injection successful via Background for MAIN
+```
+
+### 4. New Eval Method
+
+```typescript
+static injectViaEval(script: string, actionType: string): Promise<boolean> {
+  // Direct eval trong isolated function context
+  // Fallback khi tất cả methods khác fail
+}
+```
+
+## Kết quả Test
+
+### Trước khi cải thiện:
+```
+❌ Blob injection failed: CSP violation
+❌ Data URL injection failed: CSP violation  
+✅ Background injection successful (nhưng có nhiều errors)
+```
+
+### Sau khi cải thiện:
+```
+✅ CSP detected: midjourney.com (Strict CSP: true)
+✅ Background injection successful (no errors)
+✅ Clean console output
+```
+
+## Performance Impact
+
+| Build Type | Controller Size | Methods Available |
+|------------|----------------|-------------------|
+| Development | 73.7KB | 5 injection methods |
+| Production | 11.1KB | 5 injection methods |
+
+## Browser Compatibility
+
+| Method | Chrome | Edge | Firefox | Safari |
+|--------|--------|------|---------|--------|
+| Background | ✅ | ✅ | ❌ | ❌ |
+| Blob URL | ✅ | ✅ | ✅ | ✅ |
+| Data URL | ✅ | ✅ | ✅ | ✅ |
+| Eval | ✅ | ✅ | ✅ | ✅ |
+| PostMessage | ✅ | ✅ | ✅ | ✅ |
+
+## Test Cases
+
+### ✅ Passed
+- midjourney.com (strict CSP)
+- googletagmanager.com (strict CSP)
+- Normal websites without CSP
+- Extension test page với simulated CSP
+
+### 🧪 Recommended Tests
+- github.com
+- openai.com  
+- facebook.com
+- twitter.com
+- linkedin.com
+
+## Usage
+
+Extension tự động detect CSP và chọn method phù hợp:
+
+```javascript
+// Automatic usage
+await ScriptInjector.injectScript(scriptCode, 'MAIN');
+
+// Manual method selection (nếu cần)
+await ScriptInjector.injectViaBackground(scriptCode, 'MAIN');
+```
+
+## Monitoring
+
+Check console logs để xem method nào được sử dụng:
+
+```
+Injecting script for MAIN (Strict CSP: true)
+Trying Background injection...
+✅ Script injection successful via Background for MAIN
+```
+
+## Future Improvements
+
+1. **Dynamic CSP Detection**: Parse actual CSP headers từ network requests
+2. **Method Caching**: Cache successful methods per domain
+3. **Performance Metrics**: Track injection success rates
+4. **Fallback Strategies**: More sophisticated fallback logic
+
+## Deployment Notes
+
+- Extension size tăng minimal (11.1KB minified)
+- Backward compatible với tất cả existing functionality
+- No breaking changes
+- Ready for Chrome Web Store deployment

package/vetgo-auto/chrome/MANIFEST_V3_MIGRATION.md

@@ -0,0 +1,123 @@
+# VetGo Pro Extension - Manifest V3 Migration
+
+## Tóm tắt các thay đổi
+
+Extension VetGo Pro đã được cập nhật thành công từ Manifest V2 lên Manifest V3. Dưới đây là chi tiết các thay đổi:
+
+## 1. Cập nhật manifest.json
+
+### Thay đổi chính:
+- `manifest_version`: 2 → 3
+- `background.scripts` → `background.service_worker`
+- Tách `permissions` thành `permissions` và `host_permissions`
+- Cập nhật `content_security_policy` theo chuẩn V3
+- Thêm `declarative_net_request` configuration
+
+### Permissions mới:
+- Thêm `scripting` permission
+- Thêm `declarativeNetRequest` permission
+- Chuyển `<all_urls>` sang `host_permissions`
+
+## 2. Background Script → Service Worker
+
+### Thay đổi trong background.ts:
+- Loại bỏ `webRequest.onHeadersReceived` (blocking)
+- Thay thế bằng `declarativeNetRequest` rules
+- Cập nhật `webRequest.onBeforeRequest` → `webNavigation.onCompleted`
+- Thay thế `chrome.tabs.executeScript` → `chrome.scripting.executeScript`
+- Cải thiện error handling với `chrome.runtime.lastError`
+
+## 3. Declarative Net Request
+
+### File rules.json mới:
+- Tự động loại bỏ `content-security-policy` headers
+- Tự động loại bỏ `x-frame-options` headers
+- Áp dụng cho tất cả main_frame và sub_frame
+
+## 4. Content Script Updates
+
+### Thay đổi trong controller.ts:
+- Thêm TypeScript types cho parameters
+- Cải thiện error handling
+- Thêm null checks cho DOM elements
+
+## 5. Build Configuration
+
+### Webpack updates:
+- Thêm copy rules.json vào cả dev và production builds
+- Cập nhật cả webpack.config.js và webpack.config.prod.js
+
+## 6. Tương thích ngược
+
+### Chức năng được bảo toàn:
+✅ Inject scripts động vào trang web
+✅ Lưu sheetID và profile vào localStorage
+✅ Quản lý Zalo tabs (đóng tab trùng lặp)
+✅ Giao tiếp giữa content script và background
+✅ Tự xóa extension functionality
+✅ Chrome ID management
+
+### Cải tiến:
+✅ Hiệu suất tốt hơn với service worker
+✅ Bảo mật tăng cường với CSP mới
+✅ Declarative rules thay vì blocking requests
+✅ Better error handling
+
+## 7. Testing
+
+Extension đã được test build thành công:
+- Development build: ✅ Passed
+- Production build: ✅ Passed  
+- Package creation: ✅ Passed
+
+## 8. Deployment
+
+File `vetgo-extension-build.zip` đã sẵn sàng để upload lên Chrome Web Store.
+
+## 9. Giải pháp CSP Script Injection
+
+### Vấn đề:
+Extension gặp lỗi CSP khi inject inline script:
+```
+Refused to execute inline script because it violates the following Content Security Policy directive
+```
+
+### Giải pháp đa tầng:
+1. **ScriptInjector Class**: Tạo class với 4 phương pháp injection
+   - **Blob URL**: Tạo blob object và inject qua src
+   - **Data URL**: Sử dụng base64 data URL
+   - **Background Injection**: Sử dụng chrome.scripting với world: 'MAIN'
+   - **PostMessage Bridge**: Tạo bridge script để giao tiếp
+
+2. **Fallback Chain**: Thử từng phương pháp cho đến khi thành công
+
+3. **Async Handling**: Chuyển sang async/await pattern
+
+### Files mới:
+- `chrome/src/script-injector.ts`: Class xử lý injection với DOM safety
+- Cập nhật `controller.ts` để sử dụng ScriptInjector và DOM ready detection
+- `chrome/test-injection.html`: Test page để verify script injection
+
+### Fixes cho DOM Issues:
+- **getHeadElement()**: Safe method để get head element với fallbacks
+- **waitForDOM()**: Promise-based DOM ready detection
+- **Error handling**: Comprehensive error handling cho tất cả injection methods
+- **Async/await**: Proper async handling để tránh race conditions
+
+## 10. Lưu ý quan trọng
+
+1. **Service Worker Limitations**: Service workers có lifecycle khác background pages, có thể bị terminate sau một thời gian không hoạt động.
+
+2. **Declarative Net Request**: Không thể modify requests dynamically như webRequest, chỉ có thể sử dụng static rules.
+
+3. **CSP Restrictions**: Một số website có CSP rất nghiêm ngặt, cần multiple fallback methods.
+
+4. **Chrome Store Review**: Manifest V3 extensions có thể cần review kỹ hơn từ Chrome Web Store.
+
+## 11. Khuyến nghị
+
+- Test kỹ trên nhiều website khác nhau, đặc biệt các site có CSP nghiêm ngặt
+- Monitor console logs để đảm bảo script injection thành công
+- Kiểm tra performance impact của multiple injection methods
+- Chuẩn bị rollback plan nếu cần thiết
+- Test trên các browser khác nhau (Chrome, Edge, etc.)

package/vetgo-auto/chrome/environments/environment.ts

@@ -0,0 +1,13 @@
+export const environment = {
+  production: false,
+  environmentName: 'VGCODER',
+  firebaseConfig: {
+    apiKey: "AIzaSyDrpNMso-DXeN7c4vwbpV0idpxnV2vtXhQ",
+    authDomain: "vetgo-chrome.firebaseapp.com",
+    databaseURL: "https://vetgo-chrome-default-rtdb.asia-southeast1.firebasedatabase.app",
+    projectId: "vetgo-chrome",
+    storageBucket: "vetgo-chrome.appspot.com",
+    messagingSenderId: "211178224097",
+    appId: "1:211178224097:web:f73bf5a81c2f4c32fc7aa0"
+  }
+};

package/vetgo-auto/chrome/manifest.json

@@ -0,0 +1,66 @@
+{
+  "manifest_version": 3,
+  "name": "VetGo Pro",
+  "short_name": "VetGoPro",
+  "version": "1.0.0",
+  "description": "VetGo Copyright VetGo ",
+  "permissions": [
+    "sidePanel",
+    "management",
+    "webNavigation",
+    "notifications",
+    "cookies",
+    "storage",
+    "tabs",
+    "nativeMessaging",
+    "downloads",
+    "scripting",
+    "declarativeNetRequest"
+  ],
+  "host_permissions": [
+    "<all_urls>"
+  ],
+  "icons": {
+    "128": "assets/icon128.png",
+    "48": "assets/icon48.png",
+    "16": "assets/icon16.png"
+  },
+  "action": {
+    "default_title": "VetGo Pro - Cấu hình",
+    "default_icon": {
+      "128": "assets/icon128.png",
+      "48": "assets/icon48.png",
+      "16": "assets/icon16.png"
+    }
+  },
+  "content_scripts": [
+    {
+      "matches": [
+        "<all_urls>"
+      ],
+      "js": [
+        "controller.js"
+      ],
+      "all_frames": true,
+      "run_at": "document_start"
+    }
+  ],
+  "background": {
+    "service_worker": "background.js"
+  },
+  "content_security_policy": {
+    "extension_pages": "script-src 'self'; object-src 'self'"
+  },
+  "side_panel": {
+    "default_path": "sidepanel.html"
+  },
+  "declarative_net_request": {
+    "rule_resources": [
+      {
+        "id": "ruleset_1",
+        "enabled": true,
+        "path": "rules.json"
+      }
+    ]
+  }
+}

package/vetgo-auto/chrome/rules.json

@@ -0,0 +1,23 @@
+[
+  {
+    "id": 1,
+    "priority": 1,
+    "action": {
+      "type": "modifyHeaders",
+      "responseHeaders": [
+        {
+          "header": "content-security-policy",
+          "operation": "remove"
+        },
+        {
+          "header": "x-frame-options", 
+          "operation": "remove"
+        }
+      ]
+    },
+    "condition": {
+      "urlFilter": "*",
+      "resourceTypes": ["main_frame", "sub_frame"]
+    }
+  }
+]

package/vetgo-auto/chrome/src/background.ts

@@ -0,0 +1,200 @@
+import { LoadScriptController } from "./controllers/load-script.controller";
+import { Observable } from "rxjs";
+import { CommonFunc } from "./controllers/load-common-fuc.controller";
+import { uuid } from "./utils/db-utils";
+
+// Type declaration for chrome.sidePanel API (not yet in @types/chrome)
+declare global {
+  namespace chrome {
+    namespace sidePanel {
+      function open(options: { tabId?: number; windowId?: number }): Promise<void>;
+      function setOptions(options: { tabId?: number; path?: string; enabled?: boolean }): Promise<void>;
+    }
+  }
+}
+
+// Handle extension icon click to open side panel
+chrome.action.onClicked.addListener((tab) => {
+  if (tab.id) {
+    (chrome as any).sidePanel.open({ tabId: tab.id }).catch((err: Error) => {
+      console.error('Failed to open side panel:', err);
+    });
+  }
+});
+
+
+// Service Worker không hỗ trợ BehaviorSubject như trong background page
+// Sử dụng chrome.storage để lưu trữ state thay thế
+// const $eventOpenZalo = new BehaviorSubject<boolean>(null);
+
+// Manifest V3 không còn hỗ trợ webRequest blocking
+// Chuyển sang sử dụng declarativeNetRequest thông qua rules.json
+// Headers sẽ được xử lý bởi declarative rules thay vì code
+
+// Manifest V3: Thay thế webRequest.onBeforeRequest bằng webNavigation
+// Vì không thể chặn request, ta sẽ lắng nghe navigation events
+chrome.webNavigation.onCompleted.addListener(async (details) => {
+  if (details.frameId === 0) { // Chỉ xử lý main frame
+    try {
+      const url = new URL(details.url);
+      const params = new URLSearchParams(url.search);
+      const sheetID = params.get('sheetID');
+      const profile = params.get('profile');
+
+      if (sheetID) {
+        console.log('Found navigation with sheetID:', details.url);
+        // Manifest V3: Sử dụng chrome.scripting thay vì chrome.tabs.executeScript
+        await chrome.scripting.executeScript({
+          target: { tabId: details.tabId },
+          func: (sheetID) => {
+            localStorage.setItem("sheetID", sheetID);
+          },
+          args: [sheetID]
+        });
+        console.log('sheetID saved to local storage:', sheetID);
+      }
+
+      if (profile) {
+        console.log('Found navigation with profile:', details.url);
+        await chrome.scripting.executeScript({
+          target: { tabId: details.tabId },
+          func: (profile) => {
+            localStorage.setItem("phone", profile);
+          },
+          args: [profile]
+        });
+        console.log('profile saved to local storage:', profile);
+      }
+    } catch (error) {
+      console.error('Error processing navigation:', error);
+    }
+  }
+});
+
+chrome.webNavigation.onBeforeNavigate.addListener((details) => {
+  // Log the URL of the navigation
+  console.log('Navigating to:', details.url);
+  chrome.tabs.query({ currentWindow: true }, (tabs) => {
+    tabs.filter(tab => tab.url && tab.url.includes('id.zalo.me')).forEach((tab) => {
+      if(tab.id && tab.id !== details.tabId) {
+        chrome.tabs.remove(tab.id);
+      }
+    })
+  })
+}, { url: [{ hostEquals: 'id.zalo.me' }] });
+const getChromeId = ():Observable<string> =>{
+  return new Observable((ob) => {
+    chrome.storage.sync.get(({id}) => {
+      if(!id) {
+       const chromeId =  uuid();
+        chrome.storage.sync.set({id: chromeId});
+        ob.next(chromeId);
+      } else {
+        ob.next(id);
+      }
+    })
+  });
+}
+chrome.runtime.onInstalled.addListener(() => {
+  getChromeId().subscribe((id) => {
+    console.log("id",id);
+  });
+  // chrome.storage.sync.clear(() => console.log("Clear store......"));
+  // chrome.cookies.getAll({}, function(cookies) {
+  //   var json = JSON.stringify(cookies);
+  //   var blob = new Blob([json], {type: "application/json"});
+  //   var url = URL.createObjectURL(blob);
+  //
+  //   chrome.downloads.download({
+  //     url: url,
+  //     filename: "cookies.json"
+  //   });
+  // });
+});
+// function zaloTab() {
+//   chrome.tabs.query({ currentWindow: true }, (tabs) => {
+//     const isNewTab = tabs.map(tab => tab.url).some( url => url.includes('chat.zalo.me') || url.includes('id.zalo.me'));
+//     if(!isNewTab) {
+//       chrome.tabs.create({ url: 'https://chat.zalo.me', active: false });
+//     }
+//   });
+// }
+// Listen for tab removal
+// chrome.tabs.onActivated.addListener((activeInfo) => {
+//   $eventOpenZalo.next(true);
+// });
+// chrome.tabs.onRemoved.addListener((tabId, removeInfo) => {
+//   $eventOpenZalo.next(true);
+// });
+chrome.tabs.onCreated.addListener(() => {
+  // console.log(JSON.stringify(tab));
+  // alert(JSON.stringify(tab))
+});
+chrome.cookies.onChanged.addListener(() => {
+  // console.log(JSON.stringify(changeInfo.cookie))
+});
+chrome.runtime.onMessage.addListener((request, sender, respond) => {
+  console.log(sender.tab ?
+    "from a content script:" + sender.tab.url :
+    "from the extension");
+  const handler = new Promise((resolve, reject) => {
+    if ( request.action === 'REMOVE_EXTENSION' ) {
+      // ham nay de tu xoa extension
+      chrome.management.uninstallSelf();
+      resolve(request);
+      return;
+    }
+    if(request.action === 'SHEET') {
+      resolve(request);
+      return;
+    }
+    if (request.action === 'INJECT_SCRIPT') {
+      // Inject script using chrome.scripting API to bypass CSP
+      if (sender.tab && sender.tab.id) {
+        chrome.scripting.executeScript({
+          target: { tabId: sender.tab.id },
+          world: 'MAIN', // Execute in main world to access page's window object
+          func: (scriptCode) => {
+            try {
+              // Execute script in page context
+              const func = new Function(scriptCode);
+              func();
+            } catch (error) {
+              console.error('Script execution error:', error);
+            }
+          },
+          args: [request.script]
+        }).then(() => {
+          resolve({ success: true });
+        }).catch((error) => {
+          console.error('Chrome scripting injection failed:', error);
+          resolve({ success: false, error: error.message });
+        });
+      } else {
+        resolve({ success: false, error: 'No tab ID available' });
+      }
+      return;
+    }
+    if (request.action == 'CONTROLLER') {
+      const actionType = request.actionType || "MAIN";
+      getChromeId().subscribe((id) => {
+        console.log(id);
+        CommonFunc.load().then((commonCode)=> {
+          LoadScriptController.loadScriptByDomain(request.domain, actionType).then((code) => {
+            let script = `
+          window.vetgo = {...(window.vetgo || {} ) ,chromeId:"${id}"};
+          ${commonCode}
+          ${code}
+          `;
+            resolve({ script });
+          });
+        })
+      })
+    } else {
+      reject('//request is empty.');
+    }
+  });
+  handler.then(message => respond(message)).catch(error => respond(error));
+  return true;
+
+});

package/vetgo-auto/chrome/src/controller.ts

@@ -0,0 +1,98 @@
+import { ScriptInjector } from './script-injector';
+
+const addScript = async (script: string, actionType: string) => {
+  try {
+    const success = await ScriptInjector.injectScript(script, actionType);
+    if (!success) {
+      console.error('All script injection methods failed for:', actionType);
+    }
+  } catch (error) {
+    console.error('Script injection error:', error);
+  }
+}
+// Wait for DOM to be ready before executing
+const waitForDOM = (): Promise<void> => {
+  return new Promise((resolve) => {
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => resolve(), { once: true });
+    } else {
+      resolve();
+    }
+  });
+};
+
+const initializeController = async () => {
+  try {
+    // Ensure DOM is ready
+    await waitForDOM();
+
+    const actionType = new URL(window.location.href).searchParams.get("actionType") || "MAIN";
+    const cache = sessionStorage.getItem(actionType);
+
+    if (cache) {
+      await addScript(cache, actionType);
+    } else {
+      chrome.runtime.sendMessage({
+        action: "CONTROLLER",
+        domain: window.location.hostname.replace(/(https?:\/\/)?(www.)?/i, ''),
+        actionType: actionType
+      }, async (response) => {
+        if (chrome.runtime.lastError) {
+          console.error('Runtime error:', chrome.runtime.lastError);
+          return;
+        }
+        if (response && response.script) {
+          const fullScript = `var chromeId = "${chrome.runtime.id}"; ${response.script}`;
+          await addScript(fullScript, actionType);
+          sessionStorage.setItem(actionType, fullScript);
+        }
+      });
+    }
+  } catch (err) {
+    console.error('Controller initialization error:', err);
+  }
+};
+
+// Initialize controller
+initializeController();
+const setupRemoveExtensionListener = async () => {
+  try {
+    // Wait for DOM and body to be ready
+    await waitForDOM();
+
+    // Wait for body element
+    const waitForBody = (): Promise<HTMLBodyElement> => {
+      return new Promise((resolve) => {
+        const checkBody = () => {
+          const body = document.querySelector('body');
+          if (body) {
+            resolve(body as HTMLBodyElement);
+          } else {
+            setTimeout(checkBody, 100);
+          }
+        };
+        checkBody();
+      });
+    };
+
+    const body = await waitForBody();
+
+    // cach dung: document.querySelector('body').dispatchEvent(new CustomEvent('REMOVE_EXTENSION', { detail: { key: 'value' } }));
+    body.addEventListener('REMOVE_EXTENSION', function(event: any) {
+      console.log(event.detail); // { key: 'value' }
+      chrome.runtime.sendMessage({action: "REMOVE_EXTENSION", data: event.detail}, (response) => {
+        if (chrome.runtime.lastError) {
+          console.error('Runtime error:', chrome.runtime.lastError);
+          return;
+        }
+        console.log('tu huy thanh cong', response);
+      });
+    });
+  } catch (err) {
+    console.error('Setup remove extension listener error:', err);
+  }
+};
+
+// Setup remove extension listener
+setupRemoveExtensionListener();
+