跳到正文
DEV Community· Eden·· 2 小時前AI 評分37

如何在 Manifest V3 擴充功能中執行 AI:在瀏覽器內進行 1024 維向量搜尋

Running AI in a Manifest V3 Extension: Putting 1024-D Vector Search Inside the Browser

AI 導讀

OmniPic 在 Chrome 擴充功能 Manifest V3 的限制下,於用戶裝置本機執行圖片特徵擷取和向量相似度搜尋,無須把圖片上載至伺服器。系統將圖片轉換成 1024 維向量,儲存在瀏覽器本機,並以餘弦相似度搜尋;增量索引只為新圖片建立嵌入向量。

正文

Eden

This is an engineering write-up, not a product launch. It documents how I run image feature extraction and vector similarity search entirely on the client side of a Chrome extension — no image ever leaves the user's device — under the constraints Manifest V3 imposes. The working example is OmniPic, one of the extensions in the OmniSuite collection (https://omnisuite.top).

1. The constraints MV3 puts on on-device compute

  1. The service worker is disposable. Background work can be killed at any time, so long tasks and model state must be designed to be resumable and split into short units.
  2. Memory and bundle size are user-visible. Model files and index data compete with the page itself; a slow cold start is something users feel immediately.
  3. Permissions are stricter. Cross-origin fetches, downloads, and storage all have to be declared, and review is less forgiving than in MV2 days.

Takeaway: on-device AI is not "move the server code into the page." The architecture has to be rebuilt around short, recoverable, lazily loaded work.

2. The pipeline: from an image to similar results

Image -> on-device feature extraction -> 1024-d vector -> local index
Query image -> same extraction -> cosine similarity -> TopK -> results

Decisions worth noting:

  • Why 1024 dimensions. Fewer dimensions blur the distinction between similar images; more dimensions make the index and the math noticeably heavier on consumer hardware. 1024 was the balance point in my measurements.
  • The index lives locally. Vectors and metadata are stored in browser storage. Queries never touch the network, which is what makes a "0 bytes uploaded" claim structurally true rather than a policy promise.
  • Incremental indexing. Only new images get embedded; existing vectors are reused. A full rebuild on every launch is a cold-start tax nobody should pay.

You can verify the privacy property yourself: open DevTools' Network panel while the tool runs — image content should never appear in an outbound request.

3. Batch-downloading originals: the hard part is finding the right file

The image a page displays is usually a CDN-resized version. Getting the original means:

  1. Following srcset, lazy-load attributes, CSS backgrounds, and similar clues to the highest-resolution variant
  2. Deduplicating the same image served at multiple sizes, keeping only the best copy
  3. Retrying failures sensibly and producing filenames a human can actually use later

No clever trick here — just patient handling of how real sites structure their markup.

4. One local-first base, several tools

The same on-device foundation powers the rest of the collection I maintain:

  • ResumeRadar — parses job descriptions and aligns resume keywords against ATS criteria locally; the resume text never gets uploaded anywhere.
  • OmniPost — drafts are modeled locally first, then adapted per platform for one-click sync across 8 platforms.
  • OmniSense — an on-device AI toolkit with semantic memory features.
  • OmniVideo — a pure front-end extension plus a fully open-source, self-hostable download site (Mac & Windows), so the whole chain can stay on your own infrastructure.
  • OmniGame — 160 floating mini-games; the lightweight outlier in an otherwise serious toolkit.

5. Pitfalls I actually hit

  • Browser differences. Chrome, Edge, and Firefox implement parts of the extension APIs on different schedules. Testing only in Chrome is not enough.
  • Cold start. The first model load is where users drop off. Show progress, load lazily, and never leave a blank panel.
  • Permission greed. Every extra permission raises both store-review risk and user distrust. Request only what the feature truly needs.

6. Conclusion

The value of on-device AI is not just speed or saving server costs — it is data ownership. A user's photos, resume, and drafts should not have to be uploaded to make a small feature work. If you are building extensions, I would genuinely like to compare notes in the comments. The tools mentioned are on the Chrome Web Store (OmniPic, ResumeRadar, OmniGame) and the project site is omnisuite.top.

來源:DEV Community · dev.to