This post is a collection of the practical lessons from shipping it as a Manifest V3 extension — permissions, safety, streaming, voice input and a few side-panel quirks that cost us real debugging time.

What Hark does

• Chat with the page or email you have open: summaries, answers, rewrites.
• Gmail and Outlook: summarize a thread and drop a ready reply into the reply box (you press Send).
• Agent mode: clicks, types, chooses options and navigates on a website, step by step.
• Tracker: orders, bookings, deadlines and bills saved from emails and pages into one local list.
• Voice input and questions about images.

1. Keep the permission list boring

The fastest way to get rejected by the Chrome Web Store — and to scare users — is a long permission prompt. Hark's manifest asks for very little up front:

{
  "manifest_version": 3,
  "side_panel": { "default_path": "sidepanel.html" },
  "permissions": ["sidePanel", "storage", "activeTab", "scripting", "contextMenus"],
  "optional_host_permissions": ["<all_urls>"]
}

activeTab covers the common case: the user clicks the toolbar icon, presses the shortcut or uses the right-click menu, and Hark gets temporary access to that tab. Broad website access is optional and requested only the first time a feature truly needs it — "Use this tab", an email action, a Tracker scan or the Agent:

export const ORIGINS = { origins: ["<all_urls>"] };
export const requestAccess = () => chrome.permissions.request(ORIGINS);

function withAccess(fn) {
  if (S.access) return fn();
  requestAccess().then((ok) => { if (ok) { S.access = true; fn(); } });
}

Install-time warnings stay minimal, and users who never use the Agent never see the scary prompt.

2. No content scripts on page load

Hark declares no content_scripts in the manifest. Nothing runs on the pages you visit until you ask. When you do, the panel injects one packaged file into the active tab:

await chrome.scripting.executeScript({
  target: { tabId },
  files: ["content/tools.js"],
});

That one decision answers half of the privacy questions in review: Hark cannot read your tabs in the background because there is nothing running there.

3. The model chooses; the extension acts

A browser agent should never execute code that comes from a server or a model. In Hark the model only chooses the next step from a fixed list of tools implemented inside the extension's own content/tools.js:

export const TOOLS = ["click", "type", "select", "scroll", "press", "navigate", "wait", "ask_user", "done"];

The model's reply is just JSON like { "tool": "click", "args": { "ref": 12 } }; anything outside TOOLS is rejected, and ref points to an element from the snapshot the extension itself built.

It's also what Chrome Web Store's "no remote code" rule expects, and it makes every step easy to show to the user in plain words: Opened the booking page → Chose today, 8:00 PM → Set 2 guests.

4. Approval before anything final

Clicking "next" in a form is harmless. Clicking Send, Book, Pay, Subscribe or Delete is not. Hark pauses on any step like that and shows exactly what it is about to do, with Approve and Cancel buttons.

Two more hard rules:

• The page snapshot the model sees never includes the values of password, one-time-code or payment-card fields.
• When a login, verification or payment step comes up, Hark hands that step back to you.

Sensitive fields are detected like this:

const SENSITIVE_AC = /^(cc-|current-password|new-password|one-time-code)/i;

const isSensitive = (el) => {
  const type = (el.getAttribute("type") || "").toLowerCase();
  const ac = el.getAttribute("autocomplete") || "";
  const name = ((el.name || "") + " " + (el.id || "")).toLowerCase();
  return type === "password" || SENSITIVE_AC.test(ac) ||
    /(card.?number|cardnum|cc-?num|cvv|cvc|security.?code|iban)/.test(name);
};

The approval gate itself is three checks: the model can flag a step, the target's label matches a "risky" word list (in several languages), or it's a submit button inside a form:

const RISKY = /\b(send|submit|pay|purchase|buy|order|checkout|book|reserve|confirm|delete|subscribe|transfer|publish)\b/i;

let gate = !!modelConfirm;
if (tool === "click" && (RISKY.test(target.label) || (target.type === "submit" && target.inForm))) gate = true;
if (tool === "type" && target.sensitive) return refuse("the user must fill this in");
if (gate && !(await askUser(step))) return stopRun("user declined");

5. Streaming text that doesn't stutter

Server-sent events arrive in bursts: nothing for 300 ms, then 40 tokens at once. Rendering each chunk as it lands makes the text jump. We buffer incoming text and reveal it on requestAnimationFrame, speeding up when the buffer grows:

let got = "", raf = 0; // `got` = everything received so far, `ai.text` = what's on screen

const tick = () => {
  raf = 0;
  const back = got.length - ai.text.length;
  if (back > 0) {
    let end = ai.text.length + Math.max(1, Math.ceil(back / 14)); // faster when far behind
    if (/[\uD800-\uDBFF]/.test(got[end - 1] || "")) end++;        // never split an emoji
    ai.text = got.slice(0, end);
    updateMsg(ai);
  }
  if (got.length > ai.text.length) raf = requestAnimationFrame(tick);
};

function onChunk(text) { got += text; if (!raf) raf = requestAnimationFrame(tick); }

One gotcha: requestAnimationFrame doesn't fire in a hidden document, so when the panel isn't visible we skip the animation and show the full text at once. Small thing, big difference in how "alive" the answer feels.

6. Voice input in a side panel needs a detour

The Web Speech API works in extension pages, but a side panel can't show Chrome's microphone permission prompt reliably. The fix: the first time the user presses the mic button, open a tiny extension page in a tab that asks for the microphone once:

// mic.js — runs in mic.html, opened once in a normal tab
const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
stream.getTracks().forEach((t) => t.stop()); // we only needed the permission
await chrome.storage.session.set({ micGranted: Date.now() });
setTimeout(() => window.close(), 1600);

The permission is granted to the extension's origin, so from then on speech recognition works inside the panel. Hark only receives the recognized text — no audio is recorded or uploaded.

7. Images: shrink on the client

Users paste full-resolution screenshots. Sending 8 MB images to a model is slow and expensive, so the panel resizes them on a canvas before sending (longest side ≤ 1568 px, JPEG) and keeps only a ~240 px thumbnail in local chat history.

async function shrink(file, max, q) {
  const bmp = await createImageBitmap(file);
  const k = Math.min(1, max / Math.max(bmp.width, bmp.height));
  const cv = document.createElement("canvas");
  cv.width = Math.max(1, Math.round(bmp.width * k));
  cv.height = Math.max(1, Math.round(bmp.height * k));
  const g = cv.getContext("2d");
  g.fillStyle = "#fff"; // transparent PNGs get a white background instead of black
  g.fillRect(0, 0, cv.width, cv.height);
  g.drawImage(bmp, 0, 0, cv.width, cv.height);
  return cv.toDataURL("image/jpeg", q);
}

Bonus: side-panel quirks worth knowing

Re-render only when something changed. We listened to tabs.onUpdated and rebuilt the home screen on every event — about ten rebuilds in two seconds while a page loaded, which looked like a jittery panel. Comparing a small key (URL + title + mode) before re-rendering fixed it.

Opening the panel from your website. With externally_connectable your site can message the extension, and chrome.sidePanel.open() still counts the click on the page as the user gesture. In the background script:

chrome.runtime.onMessageExternal.addListener((msg, sender, reply) => {
  if (sender.origin !== "https://harkaiagent.com") return;
  if (msg?.type === "hark:open") {
    chrome.sidePanel.open({ windowId: sender.tab.windowId })
      .then(() => reply({ ok: true }), () => reply({ ok: false }));
    return true; // async reply
  }
});

That's how Hark's welcome page has a working Open Hark button.

Try it

Hark is free to try, no account needed: Hark AI Agent in the Chrome Web Store · harkaiagent.com

If you're building an agent yourself, I'd love to hear how you handle approvals and sensitive fields — drop a comment.

This guide shows how it works end to end, and how to find the right skill without digging through GitHub.

What is a Claude Code skill?

A skill is a folder with a SKILL.md file (instructions plus optional scripts) that teaches Claude Code a new job. Claude Code looks for personal skills in:

~/.claude/skills/<skill-name>/SKILL.md

and for project skills in .claude/skills/<skill-name>/SKILL.md inside a repository. You run a skill by typing /skill-name at the start of a message, and whatever you type after the name is passed to the skill as its arguments. (Details: Claude Code docs on skills.)

For animation, that means a skill can contain everything needed to build a specific style of video — and your arguments are the text, numbers and places that go into it.

What you need

• Claude Code (it needs a paid Claude plan or an Anthropic API account).
• A few minutes to install a skill. Some skills need extra free tools; each skill lists exactly what it needs.

Step 1. Install a skill

Take 3D Map Route — a clean 3D city where your route draws itself, a pin drops and an ETA counts down. It's MIT-licensed and lives in the artemnovitckii/claude-animation-skills repository on GitHub.

macOS / Linux:

git clone https://github.com/artemnovitckii/claude-animation-skills
mkdir -p ~/.claude/skills
cp -r claude-animation-skills/skills/map-route ~/.claude/skills/

Windows (PowerShell):

git clone https://github.com/artemnovitckii/claude-animation-skills
New-Item -ItemType Directory -Force "$HOME\.claude\skills" | Out-Null
Copy-Item -Recurse claude-animation-skills\skills\map-route "$HOME\.claude\skills\"

Step 2. Run one command

Open Claude Code in an empty folder and type:

/map-route Home to the gym, 2.8 km

Claude Code builds the scene and renders a 1080×1920, 30 fps MP4 — about a minute and a half for this skill. Want something else? Change the arguments:

/map-route Hotel to the Eiffel Tower, 3.4 km, red route
/map-route Office to the airport, 18 km, miles

Step 3. Edit it like code, not like footage

Because the video is code, changing it is a sentence away: "make the route orange", "slow the camera down", "add our logo at the end". Claude Code edits the project and re-renders. That's the big difference from AI video generators: nothing is a black box, every frame is reproducible.

Six skills worth trying first

Render times range from about 10 seconds (/graph) to several minutes for a 30-second 3D cartoon.

Finding the right skill without the GitHub hunt

Good animation skills are scattered across dozens of repositories with different licenses and install steps. That's why we built Claude Animation Skills — a Chrome side panel with 100 hand-picked animation skills:

• Describe your video in plain words (or by voice, or with a reference image) and the AI picks the best skill and writes the exact command with your details.
• Every skill shows a live animated preview, its author, license and GitHub source, pinned to the version we reviewed.
• Install steps for macOS, Windows and Linux, or one command to copy.

It's free to try (two skills and one free action a day): Claude Animation Skills in the Chrome Web Store · claude-skills.art

What would you animate first? Tell me in the comments.

Claude Animation Skills is an independent project, not affiliated with Anthropic. Claude and Claude Code are trademarks of Anthropic, PBC. Skills belong to their authors and are offered under their own licenses.