Ruka hadi maudhui makuu
Mafunzo ya AI

Jenga Ukurasa Maalum wa AI wa Kichupo Kipya kwa AI Homepage

Jifunze jinsi ya kusakinisha na kutumia AI Homepage, kiendelezi cha Chromium kinachosoma kurasa zilizochaguliwa kutoka kwenye shughuli zako za kuvinjari na kutengeneza ukurasa wa kichupo kipya unaosasishwa kila mara kwa Claude. Geuza muundo, modeli, ratiba ya kujenga upya na maelekezo ya maudhui kukufaa, huku ukizingatia faragha na gharama za API.

Jenga Ukurasa Maalum wa AI wa Kichupo Kipya kwa AI Homepage

AI Homepage hufanya nini

AI Homepage hubadilisha ukurasa mpya wa kichupo wa Chrome au Chromium na kuwa ukurasa wa mwanzo unaoandikwa kutokana na tovuti unazovinjari. Wakala wake hukagua muhtasari uliopangwa wa historia yako, hufungua hadi kurasa nane zinazohusiana katika kivinjari chako ulichoingia, huchanganua maudhui yake, na kuandika ukurasa mpya unaotegemea React.

Matokeo yanaweza kufanana na gazeti la asubuhi, orodha tulivu ya kusoma, dashibodi mnene ya kazi, au mtindo mwingine wowote unaoueleza. Ukurasa wa mwanzo hujengwa upya chinichini ili kichupo kipya kiakisi yale uliyokuwa ukisoma hivi karibuni.

Mfano wa ukurasa wa mwanzo ulioundwa na AI kwa mtindo wa gazeti la asubuhi

Kila kiungo kinachozalishwa hutoka kwenye ukurasa ambao wakala aliusoma kweli. Wakala ameagizwa kutobuni URL, huku kurasa ambazo hawezi kufungua zikiripotiwa badala ya kuachwa kimya.

Kabla ya kuanza

Unahitaji yafuatayo:

AI Homepage ni mradi wa majaribio wa awali unaokusudiwa kuendeshwa kwa kutumia ufunguo wako mwenyewe. Kagua athari zake za faragha na usalama kabla ya kuusakinisha.

Sakinisha kiendelezi

  1. Clone hazina na uingie kwenye saraka yake:
git clone https://github.com/ThariqS/ai-newtab.git
cd ai-newtab
  1. Sakinisha vitegemezi na ujenge kiendelezi kwa kutumia toleo lililobandikwa la pnpm:
npx pnpm@10.11.1 install
npx pnpm@10.11.1 build

Ikiwa pnpm tayari imesakinishwa, amri zinazolingana ni:

pnpm install
pnpm build
  1. Fungua chrome://extensions katika Chrome.
  2. Washa Hali ya msanidi kwa kutumia swichi iliyo kona ya juu kulia.
  3. Bofya Load unpacked na uchague apps/extension/.output/chrome-mv3.
  4. Chrome ikiuliza ikiwa ihifadhi ukurasa mpya wa kichupo uliobadilishwa, chagua Keep it.

Jenga ukurasa wako wa kwanza wa mwanzo

  1. Fungua kichupo kipya.
  2. Bandika ufunguo wako wa API wa Anthropic utakapoombwa.
  3. Bofya Jenga ukurasa wa mwanzo wa leo.

Mwonekano wa maendeleo huonyesha hatua za ujenzi: kumtayarisha wakala, kusoma historia yako, kufungua kurasa katika kivinjari, kuchanganua kurasa hizo, na kuandika ukurasa wa mwanzo. Ujenzi wa kwanza unaweza kuchukua dakika kadhaa.

Unaweza kufunga kichupo huku ujenzi ukiendelea. Kiendelezi huendesha ujenzi katika mfanyakazi wake wa chinichini, na matokeo au maendeleo hupatikana kutoka kwenye kichupo kipya chochote. Chrome ikifungwa wakati wa ujenzi, kichupo kipya kinachofuata hutoa Endelea na ujenzi uliokatizwa.

Geuza maudhui na muundo kukufaa

Fungua ⚙️ Mipangilio kwenye ukurasa wa kichupo kipya. Sehemu ya Maelekezo hujumuishwa katika kila ujenzi na huwa na kipaumbele kuliko maelekezo chaguomsingi ya wakala. Hudhibiti maudhui na mwelekeo wa kuona wa ukurasa.

Kwa mfano, unaweza kutumia maelekezo kama:

  • Gazeti la asubuhi. Herufi za serif, kichwa kikubwa cha gazeti, habari kuu, na safu ya muhtasari mfupi.
  • Safu moja tulivu. Hakuna picha. Mambo matano yanayofaa kusomwa, yakiwa na mstari mmoja unaoeleza kwa nini.
  • Dashibodi mnene: PR na masuala ya GitHub kwanza, kisha Hacker News, halafu kila kitu kingine.
  • Terminal ya kijani kwenye nyeusi, herufi za monospace, kama BBS ya miaka ya 1980.
  • Ruka michezo na siasa. Onyesha hali ya hewa na matukio yangu matatu yajayo ya kalenda kila mara.

Bofya Hifadhi na ujenge upya ili kutumia maelekezo mapya mara moja.

Chagua modeli ya Claude

Mpangilio wa Modeli huamua ni modeli gani ya Claude itaandika ukurasa wako wa mwanzo:

Mfano wa ukurasa wa mwanzo kwa mtindo wa gazeti la asubuhi

  • Claude Sonnet 5.5: usawa chaguomsingi wa ubora na gharama.
  • Claude Haiku 5.5: chaguo la haraka zaidi na la gharama ndogo zaidi.
  • Claude Opus 5.5: mhariri makini zaidi na chaguo la gharama kubwa zaidi.

Modeli iliyobadilishwa itaanza kutumika katika ujenzi unaofuata. Kila ujenzi ni kipindi kimoja cha wakala kinachotozwa kwenye ufunguo wako wa API wa Anthropic, na gharama ya jumla hutegemea modeli iliyochaguliwa na kiasi cha maudhui ambacho wakala husoma.

Dhibiti ujenzi wa kiotomatiki

Ujenzi wa kiotomatiki huwashwa kwa chaguomsingi. Baada ya kukamilisha ujenzi mmoja wa mwongozo, kiendelezi kinaweza kujenga upya ukurasa wa mwanzo kimya kimya unapokuwa wa zamani kuliko muda uliochagua: saa 6, 12, 24, au 48.

Ujenzi wa kiotomatiki haujaribu tena ujenzi ulioshindwa hadi muda unaofuata, hivyo kuzuia mzunguko usio na mwisho wa kujaribu tena. Ili ujenge upya mara moja, bofya ↻ Jenga upya kwenye kona ya juu kulia. Unaweza pia kuzima ujenzi wa kiotomatiki na kujenga tu inapohitajika ili kudhibiti matumizi ya API.

Elewa kile ambacho kiendelezi kinaweza kufikia

Kwa kila ujenzi, kiendelezi hupanga tovuti katika historia yako ya kuvinjari na kufungua hadi kurasa nane. Huruka injini za utafutaji, barua pepe za wavuti, tovuti za benki, na kurasa za uuzaji ambazo mtumiaji ametoka. Ikiwa ukurasa hauwezi kufunguliwa, matokeo huripoti kizuizi hicho.

Onyo la faragha: kiendelezi hutuma muhtasari wa historia yako ya kuvinjari, ukiwemo vikoa maarufu, idadi ya matembezi, na baadhi ya vichwa vya kurasa, pamoja na HTML iliyosafishwa ya hadi kurasa nane kwenye API ya Anthropic. Kwa kuwa kurasa hupakiwa katika kivinjari chako ulichoingia, zinaweza kuwa na maudhui ya faragha.

Muundo huu hutumia ufunguo wako mwenyewe wa API, ambao hubaki katika hifadhi ya ndani ya kiendelezi. Kikao cha wakala na kurasa zilizopakiwa hufutwa kila muundo unapokamilika. Soma ARCHITECTURE.md kwa maelezo zaidi kuhusu faragha. Mradi pia unaonya dhidi ya kuchapisha kiendelezi hiki kwenye duka bila kukibadilisha, kwa sababu mtu yeyote mwenye ufikiaji wa wasifu wa kivinjari anaweza kusoma ufunguo wa API uliohifadhiwa.

Jinsi muundo unavyofanya kazi

  1. getHistory hutoa muhtasari uliopangwa wa vikoa unavyotembelea mara nyingi.
  2. getPageHtml huchagua hadi kurasa nane. Kiendelezi huzifungua katika dirisha la usuli, husafisha HTML yake, na kuweka matokeo kama faili katika sandbox ya wakala.
  3. grep na read hutoa vichwa vya habari, machapisho, na viungo kutoka kwenye faili hizo.
  4. write huunda kipengele cha React ambacho ukurasa wa kichupo kipya huonyesha.

Worker wa usuli wa kiendelezi huendesha kikao cha Claude Managed Agents moja kwa moja, bila seva ya kati. Zana mbili maalum huendeshwa ndani ya kiendelezi kwa sababu zinahitaji chrome.history na chrome.tabs. Uchakataji mwingine hutokea katika sandbox ya wakala, ambapo ufikiaji wa shell umezimwa kwa sababu kurasa zilizokwaruzwa huchukuliwa kuwa ingizo lisiloaminika.

Tengeneza na ujaribu mradi

Hifadhi hii imepangwa katika maeneo matatu makuu:

  • packages/agent-core: mzunguko wa wakala usiotegemea mwenyeji, bila chrome.* au node:*.
  • apps/extension: kiendelezi cha WXT na React MV3.
  • harness: hati za Bun za kuendesha agent core nje ya Chrome na kujaribu kiendelezi kilichojengwa.

Amri muhimu za uendelezaji ni pamoja na:

pnpm dev                 # WXT yenye upakiaji upya wa papo hapo
pnpm typecheck           # vifurushi vyote
pnpm test                # majaribio ya unit; hakuna miito ya API, inahitaji Bun
pnpm extension:test      # jaribio la kiendelezi cha Chrome lisilo na kiolesura; hakuna miito ya API

Ili kuendesha muundo kamili wa wakala ukitumia API halisi pamoja na historia ya majaribio, unda faili la mazingira na uweke ufunguo wako:

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

Amri ya uthibitishaji hukagua kuwa matokeo yaliyotengenezwa yanaonyeshwa ipasavyo.

Sasisha kiendelezi

Baada ya kuvuta mabadiliko mapya ya hifadhi, jenga upya kiendelezi:

npx pnpm@10.11.1 build

Kisha fungua chrome://extensions na ubofye ikoni ya kupakia upya ya AI Homepage. Muundo uliosasishwa utatumika kwa vichupo vipya vitakavyofunguliwa.

Hitimisho

AI Homepage hubadilisha uvinjari wa hivi karibuni kuwa matumizi ya kichupo kipya yaliyobinafsishwa na kusasishwa kila mara. Isakinishe kwa kujenga kiendelezi cha Chromium ndani ya kompyuta yako, weka ufunguo wako wa Anthropic, na eleza mpangilio na vipaumbele vya usomaji unavyotaka. Kabla ya kuitumia, zingatia gharama ya API, maudhui ya faragha yanayoweza kupakiwa wakati wa muundo, na hali ya majaribio ya mradi.