vg-coder-cli 2.0.32 → 2.0.34

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/package.json +2 -2
  2. package/.vgignore +0 -10
  3. package/ARCHITECTURE.md +0 -255
  4. package/change.sh +0 -0
  5. package/gulpfile.js +0 -111
  6. package/vetgo-auto/README.md +0 -3
  7. package/vetgo-auto/chrome/CSP_IMPROVEMENTS.md +0 -147
  8. package/vetgo-auto/chrome/MANIFEST_V3_MIGRATION.md +0 -123
  9. package/vetgo-auto/chrome/assets/icon128.png +0 -0
  10. package/vetgo-auto/chrome/assets/icon16.png +0 -0
  11. package/vetgo-auto/chrome/assets/icon48.png +0 -0
  12. package/vetgo-auto/chrome/environments/environment.ts +0 -13
  13. package/vetgo-auto/chrome/manifest.json +0 -66
  14. package/vetgo-auto/chrome/rules.json +0 -23
  15. package/vetgo-auto/chrome/src/background.ts +0 -200
  16. package/vetgo-auto/chrome/src/controller.ts +0 -172
  17. package/vetgo-auto/chrome/src/controllers/common.firebase.ts +0 -31
  18. package/vetgo-auto/chrome/src/controllers/firebase-crud.ts +0 -147
  19. package/vetgo-auto/chrome/src/controllers/load-common-fuc.controller.ts +0 -24
  20. package/vetgo-auto/chrome/src/controllers/load-script.controller.ts +0 -23
  21. package/vetgo-auto/chrome/src/script-injector.ts +0 -305
  22. package/vetgo-auto/chrome/src/sidepanel.css +0 -166
  23. package/vetgo-auto/chrome/src/sidepanel.html +0 -48
  24. package/vetgo-auto/chrome/src/sidepanel.ts +0 -127
  25. package/vetgo-auto/chrome/src/utils/ai-domains.ts +0 -33
  26. package/vetgo-auto/chrome/src/utils/db-utils.ts +0 -2
  27. package/vetgo-auto/chrome/src/utils/environment-storage.service.ts +0 -85
  28. package/vetgo-auto/chrome/src/utils/injector-script.ts +0 -47
  29. package/vetgo-auto/chrome/webpack.config.js +0 -53
  30. package/vetgo-auto/chrome/webpack.config.prod.js +0 -54
  31. package/vetgo-auto/package.json +0 -30
  32. package/vetgo-auto/tsconfig.json +0 -27
  33. package/vetgo-auto/vg-coder.zip +0 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "vg-coder-cli",
3
- "version": "2.0.32",
3
+ "version": "2.0.34",
4
4
  "description": "🚀 CLI tool to analyze projects, concatenate source files, count tokens, and export HTML with syntax highlighting and copy functionality",
5
5
  "main": "src/index.js",
6
6
  "bin": {
@@ -38,6 +38,7 @@
38
38
  "diff2html": "^3.4.52",
39
39
  "directory-tree": "^3.5.1",
40
40
  "express": "^4.18.2",
41
+ "fs-extra": "^11.3.3",
41
42
  "highlight.js": "^11.9.0",
42
43
  "ignore": "^5.3.0",
43
44
  "node-pty": "^1.1.0",
@@ -53,7 +54,6 @@
53
54
  "devDependencies": {
54
55
  "@types/jest": "^29.5.8",
55
56
  "adm-zip": "^0.5.10",
56
- "fs-extra": "^11.3.3",
57
57
  "gulp": "^5.0.1",
58
58
  "gulp-clean-css": "^4.3.0",
59
59
  "gulp-concat": "^2.6.1",
package/.vgignore DELETED
@@ -1,10 +0,0 @@
1
- # VG Coder specific ignores
2
- *.tgz
3
- coverage/
4
- vg-output/
5
- test-small/
6
-
7
- # Additional ignores for VG Coder
8
- *.map
9
- *.min.js
10
- *.min.css
package/ARCHITECTURE.md DELETED
@@ -1,255 +0,0 @@
1
- # VG Coder - Project Architecture Guide
2
-
3
- Tài liệu này giải thích cách thức hoạt động của hệ thống VG Coder, vai trò của từng thành phần và cách để một lập trình viên mới bắt đầu phát triển tính năng.
4
-
5
- ---
6
-
7
- ## 1. Tổng quan hệ thống (System Overview)
8
-
9
- VG Coder là một bộ công cụ hỗ trợ lập trình bằng AI, hoạt động dựa trên sự kết hợp của 3 thành phần chính:
10
-
11
- 1. **CLI / API Server (Node.js/Express):** Chạy dưới máy cục bộ (Localhost:6868). Nhiệm vụ: Quét mã nguồn, đếm token, thực thi lệnh Terminal và quản lý file.
12
- 2. **Frontend Dashboard (HTML/CSS/JS):** Giao diện người dùng. Được build thành một file duy nhất (`vg-coder-bundle.js`).
13
- 3. **Browser Extension:** "Cầu nối" giúp nhúng Dashboard trực tiếp vào các trang web AI (ChatGPT, Claude) bằng công nghệ **Shadow DOM**.
14
-
15
- ## 2. Sơ đồ luồng (Flow Diagrams)
16
-
17
- ### A. Luồng khởi tạo (Initialization Flow)
18
- Khi bạn chạy `vg start` và mở trang ChatGPT:
19
-
20
- ```mermaid
21
- sequenceDiagram
22
- participant U as User
23
- participant S as Local Server (6868)
24
- participant E as Browser Extension
25
- participant P as AI Page (ChatGPT)
26
- participant D as Shadow DOM Dashboard
27
-
28
- U->>S: Chạy lệnh `vg start`
29
- U->>P: Truy cập chatgpt.com
30
- E->>P: Kiểm tra Domain AI
31
- E->>S: Fetch `dist/vg-coder-bundle.js`
32
- S-->>E: Trả về toàn bộ Code Dashboard
33
- E->>P: Tạo Shadow Root & Inject Bundle
34
- P->>D: Dashboard hiển thị (Bong bóng 🚀)
35
- ```
36
-
37
- ### B. Luồng thực thi tính năng (Feature Execution)
38
- Ví dụ khi người dùng nhấn nút "Execute Bash":
39
-
40
- ```mermaid
41
- graph LR
42
- A[Giao diện Dashboard] -- Click Run --> B[utils.js: getById]
43
- B -- Lấy nội dung --> C[api.js: fetch]
44
- C -- POST /api/execute --> D[Server: Express Route]
45
- D -- Chạy shell --> E[BashExecutor]
46
- E -- Trả về stdout --> D
47
- D -- JSON response --> C
48
- C -- Hiển thị --> F[Dashboard: Response Area]
49
- ```
50
-
51
- ---
52
-
53
- ## 3. Các thành phần chi tiết
54
-
55
- ### 📂 Server (`src/server/`)
56
- * **`api-server.js`**: Định nghĩa các điểm cuối (Endpoints) cho UI gọi vào.
57
- * **`project-manager.js`**: Quản lý việc chạy nhiều dự án cùng lúc (Leader/Follower).
58
- * **`terminal-manager.js`**: Sử dụng `node-pty` để tạo các session Terminal thực trên máy tính.
59
-
60
- ### 📂 Frontend (`src/server/views/`)
61
- Đây là nơi bạn phát triển tính năng mới.
62
- * **`js/features/`**: Mỗi tính năng (Git, Terminal, Tree View) nằm trong một file riêng.
63
- * **`js/utils.js`**: Chứa các helper quan trọng. **Lưu ý:** Tuyệt đối không dùng `document.getElementById`, phải dùng `getById()` vì App chạy trong Shadow DOM.
64
- * **`js/shadow-entry.js`**: Điểm vào (Entry point) để kết nối Dashboard với môi trường Shadow DOM của Extension.
65
-
66
- ### 📦 Build System (`gulpfile.js`)
67
- Do Extension không thể tải từng file JS/CSS lẻ từ Localhost vì lý do bảo mật (CORS/CSP), Gulp sẽ:
68
- 1. Gom tất cả CSS thành một chuỗi.
69
- 2. Nén HTML thành một chuỗi.
70
- 3. Bundle toàn bộ JS bằng Webpack.
71
- 4. Đóng gói tất cả vào file `dist/vg-coder-bundle.js`.
72
-
73
- ---
74
-
75
- ## 4. Event Protocol & Feature System
76
-
77
- VG Coder sử dụng **Event-Driven Architecture** để quản lý giao tiếp giữa các component, đặc biệt là bubble menu features. Hệ thống này cho phép:
78
- - ✅ Tách biệt UI và logic xử lý
79
- - ✅ Thêm features mới mà không cần sửa code cũ
80
- - ✅ Giao tiếp cross-context (window, shadow-root, iframe)
81
- - ✅ Test features độc lập
82
-
83
- ### Thành phần chính
84
-
85
- #### 1. Event Protocol (`event-protocol.js`)
86
-
87
- Định nghĩa giao thức event chuẩn:
88
-
89
- ```javascript
90
- // Event format
91
- {
92
- type: 'vg:paste-run', // Event type
93
- source: 'bubble-menu', // Source component
94
- target: 'handlers', // Target component
95
- payload: { /* data */ }, // Event data
96
- timestamp: 1234567890, // Timestamp
97
- context: 'shadow-root' // Execution context
98
- }
99
- ```
100
-
101
- **Event Types:**
102
- - `vg:paste-run` - Paste & Run from Clipboard
103
- - `vg:terminal-new` - Open New Terminal
104
- - `vg:terminal-execute` - Execute command in terminal
105
-
106
- #### 2. Event Dispatcher
107
-
108
- `EventDispatcher` class quản lý event registration và dispatching:
109
-
110
- ```javascript
111
- import { globalDispatcher, EVENT_TYPES } from './event-protocol.js';
112
-
113
- // Register listener
114
- globalDispatcher.on(EVENT_TYPES.PASTE_RUN, async (event) => {
115
- console.log('Event received:', event);
116
- // Handle event
117
- });
118
-
119
- // Dispatch event
120
- globalDispatcher.dispatch({
121
- type: EVENT_TYPES.PASTE_RUN,
122
- source: 'bubble-menu',
123
- target: 'handlers',
124
- payload: { /* data */ }
125
- });
126
- ```
127
-
128
- #### 3. Feature Registry (`features/bubble-features/`)
129
-
130
- Quản lý bubble menu features:
131
-
132
- ```javascript
133
- // Feature structure
134
- {
135
- id: 'paste-run',
136
- icon: '📋',
137
- label: 'Paste & Run from Clipboard',
138
- tooltip: 'Paste & Run from Clipboard',
139
- eventType: EVENT_TYPES.PASTE_RUN,
140
- permissions: ['clipboard-read'],
141
- enabled: true,
142
- order: 1
143
- }
144
- ```
145
-
146
- ### Cách thêm Bubble Menu Feature mới
147
-
148
- **Bước 1:** Tạo event type mới trong `event-protocol.js`:
149
-
150
- ```javascript
151
- export const EVENT_TYPES = {
152
- // Existing types...
153
- MY_FEATURE: 'vg:my-feature', // New event type
154
- };
155
- ```
156
-
157
- **Bước 2:** Tạo feature definition (`features/bubble-features/my-feature.js`):
158
-
159
- ```javascript
160
- import { EVENT_TYPES } from '../../event-protocol.js';
161
-
162
- export const MyFeature = {
163
- id: 'my-feature',
164
- icon: '⚡',
165
- label: 'My Feature',
166
- tooltip: 'Do something cool',
167
- eventType: EVENT_TYPES.MY_FEATURE,
168
- permissions: [],
169
- enabled: true,
170
- order: 3,
171
- };
172
- ```
173
-
174
- **Bước 3:** Register feature trong `features/bubble-features/index.js`:
175
-
176
- ```javascript
177
- import { MyFeature } from './my-feature.js';
178
-
179
- // Register
180
- featureRegistry.register(MyFeature);
181
- ```
182
-
183
- **Bước 4:** Add event handler trong `handlers.js`:
184
-
185
- ```javascript
186
- export function initEventHandlers() {
187
- // Existing handlers...
188
-
189
- // My Feature handler
190
- globalDispatcher.on(EVENT_TYPES.MY_FEATURE, (event) => {
191
- console.log('[Handlers] My Feature event:', event);
192
- // Implement your logic here
193
- });
194
- }
195
- ```
196
-
197
- **Bước 5:** Build và test:
198
-
199
- ```bash
200
- npm run build
201
- vg start
202
- ```
203
-
204
- Feature sẽ tự động xuất hiện trong bubble menu! 🎉
205
-
206
- ### Debug Event System
207
-
208
- Sử dụng browser console để debug:
209
-
210
- ```javascript
211
- // Enable debug mode
212
- window.__VG_EVENT_DISPATCHER__.setDebug(true);
213
-
214
- // View registered features
215
- console.log(window.__VG_FEATURE_REGISTRY__.getFeatures());
216
-
217
- // View event history
218
- console.log(window.__VG_EVENT_DISPATCHER__.getHistory());
219
-
220
- // Test dispatch manually
221
- window.__VG_EVENT_DISPATCHER__.dispatch({
222
- type: 'vg:paste-run',
223
- source: 'test',
224
- target: 'handlers',
225
- payload: {}
226
- });
227
- ```
228
-
229
- ---
230
-
231
- ## 5. Hướng dẫn phát triển tính năng mới
232
-
233
- Nếu bạn muốn thêm tính năng mới (Ví dụ: "Database Manager"):
234
-
235
- 1. **Backend:** Thêm Route vào `src/server/api-server.js` để xử lý logic phía máy tính.
236
- 2. **Frontend Markup:** Thêm HTML vào `src/server/views/dashboard.html`.
237
- 3. **Frontend Style:** Tạo file `src/server/views/css/db-manager.css`.
238
- 4. **Frontend Logic:**
239
- * Tạo `src/server/views/js/features/db-manager.js`.
240
- * Dùng `import { getById } from '../utils.js'` để lấy element.
241
- * Gán hàm vào `window` nếu cần gọi từ HTML (ví dụ: `window.openDB = ...`).
242
- 5. **Đăng ký:** Import và khởi tạo trong `src/server/views/js/main.js`.
243
- 6. **Build:** Chạy `npm run build` để cập nhật file bundle.
244
-
245
- ---
246
-
247
- ## 6. Các quy tắc "Sống còn" cho người mới
248
-
249
- 1. **Shadow DOM Context:** Dashboard không thể thấy biến của trang web (ChatGPT) và ngược lại. Mọi thao tác DOM của Dashboard phải qua `getById()` hoặc `qs()`.
250
- 2. **API Base:** Luôn sử dụng biến `API_BASE` từ `config.js` khi dùng `fetch`. Nó tự động nhận diện khi nào cần gọi về `localhost:6868`.
251
- 3. **Z-Index:** Bong bóng 🚀 có z-index là `2147483647` để luôn nằm trên cùng. Các modal của bạn nên có z-index thấp hơn mức này một chút.
252
- 4. **No Stdin in Terminal:** Do Shadow DOM chặn một số sự kiện bàn phím, Terminal được thiết kế theo kiểu "Input riêng - Output riêng".
253
-
254
- ---
255
- Tài liệu này được cập nhật vào tháng 12/2025.
package/change.sh DELETED
File without changes
package/gulpfile.js DELETED
@@ -1,111 +0,0 @@
1
- const gulp = require('gulp');
2
- const concat = require('gulp-concat');
3
- const htmlmin = require('gulp-htmlmin');
4
- const cleanCss = require('gulp-clean-css');
5
- const webpack = require('webpack-stream');
6
- const replace = require('gulp-replace');
7
- const fs = require('fs');
8
- const path = require('path');
9
-
10
- const PATHS = {
11
- src: 'src/server/views',
12
- dist: 'dist',
13
- entryJs: 'src/server/views/js/shadow-entry.js',
14
- outputFile: 'vg-coder-bundle.js'
15
- };
16
-
17
- // 1. Bundle & Minify CSS
18
- let cssContent = '';
19
- gulp.task('css', function() {
20
- return gulp.src([
21
- 'node_modules/xterm/css/xterm.css',
22
- 'node_modules/diff2html/bundles/css/diff2html.min.css',
23
- 'node_modules/highlight.js/styles/github-dark.css', // ADDED: Highlight.js CSS
24
- `${PATHS.src}/dashboard.css`,
25
- `${PATHS.src}/css/*.css`
26
- ])
27
- .pipe(concat('bundle.css'))
28
- .pipe(cleanCss())
29
- .on('data', function(file) {
30
- cssContent = file.contents.toString();
31
- });
32
- });
33
-
34
- // 2. Bundle & Minify HTML
35
- let htmlContent = '';
36
- gulp.task('html', function() {
37
- return gulp.src(`${PATHS.src}/dashboard.html`)
38
- .pipe(htmlmin({
39
- collapseWhitespace: true,
40
- removeComments: true,
41
- removeRedundantAttributes: true,
42
- minifyCSS: true,
43
- minifyJS: true
44
- }))
45
- .pipe(replace(/<link rel="stylesheet".*?>/g, ''))
46
- .pipe(replace(/<script.*?>.*?<\/script>/g, ''))
47
- .on('data', function(file) {
48
- htmlContent = file.contents.toString();
49
- });
50
- });
51
-
52
- // 3. Bundle JS using Webpack
53
- let jsContent = '';
54
- gulp.task('js', function() {
55
- return gulp.src(PATHS.entryJs)
56
- .pipe(webpack({
57
- mode: 'production',
58
- output: { filename: 'bundle.js' },
59
- resolve: { extensions: ['.js'] }
60
- }))
61
- .on('data', function(file) {
62
- jsContent = file.contents.toString();
63
- });
64
- });
65
-
66
- // 4. Build Final Injector
67
- gulp.task('build', gulp.series('css', 'html', 'js', function(done) {
68
- const finalScript = `
69
- (function() {
70
- const CONTAINER_ID = 'vg-coder-shadow-host';
71
- if (document.getElementById(CONTAINER_ID)) {
72
- console.log('VG Coder already injected');
73
- return;
74
- }
75
-
76
- const host = document.createElement('div');
77
- host.id = CONTAINER_ID;
78
- host.style.cssText = "position:fixed; top:0; left:0; width:100%; height:100%; z-index:2147483647; pointer-events:none;";
79
- document.body.appendChild(host);
80
-
81
- const shadow = host.attachShadow({ mode: 'open' });
82
- window.__VG_CODER_ROOT__ = shadow;
83
-
84
- const style = document.createElement('style');
85
- style.textContent = \`${cssContent.replace(/`/g, '\\`').replace(/\\/g, '\\\\')}\`;
86
- shadow.appendChild(style);
87
-
88
- const wrapper = document.createElement('div');
89
- wrapper.id = 'vg-app-root';
90
- wrapper.style.cssText = "pointer-events: auto; position: absolute; top: 0; left: 0; width: 0; height: 0; overflow: hidden; background: var(--ios-bg, #F2F2F7); display: flex; flex-direction: column; transition: opacity 0.3s ease;";
91
- wrapper.innerHTML = \`${htmlContent.replace(/`/g, '\\`').replace(/\\/g, '\\\\')}\`;
92
- shadow.appendChild(wrapper);
93
-
94
- try {
95
- ${jsContent}
96
- } catch (e) {
97
- console.error('VG Coder Start Error:', e);
98
- }
99
- })();
100
- `;
101
-
102
- if (!fs.existsSync(PATHS.dist)) fs.mkdirSync(PATHS.dist);
103
- fs.writeFileSync(path.join(PATHS.dist, PATHS.outputFile), finalScript);
104
-
105
- console.log('--------------------------------------------------');
106
- console.log(`✅ Build Complete: ${path.join(PATHS.dist, PATHS.outputFile)}`);
107
- console.log('--------------------------------------------------');
108
- done();
109
- }));
110
-
111
- gulp.task('default', gulp.series('build'));
@@ -1,3 +0,0 @@
1
- npm install --force
2
-
3
- node 16.13.2
@@ -1,147 +0,0 @@
1
- # CSP Script Injection Improvements
2
-
3
- ## Vấn đề ban đầu
4
-
5
- Extension gặp lỗi CSP khi inject script trên các website có Content Security Policy nghiêm ngặt:
6
-
7
- ```
8
- Refused to load the script 'blob:...' because it violates the following Content Security Policy directive: "script-src 'self' 'wasm-unsafe-eval'..."
9
- ```
10
-
11
- ## Giải pháp đã implement
12
-
13
- ### 1. CSP Detection Logic
14
-
15
- ```typescript
16
- private static detectStrictCSP(): boolean {
17
- // Check CSP meta tags
18
- // Check known strict domains (midjourney.com, github.com, etc.)
19
- }
20
- ```
21
-
22
- **Domains được detect:**
23
- - midjourney.com ✅
24
- - openai.com
25
- - github.com
26
- - google.com
27
- - googletagmanager.com
28
- - facebook.com
29
- - twitter.com
30
- - linkedin.com
31
-
32
- ### 2. Smart Injection Order
33
-
34
- **Cho sites có CSP nghiêm ngặt:**
35
- 1. 🎯 **Background Injection** (chrome.scripting với world: 'MAIN')
36
- 2. 🔧 **Eval Method** (direct execution trong content script)
37
- 3. 💬 **PostMessage Bridge**
38
- 4. 🎈 **Blob URL** (sẽ fail nhưng vẫn thử)
39
- 5. 📄 **Data URL** (sẽ fail nhưng vẫn thử)
40
-
41
- **Cho sites bình thường:**
42
- 1. 🎈 **Blob URL** (fastest)
43
- 2. 📄 **Data URL**
44
- 3. 🎯 **Background Injection**
45
- 4. 🔧 **Eval Method**
46
- 5. 💬 **PostMessage Bridge**
47
-
48
- ### 3. Enhanced Logging
49
-
50
- ```
51
- Injecting script for MAIN (Strict CSP: true)
52
- Trying Background injection...
53
- ✅ Script injection successful via Background for MAIN
54
- ```
55
-
56
- ### 4. New Eval Method
57
-
58
- ```typescript
59
- static injectViaEval(script: string, actionType: string): Promise<boolean> {
60
- // Direct eval trong isolated function context
61
- // Fallback khi tất cả methods khác fail
62
- }
63
- ```
64
-
65
- ## Kết quả Test
66
-
67
- ### Trước khi cải thiện:
68
- ```
69
- ❌ Blob injection failed: CSP violation
70
- ❌ Data URL injection failed: CSP violation
71
- ✅ Background injection successful (nhưng có nhiều errors)
72
- ```
73
-
74
- ### Sau khi cải thiện:
75
- ```
76
- ✅ CSP detected: midjourney.com (Strict CSP: true)
77
- ✅ Background injection successful (no errors)
78
- ✅ Clean console output
79
- ```
80
-
81
- ## Performance Impact
82
-
83
- | Build Type | Controller Size | Methods Available |
84
- |------------|----------------|-------------------|
85
- | Development | 73.7KB | 5 injection methods |
86
- | Production | 11.1KB | 5 injection methods |
87
-
88
- ## Browser Compatibility
89
-
90
- | Method | Chrome | Edge | Firefox | Safari |
91
- |--------|--------|------|---------|--------|
92
- | Background | ✅ | ✅ | ❌ | ❌ |
93
- | Blob URL | ✅ | ✅ | ✅ | ✅ |
94
- | Data URL | ✅ | ✅ | ✅ | ✅ |
95
- | Eval | ✅ | ✅ | ✅ | ✅ |
96
- | PostMessage | ✅ | ✅ | ✅ | ✅ |
97
-
98
- ## Test Cases
99
-
100
- ### ✅ Passed
101
- - midjourney.com (strict CSP)
102
- - googletagmanager.com (strict CSP)
103
- - Normal websites without CSP
104
- - Extension test page với simulated CSP
105
-
106
- ### 🧪 Recommended Tests
107
- - github.com
108
- - openai.com
109
- - facebook.com
110
- - twitter.com
111
- - linkedin.com
112
-
113
- ## Usage
114
-
115
- Extension tự động detect CSP và chọn method phù hợp:
116
-
117
- ```javascript
118
- // Automatic usage
119
- await ScriptInjector.injectScript(scriptCode, 'MAIN');
120
-
121
- // Manual method selection (nếu cần)
122
- await ScriptInjector.injectViaBackground(scriptCode, 'MAIN');
123
- ```
124
-
125
- ## Monitoring
126
-
127
- Check console logs để xem method nào được sử dụng:
128
-
129
- ```
130
- Injecting script for MAIN (Strict CSP: true)
131
- Trying Background injection...
132
- ✅ Script injection successful via Background for MAIN
133
- ```
134
-
135
- ## Future Improvements
136
-
137
- 1. **Dynamic CSP Detection**: Parse actual CSP headers từ network requests
138
- 2. **Method Caching**: Cache successful methods per domain
139
- 3. **Performance Metrics**: Track injection success rates
140
- 4. **Fallback Strategies**: More sophisticated fallback logic
141
-
142
- ## Deployment Notes
143
-
144
- - Extension size tăng minimal (11.1KB minified)
145
- - Backward compatible với tất cả existing functionality
146
- - No breaking changes
147
- - Ready for Chrome Web Store deployment
@@ -1,123 +0,0 @@
1
- # VetGo Pro Extension - Manifest V3 Migration
2
-
3
- ## Tóm tắt các thay đổi
4
-
5
- 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:
6
-
7
- ## 1. Cập nhật manifest.json
8
-
9
- ### Thay đổi chính:
10
- - `manifest_version`: 2 → 3
11
- - `background.scripts` → `background.service_worker`
12
- - Tách `permissions` thành `permissions` và `host_permissions`
13
- - Cập nhật `content_security_policy` theo chuẩn V3
14
- - Thêm `declarative_net_request` configuration
15
-
16
- ### Permissions mới:
17
- - Thêm `scripting` permission
18
- - Thêm `declarativeNetRequest` permission
19
- - Chuyển `<all_urls>` sang `host_permissions`
20
-
21
- ## 2. Background Script → Service Worker
22
-
23
- ### Thay đổi trong background.ts:
24
- - Loại bỏ `webRequest.onHeadersReceived` (blocking)
25
- - Thay thế bằng `declarativeNetRequest` rules
26
- - Cập nhật `webRequest.onBeforeRequest` → `webNavigation.onCompleted`
27
- - Thay thế `chrome.tabs.executeScript` → `chrome.scripting.executeScript`
28
- - Cải thiện error handling với `chrome.runtime.lastError`
29
-
30
- ## 3. Declarative Net Request
31
-
32
- ### File rules.json mới:
33
- - Tự động loại bỏ `content-security-policy` headers
34
- - Tự động loại bỏ `x-frame-options` headers
35
- - Áp dụng cho tất cả main_frame và sub_frame
36
-
37
- ## 4. Content Script Updates
38
-
39
- ### Thay đổi trong controller.ts:
40
- - Thêm TypeScript types cho parameters
41
- - Cải thiện error handling
42
- - Thêm null checks cho DOM elements
43
-
44
- ## 5. Build Configuration
45
-
46
- ### Webpack updates:
47
- - Thêm copy rules.json vào cả dev và production builds
48
- - Cập nhật cả webpack.config.js và webpack.config.prod.js
49
-
50
- ## 6. Tương thích ngược
51
-
52
- ### Chức năng được bảo toàn:
53
- ✅ Inject scripts động vào trang web
54
- ✅ Lưu sheetID và profile vào localStorage
55
- ✅ Quản lý Zalo tabs (đóng tab trùng lặp)
56
- ✅ Giao tiếp giữa content script và background
57
- ✅ Tự xóa extension functionality
58
- ✅ Chrome ID management
59
-
60
- ### Cải tiến:
61
- ✅ Hiệu suất tốt hơn với service worker
62
- ✅ Bảo mật tăng cường với CSP mới
63
- ✅ Declarative rules thay vì blocking requests
64
- ✅ Better error handling
65
-
66
- ## 7. Testing
67
-
68
- Extension đã được test build thành công:
69
- - Development build: ✅ Passed
70
- - Production build: ✅ Passed
71
- - Package creation: ✅ Passed
72
-
73
- ## 8. Deployment
74
-
75
- File `vetgo-extension-build.zip` đã sẵn sàng để upload lên Chrome Web Store.
76
-
77
- ## 9. Giải pháp CSP Script Injection
78
-
79
- ### Vấn đề:
80
- Extension gặp lỗi CSP khi inject inline script:
81
- ```
82
- Refused to execute inline script because it violates the following Content Security Policy directive
83
- ```
84
-
85
- ### Giải pháp đa tầng:
86
- 1. **ScriptInjector Class**: Tạo class với 4 phương pháp injection
87
- - **Blob URL**: Tạo blob object và inject qua src
88
- - **Data URL**: Sử dụng base64 data URL
89
- - **Background Injection**: Sử dụng chrome.scripting với world: 'MAIN'
90
- - **PostMessage Bridge**: Tạo bridge script để giao tiếp
91
-
92
- 2. **Fallback Chain**: Thử từng phương pháp cho đến khi thành công
93
-
94
- 3. **Async Handling**: Chuyển sang async/await pattern
95
-
96
- ### Files mới:
97
- - `chrome/src/script-injector.ts`: Class xử lý injection với DOM safety
98
- - Cập nhật `controller.ts` để sử dụng ScriptInjector và DOM ready detection
99
- - `chrome/test-injection.html`: Test page để verify script injection
100
-
101
- ### Fixes cho DOM Issues:
102
- - **getHeadElement()**: Safe method để get head element với fallbacks
103
- - **waitForDOM()**: Promise-based DOM ready detection
104
- - **Error handling**: Comprehensive error handling cho tất cả injection methods
105
- - **Async/await**: Proper async handling để tránh race conditions
106
-
107
- ## 10. Lưu ý quan trọng
108
-
109
- 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.
110
-
111
- 2. **Declarative Net Request**: Không thể modify requests dynamically như webRequest, chỉ có thể sử dụng static rules.
112
-
113
- 3. **CSP Restrictions**: Một số website có CSP rất nghiêm ngặt, cần multiple fallback methods.
114
-
115
- 4. **Chrome Store Review**: Manifest V3 extensions có thể cần review kỹ hơn từ Chrome Web Store.
116
-
117
- ## 11. Khuyến nghị
118
-
119
- - Test kỹ trên nhiều website khác nhau, đặc biệt các site có CSP nghiêm ngặt
120
- - Monitor console logs để đảm bảo script injection thành công
121
- - Kiểm tra performance impact của multiple injection methods
122
- - Chuẩn bị rollback plan nếu cần thiết
123
- - Test trên các browser khác nhau (Chrome, Edge, etc.)
Binary file
Binary file
@@ -1,13 +0,0 @@
1
- export const environment = {
2
- production: false,
3
- environmentName: 'VGCODER',
4
- firebaseConfig: {
5
- apiKey: "AIzaSyDrpNMso-DXeN7c4vwbpV0idpxnV2vtXhQ",
6
- authDomain: "vetgo-chrome.firebaseapp.com",
7
- databaseURL: "https://vetgo-chrome-default-rtdb.asia-southeast1.firebasedatabase.app",
8
- projectId: "vetgo-chrome",
9
- storageBucket: "vetgo-chrome.appspot.com",
10
- messagingSenderId: "211178224097",
11
- appId: "1:211178224097:web:f73bf5a81c2f4c32fc7aa0"
12
- }
13
- };