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.
- package/package.json +2 -2
- package/.vgignore +0 -10
- package/ARCHITECTURE.md +0 -255
- package/change.sh +0 -0
- package/gulpfile.js +0 -111
- package/vetgo-auto/README.md +0 -3
- package/vetgo-auto/chrome/CSP_IMPROVEMENTS.md +0 -147
- package/vetgo-auto/chrome/MANIFEST_V3_MIGRATION.md +0 -123
- package/vetgo-auto/chrome/assets/icon128.png +0 -0
- package/vetgo-auto/chrome/assets/icon16.png +0 -0
- package/vetgo-auto/chrome/assets/icon48.png +0 -0
- package/vetgo-auto/chrome/environments/environment.ts +0 -13
- package/vetgo-auto/chrome/manifest.json +0 -66
- package/vetgo-auto/chrome/rules.json +0 -23
- package/vetgo-auto/chrome/src/background.ts +0 -200
- package/vetgo-auto/chrome/src/controller.ts +0 -172
- package/vetgo-auto/chrome/src/controllers/common.firebase.ts +0 -31
- package/vetgo-auto/chrome/src/controllers/firebase-crud.ts +0 -147
- package/vetgo-auto/chrome/src/controllers/load-common-fuc.controller.ts +0 -24
- package/vetgo-auto/chrome/src/controllers/load-script.controller.ts +0 -23
- package/vetgo-auto/chrome/src/script-injector.ts +0 -305
- package/vetgo-auto/chrome/src/sidepanel.css +0 -166
- package/vetgo-auto/chrome/src/sidepanel.html +0 -48
- package/vetgo-auto/chrome/src/sidepanel.ts +0 -127
- package/vetgo-auto/chrome/src/utils/ai-domains.ts +0 -33
- package/vetgo-auto/chrome/src/utils/db-utils.ts +0 -2
- package/vetgo-auto/chrome/src/utils/environment-storage.service.ts +0 -85
- package/vetgo-auto/chrome/src/utils/injector-script.ts +0 -47
- package/vetgo-auto/chrome/webpack.config.js +0 -53
- package/vetgo-auto/chrome/webpack.config.prod.js +0 -54
- package/vetgo-auto/package.json +0 -30
- package/vetgo-auto/tsconfig.json +0 -27
- 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.
|
|
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
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'));
|
package/vetgo-auto/README.md
DELETED
|
@@ -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
|
|
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
|
-
};
|