Build a Claude New Tab Page

Build a Chrome new tab extension that uses Claude to redesign your homepage.

Introduction

30 Second Summary

Every new tab starts as empty space, even though your recent reading says plenty about what matters today. Turning that trail into a useful daily page usually takes time you do not have.

In this project, you will build a Chrome extension that uses Claude Managed Agents to turn up to 8 recently visited pages into a personal homepage. You will compare the cost of two generated versions in the Anthropic Console.

What You'll Build

You will open a new tab to a homepage that Claude wrote from your recent browsing in the style you requested.

By the end of this project, you'll have:

  • A personal new tab page that turns up to 8 recently visited pages into a homepage written for your day.
  • A restyled second homepage that shows how a new style request changes the generated page.
  • Controlled spending with automatic rebuilds switched off and each run visible in the Anthropic Console.
  • Secret Mission: An optional challenge to push your browser extension skills further.

Are there any prerequisites?

You need Google Chrome, Git, Node.js with pnpm, plus an Anthropic API key with available credit.

Use a browser profile without sensitive history because the extension sends up to 8 recently visited pages to Claude.

Before We Start

The extension runs locally in Google Chrome. A working browser setup lets you load your own build later.

Git downloads the source code. Node.js runs the build through pnpm.

The Anthropic Console gives the extension paid API access through an API key. This step prepares every prerequisite before any project files arrive.

In this step, get ready to:
  • Confirm Google Chrome can manage unpacked extensions.
  • Prepare an Anthropic Console account with API credit and an API key.
  • Verify Git, Node.js, and pnpm from your terminal.
Check Google Chrome

Chrome manages local extension builds from its Extensions page. This check confirms your browser can reach that page without changing its settings.

  • Press Cmd+Space on macOS or the Windows key on Windows to open system search.
  • Type Google Chrome in the search field.
  • Press Enter to open Google Chrome.
  • Choose the tab below that matches what you see.

✔️ Google Chrome opens

  • Select the address bar at the top of Chrome.
  • Enter chrome://extensions.
  • Press Enter to open the Extensions page.
  • Confirm the Developer mode toggle is visible near the top of the page.
  • Leave the toggle in its current position.

Your browser is ready. Chrome can reach the controls used to load a local extension build.

ⓧ Google Chrome is missing

  • Visit the official Chrome download page in your current browser.
  • Download the installation file for your operating system.
  • Complete the installer using its on-screen instructions.
  • Open Google Chrome through system search.
  • Enter chrome://extensions in the address bar.
  • Confirm the Developer mode toggle is visible near the top of the page.

Protect your browsing history

The extension reads up to 8 recently visited pages during a build. It sends their contents to Claude as input for your homepage.

  • Use a Chrome profile whose recent history contains no sensitive pages.
Prepare your Anthropic Console account

The extension needs an Anthropic Console account with API credit. Its API key authorizes each homepage build against that balance.

Keep spending deliberate

Billing setup can feel risky. Every generated homepage consumes API credit from your account.

Your API key can spend that balance. Store it with the same care as a password.

That sensitive part is complete. Your account now has a stored credential for the extension.

Verify your development tools

The repository uses three command-line tools. A version response proves each tool is installed and available to the build process.

  • Press Cmd+Space on macOS or the Windows key on Windows to open system search.
  • Type Terminal on macOS or PowerShell on Windows.
  • Press Enter to open the command-line app.

Before you run the final check, how many version numbers do you expect the terminal to print?

  • Check Git, Node.js, and pnpm by running these commands:
git --version
node --version
pnpm --version

What do these checks prove?

  • The first line asks git to report the installed Git version.
  • The second line asks node to report the installed Node.js version.
  • The third line asks pnpm to report the installed package manager version.

✔️ I see three version numbers

Your terminal printed a version for every tool. Your local build toolchain is ready to use.

ⓧ One or more commands are missing

  • Install Git from the official Git installation page if the first command failed.
  • Install an LTS release from the official Node.js download page if the second command failed.
  • Install pnpm using the recommended method for your operating system on the official pnpm installation page if the third command failed.
  • Complete every installer using its on-screen instructions.
  • Close your current command-line window after the installations finish.
  • Reopen Terminal on macOS or PowerShell on Windows through system search.
  • Run all three checks again:
git --version
node --version
pnpm --version

What should you see now?

Each line should print a version number. Those three responses confirm the tools are available from your terminal.

Still missing a command?

  • Reopen your command-line app after installing a tool so it can load the updated system path.
  • Return to the official installation page for the missing tool if its installer did not finish.

Still stuck? Help me diagnose which prerequisite is missing from my terminal.

Your browser can manage local extensions. Your account credentials and local build tools are also ready. Next, you'll clone the repository before producing the unpacked Chrome build.

Build the Extension

Chrome can only load the generated files for this extension. The repository starts as source code, so this step turns it into a loadable production build.

Git copies the project to your Desktop. pnpm installs the repository's dependencies.

The build creates the chrome-mv3 folder that Chrome loads in the next step.

In this step, get ready to:
  • Clone the ai-newtab repository to your Desktop.
  • Install the repository's pnpm dependencies.
  • Create the chrome-mv3 folder with a production build.
Get the source code

The repository holds the extension's source files. Cloning gives you a local copy that you can build on your computer.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Terminal (macOS) or PowerShell (Windows) into the search bar.
  • Press Enter to open the selected terminal application.
  • Move to your Desktop by running this command:
cd ~/Desktop

What does this command do?

This changes the terminal's current location to your Desktop. The cloned folder appears in a place that is easy to find.

  • Clone the repository and enter its folder by running these commands:
git clone https://github.com/ThariqS/ai-newtab.git
cd ai-newtab

What do these commands do?

  • The first command uses git to copy the repository into a new ai-newtab folder.
  • The second command moves your terminal into the new ai-newtab folder.
  • Confirm the repository contents are available by running:
ls

What does this command show?

The ls command lists the files and folders in your current terminal location. It confirms that you entered the cloned repository.

You should see repository folders including apps and packages.

Good progress. Your local copy is ready for dependency installation.

Repository folders missing?

  • Check that your terminal path ends with ai-newtab.
  • Confirm your internet connection if cloning stopped before completion.
  • Run the clone commands above again from your Desktop after removing any incomplete copy.

Still stuck? Help me troubleshoot why the ai-newtab repository did not clone correctly.

Make the project build-ready

The source code depends on packages that are stored outside the repository. Installing those dependencies gives the build process every library it expects.

The first installation can spend some time downloading packages. A quiet terminal can be normal while those downloads finish.

  • Restore the repository's dependencies by running:
pnpm install

What does this command do?

  • The pnpm command reads the repository's package definitions.
  • It downloads the libraries required by the extension.
  • It prepares those libraries for the production build.

You'll see package download progress. Your command prompt returns when installation completes.

Solid progress. Every dependency needed by the production build is now available.

Dependency installation failing?

  • Check that your terminal is still inside the ai-newtab folder.
  • Confirm your internet connection if package downloads stop.
  • Run the installation command above again after the connection recovers.

Need a hand? Help me fix my pnpm dependency installation.

Produce Chrome-ready files

A production build converts the source into files Chrome can run. Its output becomes the folder you load as an unpacked extension.

The build can take a moment while pnpm compiles the extension.

  • Run the repository's production build with this command:
pnpm build

What does this command do?

The pnpm command runs the repository's production build. The generated Chrome files go into apps/extension/.output/chrome-mv3.

Your command prompt returns when the build finishes successfully. The generated folder is now ready for one final check.

Before you check, do you think the build created the exact folder Chrome expects?

  • Confirm the build output exists by running:
ls apps/extension/.output/chrome-mv3

What does this check prove?

The ls command reads the contents of the specified output folder. A file listing confirms that the production build created the Chrome extension files.

You should see build files listed from apps/extension/.output/chrome-mv3.

That's the hard part done. Your production folder is ready to load into Chrome.

Build folder missing?

  • Check that your terminal is still inside the ai-newtab folder.
  • Review the build output for the first reported failure.
  • Return to the dependency installation command above if the build reports missing packages.

Need help? Help me find out why the chrome-mv3 build folder was not created.

Your repository is cloned, its dependencies are installed, and the production build is complete. Next, you'll load the unpacked extension into Chrome.

Load the Unpacked Extension

Your production build is ready in the chrome-mv3 folder. Google Chrome must load those local files before the extension can replace a new tab.

Developer mode lets Chrome add an unpacked extension directly from a folder on your computer. This step connects your completed build to Chrome's extension system.

In this step, get ready to:
  • Open Chrome's extensions page.
  • Enable Developer mode.
  • Load the chrome-mv3 build as an unpacked extension.
Prepare Chrome for local loading

Chrome keeps local extension controls behind the Developer mode toggle. Enabling this mode reveals the control that loads your build folder.

  • Press Cmd+Space (macOS) or the Windows key (Windows) to open your search bar.
  • Type Google Chrome into the search bar.
  • Press Enter to open Google Chrome.
  • Click the address bar at the top of Chrome.
  • Enter chrome://extensions into the address bar.
  • Press Enter to open the Extensions page.
  • Turn on the Developer mode toggle near the top of the page.

That's the first checkpoint cleared. Chrome now shows the Load unpacked control near the top of the page.

Add the production build

Chrome reads the unpacked extension directly from apps/extension/.output/chrome-mv3. Selecting that final folder gives Chrome the built extension files it needs.

The .output folder can be tricky to find on macOS because the picker may hide dot-prefixed names. A keyboard shortcut reveals it when needed.

  • Click Load unpacked near the top of the Extensions page.
  • Navigate to the cloned ai-newtab repository from earlier.
  • Open the apps folder.
  • Open the extension folder.
  • Press Cmd+Shift+. on macOS if the .output folder is hidden.
  • Open the .output folder.
  • Select the chrome-mv3 folder.

Before you confirm the folder, what new evidence do you expect to see on the Extensions page?

  • Confirm the selected folder to load the extension.

Your local build is in Chrome now. You'll see an ai-newtab extension card in the extensions list.

Extension Card Missing?

  • Choose the chrome-mv3 folder itself if Chrome rejects your selection.
  • Press Cmd+Shift+. in the macOS picker if .output is missing.
  • Check the Extensions page for a loading error if the card does not appear.

Still stuck? Help me troubleshoot why Chrome is not loading my ai-newtab chrome-mv3 folder.

Your ai-newtab build is loaded in Chrome. Next up, you'll open a new tab and start your first homepage build.

Start Today's Homepage Build

Your unpacked ai-newtab Chrome extension is already active in Google Chrome. The new-tab page is now the control surface for starting a personal homepage run.

In this step, you give the extension your Anthropic API key. Its background worker uses the credential to start a Claude Managed Agents session.

In this step, get ready to:
  • Open a new tab to display the ai-newtab setup page.
  • Enter your Anthropic API key without exposing it.
  • Start the homepage build.
Open the extension setup page

A browser extension can replace the page Chrome normally shows when you open a tab. This custom page is where ai-newtab collects the credential needed to start a run.

  • Switch back to Google Chrome.
  • Open a new tab.

You should see the ai-newtab setup page. The page includes an API key input plus the Build today's homepage button.

Seeing Your Usual New Tab Page?

  • Return to the existing chrome://extensions tab from earlier.
  • Confirm the ai-newtab extension card still appears.
  • Use the card's reload control if Chrome shows an extension error.

Still seeing the usual page? Help me troubleshoot why ai-newtab is not replacing my new tab page.

Enter your Anthropic API key

The API key authorizes ai-newtab to make billable requests through your Anthropic account. Handling a live credential can feel risky, so pause before placing it into the setup page.

Protect Your API Key

Anyone who obtains this credential could use your Anthropic account. Give the value the same care you would give a password.

  • Keep the key out of screenshots.
  • Keep the key out of messages.
  • Paste the key only into the ai-newtab setup page from your unpacked build.
  • Copy your Anthropic API key from the secure place where you stored it.
  • Paste the key into the API key input on the ai-newtab setup page.

The setup page now has the credential it needs to start your homepage run.

Start the homepage build

ai-newtab can send up to 8 recently visited pages to Claude. Those pages give the agent context for writing your homepage.

This privacy check is worth taking seriously. Your recent browsing history should contain nothing sensitive before you start the run.

  • Confirm the recent history in your current Chrome profile is safe to share with Anthropic.

Starting the build can add usage charges to your Anthropic account. One deliberate click keeps this step to a single run.

Before you click the button, do you expect the page to stay in setup mode or switch to an in-progress state?

  • Click Build today's homepage once.

You'll see the setup page switch to an in-progress state. That's the handoff complete: ai-newtab has started the homepage build.

Build Does Not Start?

  • Confirm the API key input still contains your key.
  • Return to the extension card from earlier to check for an error.
  • Avoid clicking the build button repeatedly because each successful click can start billable work.

Still stuck? Help me troubleshoot why my ai-newtab homepage build is not starting.

Your API key is in place. Next up, you'll watch the active run turn your recent pages into a generated homepage.

View Your Generated Homepage

The ai-newtab extension is already running inside Chrome. Its first homepage build is underway.

Claude Managed Agents uses up to eight recently visited pages as context for this build. This step turns that active run into a homepage you can open from a fresh tab.

In this step, get ready to:
  • Monitor the active homepage build until it finishes.
  • Open a fresh Chrome tab to confirm the generated homepage appears.
Watch the first build finish

The active run is creating the page from your recent browsing context. Its progress state tells you when the first version is ready.

  • Return to the new tab where the build is already running.
  • Keep that tab open until its progress indicates the run is complete.

The first build is ready once the page stops showing an in-progress state. You should see confirmation that the run has finished.

What Shaped This Homepage?

The extension sends up to eight recently visited pages to Claude as context for the run.

Claude uses those page topics to write the first homepage. Recognizable subjects show that your browsing context reached the agent.

Open the generated homepage

A new-tab replacement proves itself on a completely fresh tab. This check confirms Chrome is serving the generated page whenever you start browsing.

Before you open a fresh tab, which recent browsing topic do you expect to recognize?

  • Click the plus-shaped control beside Chrome's tab bar to create a fresh tab.

You should see a Claude-generated personal homepage in place of Chrome's standard new-tab page. Its content should connect to your recent browsing.

  • Scan the homepage for one topic that matches a page you visited recently.

A recognizable topic confirms that the extension used your recent browsing context. You made it work: a fresh Chrome tab now opens to your generated homepage.

Homepage Not Appearing?

  • Return to the original new tab if the fresh tab still shows build progress.
  • Wait until the progress indicates the run is complete.
  • Create another fresh tab from Chrome's tab bar.
  • Switch back to chrome://extensions from earlier if Chrome shows its standard new-tab page.
  • Confirm that ai-newtab still appears in the extensions list.

Still stuck? Help me find out why my generated ai-newtab homepage is not appearing.

Your homepage can contain titles or topics from recent pages. You stay in control of what you share.

  • Review the homepage for private details before taking a screenshot.
  • Crop or blur any private details before uploading the screenshot.

Your first homepage is live. Next, you'll ask Claude for a different style. A second build will show how the same browsing context can produce a different design.

Restyle and Rebuild the Homepage

Your first Claude-generated homepage proves the extension can turn recent browsing into a usable new-tab page. It gives you a baseline for judging a visual change.

The browser extension's Instructions field gives your preferences priority in every build. This step uses a new request to produce an unmistakably different look.

In this step, get ready to:
  • Replace the current homepage instructions with a visibly different style request.
  • Start a second build from the saved request.
  • Verify the next new tab uses the restyled design.
Choose a clearly different style

The Instructions field shapes the content plus the visual design of each build. A high-contrast request makes the second result easy to distinguish from the first.

  • On the generated homepage from earlier, select the Settings control.
  • Enter Green-on-black terminal, monospace, like a 1980s BBS. in the Instructions field.

You should now see the new request in the Instructions field. That visible text confirms the extension is ready to use your updated preference.

How Do Instructions Shape the Build?

The extension passes these instructions into every homepage build. Your wording takes priority over its default presentation choices.

This request gives Claude concrete visual traits to follow. The contrast makes the rebuilt page simple to verify.

Start the second build

Saving this request starts the next build immediately. Each build creates a billed agent session through your Anthropic API key.

You are starting one deliberate rebuild here. One click is enough.

Before you start the rebuild, which visible details do you expect Claude to change?

  • Select Save & rebuild.

You should see the progress view begin moving through the build stages. Allow a few minutes for the extension to read recent pages before it writes the new homepage.

  • Wait for the progress view to finish.

Did the Build Stop?

  • Return to a new tab if the browser closed during the build.
  • Select Resume interrupted build when the extension offers it.
  • Check that your Anthropic Console account still has API credit if the progress view reports an API problem.

Need a hand? Help me diagnose why my ai-newtab rebuild did not finish.

Confirm the restyled homepage

The final check compares the finished page with the request you entered. The strongest evidence comes from the page itself.

Before you open the finished page, what is the first visual clue you expect to spot?

  • Open a new tab in Google Chrome.

You should see a green-on-black homepage with monospace text plus a terminal-like layout. Its stories should still draw from up to eight recent pages.

You've closed the customization loop. Your updated instruction now drives a visibly restyled homepage.

Still Seeing the Earlier Style?

Another rebuild uses more API credit. The saved request is the first place to diagnose the problem.

  • Select Settings.
  • Confirm the Instructions field contains the terminal-style request.
  • Enter the request again if the field is empty.
  • Select Save & rebuild once.

Still stuck? Help me work out why my completed ai-newtab build is showing the earlier style.

Your second design proves the homepage can follow a new visual direction. Next, you'll control future spend before inspecting each run's usage in the Anthropic Console.

Control Costs with Haiku

Your restyled homepage proves that the Chrome extension can turn recent browsing into a page written for you.

Each homepage build uses the Anthropic API. That activity adds to your account usage.

This step gives you control over future builds. It also shows you where to inspect past costs.

In this step, get ready to:
  • Switch future homepage builds to the lower-cost model.
  • Disable automatic homepage rebuilds.
  • Review the cost of each completed homepage run.
Choose the Haiku model

The model determines which Claude system writes the next homepage. Haiku is the extension's cheapest choice.

  • Switch back to the new-tab page showing your restyled homepage.
  • Click Settings on the new-tab page.
  • Select Claude Haiku 5.5 under Model.
  • Check that Claude Haiku 5.5 remains selected.

That is your first cost control in place. The selected model applies to your next build.

Turn off automatic rebuilds

Automatic rebuilds can start another billed agent session after the chosen interval. Turning them off keeps every future build deliberate.

  • Locate Rebuild automatically in the same Settings panel.
  • Turn Rebuild automatically off.
  • Confirm that the control shows the disabled state.

That is your second cost guardrail in place. Another run now starts only when you ask for one.

Review your run costs

The Anthropic Console connects API activity with costs. Reviewing it shows what your two completed homepage builds consumed.

Cost screens can feel risky. Viewing this page only reads usage that already exists.

  • Use Chrome's address bar to go to the Anthropic Console where you created your API key.
  • Select Usage from the Console navigation.

Before you inspect the recent activity, how many homepage-generation runs do you expect to see?

  • Use the timestamps to match the recent usage to the two builds you completed.
  • Inspect the cost associated with each matched run.

You should see usage corresponding to both completed homepage builds. The displayed costs belong to runs made before you selected Claude Haiku 5.5.

Your Haiku selection applies to the next build. Automatic rebuilds remain off until you choose to enable them.

Don't see both runs?

  • Confirm that the Console account matches the account behind your extension API key.
  • Check that the visible time range includes today.
  • Reload the Usage page if the latest activity is absent.

Still missing a run? Help me find my recent homepage-generation costs in the Anthropic Console.

Your homepage now has two cost controls in place. You also know where to review the cost of every build.

Secret mission

Create a Safe Rebuild Policy

Trace one visible homepage section back to recent browsing. Use the run costs to set an operating rule for future builds.

Clean Up Your Resources

Clean Up Your Resources

Automatic rebuilds are already off, so the extension does not start new Anthropic API runs by itself. Choose whether to keep the project available, pause the extension, or remove every project resource.

Resources you used:

  • Unpacked ai-newtab extension loaded in Google Chrome from the chrome-mv3 build output.
  • Cloned ai-newtab repository containing installed pnpm dependencies and the production build.
  • Anthropic API key used by the extension for homepage-generation runs.

Keep everything running

No action needed. Choose this if you want the generated homepage to keep replacing new tabs.

The extension remains set to Haiku. Automatic rebuilds remain off.

  • Leave the ai-newtab extension enabled in Chrome.
  • Use the existing generated homepage without starting another build.
  • Start a manual homepage build only when you intend to use more Anthropic API credit.

Pause - I'll come back to this later

Disable the extension so it stops replacing new tabs. Your repository and build output stay available for later.

  • Return to chrome://extensions in Chrome.
  • Locate the ai-newtab extension card.
  • Turn off the extension toggle.
  • Open a new tab.

You should see Chrome's regular new-tab page instead of the Claude-generated homepage.

Your Anthropic API key remains valid. Automatic rebuilds are already off.

  • Turn the extension toggle back on when you are ready to resume.

Delete - I don't want to use this again

Remove all project resources and start fresh. Your Anthropic account remains available after you revoke the project key.

Remove the Chrome extension:

  • Return to chrome://extensions in Chrome.
  • Locate the ai-newtab extension card.
  • Click Remove on the extension card.
  • Confirm the removal in Chrome's prompt.
  • Open a new tab.

That's the browser cleanup done. A new tab now shows Chrome's regular page instead of the Claude-generated homepage.

Revoke the Anthropic API key:

  • Return to the Anthropic Console account from earlier.
  • Navigate to the page that manages API keys.
  • Locate the API key you entered in ai-newtab.
  • Use the key's revoke action.
  • Confirm that the key is no longer active.

Your project credential can no longer authorize another homepage-generation run.

Delete the local repository and build output:

The cloned repository contains the installed dependencies and the chrome-mv3 build output. Find its actual location before deleting it.

macOS

Emptying Trash permanently removes every item inside it. You get a review step first, so unrelated files stay safe.

  • Use Finder search to locate the ai-newtab folder.
  • Select the ai-newtab folder that contains the cloned repository.
  • Move the selected folder to Trash.
  • Open Trash.
  • Review Trash for files you still need.
  • Empty Trash.

You should no longer find the ai-newtab repository or its chrome-mv3 build output on your Mac.

Windows

Emptying Recycle Bin permanently removes every item inside it. You get a review step first, so unrelated files stay safe.

  • Use Windows Search to locate the ai-newtab folder.
  • Select the ai-newtab folder that contains the cloned repository.
  • Move the selected folder to Recycle Bin.
  • Open Recycle Bin.
  • Review Recycle Bin for files you still need.
  • Empty Recycle Bin.

You should no longer find the ai-newtab repository or its chrome-mv3 build output on your PC.

Nice Work!

Nice Work!

You did it! Your locally built ai-newtab Chrome extension now turns every new tab into a restyled personal homepage generated through Claude Managed Agents from your recent browsing.

You've learned how to:

  • Build the ai-newtab repository into a working unpacked Chrome extension that replaces Chrome's new-tab page.
  • Use Claude Managed Agents to generate two personal homepages from up to eight recently visited pages with distinct visual styles.
  • Control per-run spending by selecting Haiku, turning off automatic rebuilds, and reviewing each run through the Anthropic Console usage page.
  • Complete an optional Secret Mission to extend your new-tab workflow further.

Ready to quiz yourself?