Bỏ qua

Browser Extension

GitLab MR browser extension hỗ trợ đọc thay đổi Markdown và so sánh diagram trong tab Changes của merge request. Extension dùng GitLab session hiện tại để đọc file và tạo preview Markdown; diagram được gửi tới Gateway bằng authenticated POST khi reviewer mở panel tương ứng.

1. Phạm vi

Extension version 0.5.5:

  • Chạy trên route merge request diffs và changes;
  • Đọc file .md và .markdown bằng GitLab API;
  • Hiển thị toàn bộ Markdown Before/After bằng GitLab Markdown preview;
  • Ghép diagram theo title, heading gần nhất, source title hoặc thứ tự;
  • Đặt diagram action tại code block được thêm, xóa hoặc thay đổi;
  • Hiển thị Side by side và Onion skin khi hai phía đều tồn tại;
  • Chỉ gửi diagram tới Gateway sau khi panel tương ứng được mở.

Manifest giới hạn GitLab và Gateway theo matches cùng host_permissions. Hostname khác cần một package extension có manifest tương ứng.

2. Cài đặt và cấu hình

Build package:

Set-Location browser-extension
npm install
npm test
npm run package:zip

Giải nén package, mở trang quản lý extension của Chromium, bật Developer mode và chọn Load unpacked với thư mục vừa giải nén.

Trong extension options:

  1. Nhập HTTPS base URL của Gateway, không kèm path.
  2. Nhập shared rendering token.
  3. Chọn Test rồi lưu.

Token nằm trong chrome.storage.local của trusted extension context, không được trả cho content script, GitLab page hoặc URL.

3. Review Markdown và diagram

  1. Đăng nhập GitLab và mở tab Changes.
  2. Chọn View preview before/after để xem toàn bộ file Markdown ở hai cột.
  3. Chọn View diagram diff tại diagram thay đổi; diagram chỉ có ở một phía dùng View added hoặc View removed.
  4. Dùng Side by side để xem hai output độc lập hoặc Onion skin để chồng hai output khi cả Before và After tồn tại.
  5. Kiểm tra cảnh báo pairing nếu nhiều diagram cùng renderer không có title ổn định.

Nên đặt title="..." duy nhất cho mỗi fence để pairing ổn định qua lần sửa.

4. Params

Extension hiện gửi body của fence và chưa chuyển {...} trên dòng mở fence. Đặt option cần dùng trong body:

```mermaid title="Checkout flow"
%%krokup {theme=dark scale=1.5}
flowchart LR
  Cart --> Payment
```

5. Tải, cache và bảo mật

Service worker giới hạn hai render đồng thời, hủy request của MR context cũ và gộp request theo source hash. Cache RAM giữ tối đa 50 entry, 16 MiB tổng và 2 MiB mỗi entry.

  • Extension không lưu GitLab token.
  • Markdown preview dùng GitLab session và CSRF token hiện tại.
  • Diagram source được gửi tới Gateway khi panel tương ứng được mở.
  • Shared rendering token không đại diện cho user identity.
  • Extension nhận diện Pydia như các renderer được hỗ trợ và không tự thiết lập allow-list cho repository.
  • Xóa token khi gỡ extension hoặc bàn giao máy.

6. Kiểm tra nhanh

  1. Tạo MR thay đổi fence có title ổn định.
  2. Kiểm tra Markdown preview với file thay đổi, thêm mới và bị xóa.
  3. Kiểm tra diagram changed, added và removed tại đúng code block.
  4. Kiểm tra Side by side và Onion skin.
  5. Đổi sang MR khác và xác nhận request cũ bị hủy.
  6. Thử token sai, renderer lỗi và GitLab session hết hạn.