Ban khong can hang tuan kinh nghiem de xay mot Chrome extension huu ich. Voi AI API hien dai va mot buoi chieu ranh, ban hoan toan co the tao ra mot cong cu trinh duyet tu dong tom tat trang web, viet lai van ban, hay tra loi cau hoi ve bat ky website nao.

Bai huong dan nay se dua ban qua tung buoc xay mot Chrome extension co kha nang trich xuat noi dung trang web va gui den AI model de tom tat. Ket thuc bai viet, ban se co mot extension chay duoc va co the tuy chinh theo nhu cau rieng.

San Pham Cuoi Cung

Mot Chrome extension voi giao dien popup co the:

  • Trich xuat noi dung van ban tu tab hien tai
  • Gui noi dung den OpenAI API (tuong thich voi cac model ChatGPT)
  • Tra ve ban tom tat ngan gon hien thi ngay trong popup

Kien truc tuong tu hoat dong voi bat ky LLM API nao, bao gom Claude hay cac model chay local.

Yeu Cau Truoc Khi Bat Dau

  • Kien thuc co ban ve HTML, CSS va JavaScript
  • Trinh soan code (khuyen dung VS Code)
  • Trinh duyet Chrome
  • API key cua OpenAI (hoac bat ky API tuong thich nao)

Buoc 1: Tao Cau Truc Du An

Tao mot thu muc moi va them cac file sau:

ai-summarizer-extension/
  manifest.json
  popup.html
  popup.js
  content.js
  styles.css

Buoc 2: Viet File Manifest

Manifest cho Chrome biet extension cua ban hoat dong nhu the nao. Tao file manifest.json:

{
  "manifest_version": 3,
  "name": "AI Page Summarizer",
  "version": "1.0",
  "description": "Tom tat bat ky trang web nao bang AI",
  "permissions": ["activeTab", "scripting"],
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icons/icon16.png",
      "48": "icons/icon48.png",
      "128": "icons/icon128.png"
    }
  },
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"]
    }
  ]
}

Diem quan trong: Chung ta dung Manifest V3 (bat buoc cho extension moi), chi yeu cau quyen activeTab va scripting de giu extension nhe, va dang ky content script chay tren moi trang.

Buoc 3: Xay Giao Dien Popup

Tao file popup.html:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <div class="container">
    <h1>AI Summarizer</h1>
    <div id="status">San sang tom tat</div>
    <button id="summarize-btn">Tom Tat Trang Nay</button>
    <div id="result" class="hidden"></div>
  </div>
  <script src="popup.js"></script>
</body>
</html>

Them style co ban trong styles.css:

body {
  width: 360px;
  padding: 16px;
  font-family: -apple-system, BlinkMacSystemFont, sans-serif;
}
 
.container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
 
h1 {
  font-size: 18px;
  margin: 0;
}
 
button {
  padding: 10px 16px;
  background: #2563eb;
  color: white;
  border: none;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}
 
button:hover {
  background: #1d4ed8;
}
 
button:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}
 
#result {
  max-height: 300px;
  overflow-y: auto;
  padding: 12px;
  background: #f8fafc;
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
}
 
.hidden {
  display: none;
}

Buoc 4: Trich Xuat Noi Dung Trang

Content script (content.js) chay ben trong cac trang web va trich xuat van ban doc duoc:

// content.js - trich xuat noi dung chinh tu trang
function extractPageContent() {
  const selectors = ['article', 'main', '[role="main"]', '.post-content'];
  let content = '';
 
  for (const selector of selectors) {
    const element = document.querySelector(selector);
    if (element) {
      content = element.innerText;
      break;
    }
  }
 
  if (!content) {
    content = document.body.innerText;
  }
 
  // Cat bot de tranh vuot gioi han token
  return content.substring(0, 8000);
}
 
chrome.runtime.onMessage.addListener((request, sender, sendResponse) => {
  if (request.action === 'extractContent') {
    sendResponse({ content: extractPageContent() });
  }
});

Buoc 5: Ket Noi Voi AI API

Day la logic cot loi trong popup.js:

const API_KEY = 'your-api-key-here'; // Luu an toan trong production
const API_URL = 'https://api.openai.com/v1/chat/completions';
 
document.getElementById('summarize-btn').addEventListener('click', async () => {
  const btn = document.getElementById('summarize-btn');
  const status = document.getElementById('status');
  const result = document.getElementById('result');
 
  btn.disabled = true;
  status.textContent = 'Dang trich xuat noi dung...';
 
  try {
    // Lay noi dung tu tab hien tai
    const [tab] = await chrome.tabs.query({
      active: true,
      currentWindow: true
    });
 
    const response = await chrome.tabs.sendMessage(tab.id, {
      action: 'extractContent'
    });
 
    status.textContent = 'Dang gui den AI...';
 
    // Goi AI API
    const aiResponse = await fetch(API_URL, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${API_KEY}`
      },
      body: JSON.stringify({
        model: 'gpt-4o-mini',
        messages: [
          {
            role: 'system',
            content: 'Summarize the following web page content in 3-5 bullet points. Be concise and focus on key information.'
          },
          {
            role: 'user',
            content: response.content
          }
        ],
        max_tokens: 500
      })
    });
 
    const data = await aiResponse.json();
    const summary = data.choices[0].message.content;
 
    result.textContent = summary;
    result.classList.remove('hidden');
    status.textContent = 'Tom tat hoan tat';
  } catch (error) {
    status.textContent = `Loi: ${error.message}`;
  } finally {
    btn.disabled = false;
  }
});

Buoc 6: Tai Va Test Extension

  1. Mo Chrome va truy cap chrome://extensions/
  2. Bat "Developer mode" o goc tren ben phai
  3. Nhan "Load unpacked" va chon thu muc du an
  4. Truy cap bat ky bai viet hay trang blog nao
  5. Nhan icon extension va bam "Tom Tat Trang Nay"

Ban se thay cac bullet point xuat hien trong vai giay.

Buoc 7: Cai Tien Va Tuy Chinh

Khi phien ban co ban da chay, hay xem xet cac nang cap sau:

Them nhieu hanh dong AI: Thay vi chi tom tat, cung cap them dich thuat, rut trich y chinh, hay tra loi cau hoi. Them dropdown trong popup de chon hanh dong, roi thay doi system prompt tuong ung.

Luu API key an toan: Dung chrome.storage.sync de nguoi dung nhap API key rieng qua trang options thay vi hardcode trong code.

Ho tro streaming: Voi output dai, dung streaming API endpoint de hien thi van ban khi dang tao, giup nguoi dung co phan hoi nhanh hon.

Doi model: Code tuong tu hoat dong voi Claude bang cach doi API endpoint va dieu chinh format request. Ban cung co the dung ChatGPT Plus de co rate limit cao hon.

Meo Thuc Te

  • Quan ly token: Luon cat bot noi dung trang truoc khi gui. Hau het bai viet nam trong 4000-8000 ky tu. Gui nhieu hon lang phi token ma khong cai thien chat luong tom tat.
  • Xu ly loi: Request mang co the that bai. Luon boc API call trong try/catch va hien thi thong bao loi co nghia cho nguoi dung.
  • Kiem soat chi phi: Dung gpt-4o-mini cho tac vu tom tat. No nhanh, re va du kha nang cho use case nay.
  • Testing: Test tren nhieu loai trang khac nhau (tin tuc, tai lieu, mang xa hoi) vi viec trich xuat noi dung hoat dong khac nhau tren moi trang.
  • Xuat ban: Khi san sang, nop len Chrome Web Store. Qua trinh review mat 1-3 ngay. Xoa API key hardcode truoc khi nop.

Mo Rong Them

Kien truc co ban nay ho tro nhieu ung dung thuc te:

  • Tro ly viet giup viet lai van ban duoc chon
  • Cong cu nghien cuu tim nguon lien quan
  • Tro ly lap trinh giai thich loi tren cac trang Stack Overflow
  • Tro ly mua sam so sanh gia giua cac tab

Pattern luon giong nhau: trich xuat context tu trang, gui den AI model voi prompt phu hop, va hien thi ket qua.

Cần AI Mạnh Hơn?

Claude xuất sắc với context window dài và suy luận sâu. ChatGPT phù hợp cho các tác vụ tổng quát nhanh chóng.

Thử Claude