Skip to content
😷 A browser extension that puts masks on faces on the internet
Branch: master
Clone or download

Latest commit

moklick Merge pull request #4 from moklick/dependabot/npm_and_yarn/acorn-6.4.1
build(deps): bump acorn from 6.4.0 to 6.4.1
Latest commit a9ab48c Mar 15, 2020


Type Name Latest commit message Commit time
Failed to load latest commit information.
.github 😷 init Mar 2, 2020
extension/chrome Scale the landmarks according to their display size Mar 11, 2020
.babelrc 😷 init Mar 2, 2020
.eslintrc.json 😷 init Mar 2, 2020
.gitignore 😷 init Mar 2, 2020
LICENCE 😷 init Mar 2, 2020 docs(readme): update example image Mar 12, 2020
package-lock.json build(deps): bump acorn from 6.4.0 to 6.4.1 Mar 15, 2020
package.json Using face-api.js directly reduces bundle size by 75% Mar 9, 2020
webpack.config.js 😷 init Mar 2, 2020

😷 Face Mask Browser Extension

An extension that puts masks on faces on the internet (only works on Chrome).

Beware: This extension is a proof of concept and really slows down your browser (and also destroys several sites).

Demo Video


Try it out

In order to try the extension you can load the unpacked version in your Chrome browser by following these steps:

  1. Download or clone this repository
  2. Type chrome://extensions in the address bar
  3. Enable the Developer Mode switch in the top right corner
  4. Click the Load Unpacked Extension… utton
  5. Select the directory extension/chrome of this repository

How it works

  1. Check site for images and wrap them with a div
  2. Observe these wrapped images with IntersectionObserver
  3. When an image appears in the viewport, check if there are faces on it using face-api
  4. If there are faces add a canvas to the wrapper and draw the masks with this drawMask function


You need Node.js in order to modify this extension.


npm install


npm run dev:chrome


You can’t perform that action at this time.