Chuyển đến nội dung chính
Hướng dẫn AI

Tạo Trang chủ Tab mới AI được cá nhân hóa với AI Homepage

Tìm hiểu cách cài đặt và sử dụng AI Homepage, một tiện ích Chromium đọc các trang được chọn từ hoạt động duyệt web của bạn và liên tục tạo trang tab mới bằng Claude. Tùy chỉnh thiết kế, mô hình, lịch xây dựng lại và hướng dẫn nội dung, đồng thời lưu ý đến quyền riêng tư và chi phí API.

Thời gian đọc khoảng 15 phút
Tạo Trang chủ Tab mới AI với AI Homepage

AI Homepage hoạt động như thế nào

AI Homepage thay thế trang tab mới của Chrome hoặc Chromium bằng một trang chủ được viết dựa trên các website bạn thực sự truy cập. Tác nhân của ứng dụng xem xét bản tóm tắt lịch sử được xếp hạng, mở tối đa tám trang liên quan trong trình duyệt đã đăng nhập của bạn, phân tích nội dung của chúng và tạo một trang mới dựa trên React.

Kết quả có thể giống một tờ báo buổi sáng, danh sách đọc thư thái, bảng điều khiển công việc dày đặc hoặc gần như bất kỳ phong cách nào bạn mô tả. Trang chủ được xây dựng lại trong nền để mỗi tab mới có thể phản ánh những gì bạn đã đọc gần đây.

Ví dụ về trang chủ do AI tạo theo phong cách báo buổi sáng

Mỗi liên kết được tạo đều đến từ một trang mà tác nhân thực sự đã đọc. Tác nhân được hướng dẫn không bịa URL, còn những trang không thể mở sẽ được báo cáo thay vì âm thầm bỏ qua.

Trước khi bắt đầu

Bạn cần có:

AI Homepage là một dự án thử nghiệm giai đoạn đầu, được thiết kế để chạy bằng khóa API của bạn. Hãy xem xét các vấn đề về quyền riêng tư và bảo mật trước khi cài đặt.

Cài đặt tiện ích

  1. Sao chép kho lưu trữ và chuyển vào thư mục của kho:
git clone https://github.com/ThariqS/ai-newtab.git
cd ai-newtab
  1. Cài đặt các phần phụ thuộc và xây dựng tiện ích bằng phiên bản pnpm được ghim:
npx pnpm@10.11.1 install
npx pnpm@10.11.1 build

Nếu pnpm đã được cài đặt, các lệnh tương đương là:

pnpm install
pnpm build
  1. Mở chrome://extensions trong Chrome.
  2. Bật Chế độ nhà phát triển bằng công tắc ở góc trên bên phải.
  3. Nhấp vào Tải tiện ích đã giải nén và chọn apps/extension/.output/chrome-mv3.
  4. Nếu Chrome hỏi có muốn giữ trang tab mới đã thay đổi hay không, hãy chọn Giữ lại.

Xây dựng trang chủ đầu tiên

  1. Mở một tab mới.
  2. Dán khóa API Anthropic của bạn khi được yêu cầu.
  3. Nhấp vào Xây dựng trang chủ hôm nay.

Màn hình tiến trình hiển thị các giai đoạn xây dựng: chuẩn bị tác nhân, đọc lịch sử của bạn, mở các trang trong trình duyệt, phân tích các trang đó và viết trang chủ. Lần xây dựng đầu tiên có thể mất vài phút.

Bạn có thể đóng tab trong khi quá trình xây dựng tiếp tục. Tiện ích chạy quá trình xây dựng trong worker nền và kết quả hoặc tiến trình có thể được xem từ bất kỳ tab mới nào. Nếu Chrome đóng trong khi đang xây dựng, tab mới tiếp theo sẽ cung cấp tùy chọn Tiếp tục quá trình xây dựng bị gián đoạn.

Tùy chỉnh nội dung và thiết kế

Mở ⚙️ Cài đặt trên trang tab mới. Trường Hướng dẫn được đưa vào mọi lần xây dựng và được ưu tiên hơn hướng dẫn mặc định của tác nhân. Trường này kiểm soát cả nội dung lẫn định hướng hình ảnh của trang.

Ví dụ, bạn có thể sử dụng các hướng dẫn như:

  • Một tờ báo buổi sáng. Phông chữ serif, tiêu đề báo lớn, một tin chính và một cột tin ngắn.
  • Một cột duy nhất, thư thái. Không có hình ảnh. Năm điều đáng đọc, kèm một dòng giải thích lý do.
  • Bảng điều khiển dày đặc: PR và issue trên GitHub trước, tiếp đến là Hacker News, rồi mọi thứ khác.
  • Thiết bị đầu cuối xanh trên nền đen, phông chữ monospace, giống BBS thập niên 1980.
  • Bỏ qua thể thao và chính trị. Luôn hiển thị thời tiết và ba sự kiện lịch tiếp theo của tôi.

Nhấp vào Lưu & xây dựng lại để áp dụng ngay các hướng dẫn mới.

Chọn mô hình Claude

Cài đặt Mô hình xác định mô hình Claude nào sẽ viết trang chủ của bạn:

Ví dụ về trang chủ theo phong cách báo buổi sáng

  • Claude Sonnet 5.5: sự cân bằng mặc định giữa chất lượng và chi phí.
  • Claude Haiku 5.5: lựa chọn nhanh nhất và ít tốn kém nhất.
  • Claude Opus 5.5: biên tập viên cẩn trọng nhất và cũng là lựa chọn đắt nhất.

Mô hình đã thay đổi sẽ có hiệu lực từ lần xây dựng tiếp theo. Mỗi lần xây dựng là một phiên tác nhân duy nhất được tính phí vào khóa API Anthropic của bạn, và tổng chi phí phụ thuộc vào mô hình đã chọn cũng như lượng nội dung tác nhân đọc.

Kiểm soát việc xây dựng lại tự động

Tính năng xây dựng lại tự động được bật theo mặc định. Sau khi hoàn tất một lần xây dựng thủ công, tiện ích có thể âm thầm xây dựng lại trang chủ khi trang đã cũ hơn khoảng thời gian bạn chọn: 6, 12, 24 hoặc 48 giờ.

Việc xây dựng lại tự động sẽ không thử lại một lần xây dựng thất bại cho đến khoảng thời gian tiếp theo, nhằm ngăn vòng lặp thử lại vô hạn. Để xây dựng lại ngay, hãy nhấp vào ↻ Xây dựng lại ở góc trên bên phải. Bạn cũng có thể tắt tính năng xây dựng lại tự động và chỉ xây dựng khi cần để kiểm soát mức sử dụng API.

Hiểu những gì tiện ích có thể truy cập

Trong mỗi lần xây dựng, tiện ích xếp hạng các website trong lịch sử duyệt web của bạn và mở tối đa tám trang. Tiện ích bỏ qua công cụ tìm kiếm, webmail, các trang ngân hàng và các trang tiếp thị yêu cầu đăng xuất. Nếu không thể mở một trang, kết quả sẽ báo cáo giới hạn đó.

Cảnh báo quyền riêng tư: tiện ích gửi bản tóm tắt lịch sử duyệt web của bạn, bao gồm các miền hàng đầu, số lượt truy cập và một số tiêu đề trang, cùng HTML đã làm sạch của tối đa tám trang đến API Anthropic. Vì các trang được tải trong trình duyệt đã đăng nhập của bạn, chúng có thể chứa nội dung riêng tư.

Bản dựng sử dụng API key của bạn, được lưu trong bộ nhớ cục bộ của tiện ích. Phiên agent và các trang đã tải lên sẽ bị xóa khi mỗi lần dựng kết thúc. Đọc ARCHITECTURE.md để biết thêm chi tiết về quyền riêng tư. Dự án cũng cảnh báo không nên xuất bản nguyên trạng tiện ích lên cửa hàng, vì bất kỳ ai có quyền truy cập vào hồ sơ trình duyệt đều có thể đọc API key được lưu trữ.

Cách bản dựng hoạt động

  1. getHistory cung cấp bản tóm tắt được xếp hạng về các miền bạn truy cập nhiều nhất.
  2. getPageHtml chọn tối đa tám trang. Tiện ích mở các trang này trong một cửa sổ nền, làm sạch HTML của chúng và gắn kết kết quả dưới dạng các tệp trong sandbox của agent.
  3. grep và read trích xuất tiêu đề, bài đăng và liên kết từ các tệp đó.
  4. write tạo một React component để trang tab mới hiển thị.

Worker nền của tiện ích điều khiển trực tiếp một phiên Claude Managed Agents, không qua máy chủ trung gian. Hai công cụ tùy chỉnh chạy bên trong tiện ích vì chúng yêu cầu chrome.history và chrome.tabs. Các xử lý khác diễn ra trong sandbox của agent, nơi quyền truy cập shell bị vô hiệu hóa vì các trang được thu thập được xem là đầu vào không đáng tin cậy.

Phát triển và kiểm thử dự án

Kho mã được tổ chức thành ba khu vực chính:

  • packages/agent-core: vòng lặp agent không phụ thuộc máy chủ, không sử dụng chrome.* hoặc node:*.
  • apps/extension: tiện ích WXT và React MV3.
  • harness: các script Bun để chạy agent core bên ngoài Chrome và kiểm thử tiện ích đã dựng.

Một số lệnh phát triển hữu ích:

pnpm dev                 # WXT với tính năng tải lại nóng
pnpm typecheck           # tất cả các gói
pnpm test                # kiểm thử đơn vị; không gọi API, yêu cầu Bun
pnpm extension:test      # kiểm thử tiện ích Chrome không giao diện; không gọi API

Để chạy bản dựng agent đầy đủ với API thực và lịch sử mẫu, hãy tạo tệp môi trường và cung cấp key của bạn:

cp .env.example .env
pnpm agent:run
pnpm agent:verify

Lệnh xác minh kiểm tra để đảm bảo đầu ra được tạo thực sự hiển thị.

Cập nhật tiện ích

Sau khi kéo các thay đổi mới từ kho mã, hãy dựng lại tiện ích:

npx pnpm@10.11.1 build

Sau đó mở chrome://extensions và nhấp vào biểu tượng tải lại của AI Homepage. Bản dựng đã cập nhật sẽ được sử dụng cho các tab mới tiếp theo.

Kết luận

AI Homepage biến hoạt động duyệt web gần đây thành trải nghiệm tab mới được cá nhân hóa và liên tục làm mới. Hãy cài đặt bằng cách dựng tiện ích Chromium cục bộ, cung cấp key Anthropic của bạn và mô tả bố cục cùng các ưu tiên đọc mà bạn mong muốn. Trước khi sử dụng, hãy cân nhắc chi phí API, nội dung riêng tư có thể được tải lên trong quá trình dựng và trạng thái thử nghiệm của dự án.