Failures come unexpected and it amazes you that how well you can push your thresholds but cannot keep up with the debugging. For 5 days I have been churning my brain onto building a chrome extension made for security such as when students attempt exams online or if one is doing it's confidential work on the system then the screen blurs and nobody but the authorized user when returned to the screen gets access to it. Let me show you what am I giving my time to!
Chrome Extension · Manifest V3 · Local Face Detection
Zero cloud. Zero data leakage. 100% local MediaPipe inference.
How did the ideation begin
Lately I have been studying Tensorflow.js (tf.js) an open source java script library for machine learning that helps to run AI models directly in the browser or on node.js. I got the idea to create a project related to the security and not just a basic object detection project. I am really frustrated that after taking help from AI, I am not able to give this project an end.
Problem
- I never studied core cybersecurity courses but I was trying to combine AI and privacy and holding them together as a novice without any expert advice. -- half knowledge makes you detour for a long time
- It was a headache because web browsers have strict security policy-specifically Chrome Extension Manifest V3 (MV3) and Content Security Policy (CSP) which didn't go with tf.js core architecture. Let me give you some more reasons, I took it from Gemini AI
a) The unsafe-eval Deception (The Biggest Culprit)
To make neural networks run fast in a browser, TensorFlow.js uses dynamic code compilation. Under the hood, it dynamically generates JavaScript code strings at runtime and executes them using functions like eval() or new Function() to optimize mathematical matrix operations for your CPU or GPU.
The Wall: Chrome Manifest V3 completely bans unsafe-eval inside standard extension scripts to prevent hackers from executing malicious strings hidden inside extensions. The moment tf.js tried to run its optimization scripts, Chrome instantly blocked it, throwing the error: Uncaught EvalError: Evaluating a string as JavaScript violates the following Content Security Policy...
b) Missing Core Features when Forced to Fall Back
When we tried to force tf.js into a "safe" environment or bypass its initialization errors, the framework automatically disabled its dynamic engine and fell back to a basic CPU execution mode.
The Wall: Because the engine initialized in a crippled, partial state, complex downstream models like MobileNet couldn't find their required dependencies. This triggered the second error you saw: Uncaught (in promise) TypeError: a.loadGraphModel is not a function. The framework literally failed to construct its own loading sub-routines because the compiler was blocked halfway through execution.
c) Remote CDN Injections are Illegal in MV3
In older Manifest V2 extensions, developers easily bypassed file size limitations by pointing a script tag to an external link like https://cdn.jsdelivr.net/....
The Wall: Manifest V3 strictly mandates that all code executed by the extension must be packaged locally inside the extension zip. It blocks remote scripts to prevent extensions from fetching modified malicious code from the internet after being approved by the Chrome Web Store. When we tried to load tf.js via a CDN, the browser blocked the network request entirely.
d) Massive File Size & WebAssembly Constraints
TensorFlow.js is a heavyweight library. The minified core library, along with the MobileNet weights and layers, spans several megabytes. When loaded locally in an extension popup, it causes severe latency, making the popup feel sluggish.
Furthermore, to run properly without eval, TensorFlow.js relies heavily on WebAssembly (WASM) binaries (.wasm files). Chrome Extensions isolate execution spaces so aggressively that passing heavy WASM buffers between a background script, a popup, and an injected webpage, webpage creates a massive data-sharing bottleneck.
I switched to Google mediapipe which was easier to implement designed to build the ml pipelines that process live video, audio and sensor data. The above snapshots I attached is from using mediapipe which is working fine but there was issue
Problem
- As the screen was locking successfully, I wished to work on the tab but the extension was disappearing as soon as I was clicking somewhere on the screen. I wanted my extension to be useful so that I can scroll, type on the screen and can truly be monitored in case of unauthorized user but no..
Primary Architecture overview
┌─────────────────────────────────────────────────────────┐
│ Chrome Browser │
│ │
│ ┌──────────────────────────────┐ │
│ │ popup.html (Extension Page) │ │
│ │ │ │
│ │ ┌─────────┐ getUserMedia │ │
│ │ │ Camera │──────────────► │ │
│ │ └─────────┘ <video> │ │
│ │ │ │ │
│ │ offscreen <canvas> │ │
│ │ raw ImageData │ │
│ │ │ postMessage │ │
│ │ ▼ (Transferable) │ │
│ │ ┌──────────────────────┐ │ │
│ │ │ sandbox.html │ │ │
│ │ │ (allow-eval CSP) │ │ │
│ │ │ │ │ │
│ │ │ MediaPipe FaceMesh │ │ │
│ │ │ (local WASM) │ │ │
│ │ │ 0 faces → LOCK │ │ │
│ │ │ 1 face → UNLOCK │ │ │
│ │ │ >1 face → LOCK │ │ │
│ │ └──────────┬───────────┘ │ │
│ │ │ postMessage │ │
│ │ ▼ │ │
│ │ popup.js │ │
│ │ │ sendMessage │ │
│ └─────────────┼────────────────┘ │
│ ▼ │
│ ┌─────────────────────────┐ │
│ │ content.js │ │
│ │ (injected into page) │ │
│ │ │ │
│ │ "lock" → blur page │ │
│ │ show overlay │ │
│ │ "unlock"→ unblur page │ │
│ │ hide overlay │ │
│ └─────────────────────────┘ │
└─────────────────────────────────────────────────────────┘
I was excited that my chrome extension gets submitted to the chrome web store and I will go gala..haha novice
I asked Claude AI that how can I do this;
The suggestion
Chrome MV3 a chrome.offscreen API — to make hidden background page which provides access to DOM and Camera even w/o popup.
Popup is similar to the regular browser window, the moment it closes all the js files, camera stream are lost.
Again THE PROBLEM arose offscreen API strict in allowing/disallowing the camera permissions but it was not an issue.
I asked about this again and it gave me to create the side-panel so that camera never closes, it was looking ugly!
I dropped all the ideas and shut the laptop down, I must have understood the facts and have read the security docs and papers. Anyways I deleted the repository because I wanted it to work for me and it didn't, I cannot sell more of this
It is kinda failed prototype and I need to work on this project in near future after taking informed decisions and choosing unconventional right architecture .
Needs clarification more than perfection
Any comments?
Top comments (0)