> ## Documentation Index
> Fetch the complete documentation index at: https://ext.eplus.dev/llms.txt
> Use this file to discover all available pages before exploring further.

# Cài đặt

> Build và nạp Payment Sandbox Helper trên Chrome hoặc Firefox

## Cách cài đặt

Payment Sandbox Helper hiện được tài liệu hóa theo cách build từ mã nguồn. Có thể kiểm tra trang [GitHub Releases](https://github.com/ePlus-DEV/payment-sandbox-helper/releases) để tải package khi dự án phát hành bản đóng gói.

<Warning>
  Chỉ cài package được phát hành từ repository chính thức của ePlus-DEV. Tiện ích trình duyệt có thể truy cập các trang nằm trong phạm vi content script đã khai báo.
</Warning>

## Build từ mã nguồn

**Yêu cầu:** Node.js LTS hiện hành, Corepack và Yarn 4.

```bash theme={null}
# Clone repository
git clone https://github.com/ePlus-DEV/payment-sandbox-helper.git
cd payment-sandbox-helper

# Kích hoạt package manager được dự án khai báo
corepack enable

# Cài dependency
yarn install

# Kiểm tra TypeScript
yarn compile

# Build Chrome
yarn build

# Tùy chọn: build Firefox
yarn build:firefox
```

## Nạp vào Chrome

<Steps>
  <Step title="Build tiện ích">
    Chạy `yarn build`. WXT tạo output Chrome Manifest V3 tại `.output/chrome-mv3`.
  </Step>

  <Step title="Mở trang quản lý extension">
    Truy cập `chrome://extensions` và bật **Developer mode**.
  </Step>

  <Step title="Nạp thư mục output">
    Chọn **Load unpacked**, sau đó chọn `.output/chrome-mv3`.
  </Step>

  <Step title="Ghim tiện ích">
    Ghim Payment Sandbox Helper trên thanh công cụ để dễ mở sidebar khi kiểm thử.
  </Step>
</Steps>

## Nạp tạm thời vào Firefox

<Steps>
  <Step title="Build bản Firefox">
    Chạy `yarn build:firefox`.
  </Step>

  <Step title="Mở Firefox Debugging">
    Truy cập `about:debugging#/runtime/this-firefox` và chọn **Load Temporary Add-on**.
  </Step>

  <Step title="Chọn manifest">
    Chọn `manifest.json` trong `.output/firefox-mv3`.
  </Step>
</Steps>

<Note>
  Temporary add-on trên Firefox sẽ bị gỡ sau khi khởi động lại trình duyệt. Nên dùng package đã ký khi dự án phát hành bản chính thức.
</Note>

## Tạo package ZIP

```bash theme={null}
# Chrome
yarn zip

# Firefox
yarn zip:firefox
```

## Quyền truy cập

| Quyền          | Mục đích                                                  |
| -------------- | --------------------------------------------------------- |
| `activeTab`    | Làm việc với trang sandbox hoặc trang phát triển đang mở. |
| `scripting`    | Hỗ trợ tương tác với trang trong luồng của tiện ích.      |
| `sidePanel`    | Hiển thị sidebar trên Chrome.                             |
| `contextMenus` | Thêm thao tác điền dữ liệu vào menu chuột phải.           |
| `storage`      | Lưu quốc gia, tên chủ thẻ, hình nền và thiết lập cục bộ.  |

Firefox sử dụng `sidebar_action` thay cho API `sidePanel` của Chrome. Manifest Firefox khai báo không thu thập dữ liệu bắt buộc.


## Related topics

- [Payment Sandbox Helper](/vi/payment-sandbox-helper/introduction.md)
- [Tiện ích trình duyệt ePlus.DEV](/vi/index.md)
- [Hướng dẫn sử dụng](/vi/payment-sandbox-helper/usage.md)