Please click Add Extension on the dialog that Chrome opened to install FrankerFaceZ.
If Chrome didn’t open a dialog, please click here to open the Chrome Web Store.
Problems installing? Try running the Chrome Cleanup Tool to fix issues with your browser and then try again.
Getting "Network Failed"? Try reinstalling Chrome as that’s an indicator that your browser has become corrupted.
Please click Allow and Install on the dialogs that Firefox opens to install FrankerFaceZ.
Problems installing? Try right-clicking and saving this file and then opening it locally.
Still not working? You might have an issue with corrupt extension files. Follow these instructions and then try again.
(Note: Please be sure to remove any extensions that you downloaded from websites other than Firefox’s Add-ons store before following those instructions. You can reinstall them after, but leaving them installed when you delete the extension data files may cause the extensions to become unusable.)
Your browser may be able to make use of a user script directly.
If your browser cannot use the script, you’ll need to get an extension for dealing with user scripts such as Tampermonkey.
FrankerFaceZ does not currently have an extension built for Microsoft Edge. However, Tampermonkey does and it can be used to load the FFZ user script.
First, install Tampermonkey from the Windows Store if you don’t already have it.
Once that’s installed, please click here to add the user script to Tampermonkey.
Apple has decided to deprecate their previous extension model for Safari, in favor of what they’re calling Safari App Extensions. We have decided as a result that it is infeasible to provide support for Safari going forward. Our user script will still function in Safari, but we will no longer be providing packaged extensions.
To use FrankerFaceZ with Safari, you’ll need to install an extension capable of loading user scripts such as Tampermonkey.
Once you have an extension for user scripts, please click here to get the FrankerFaceZ user script.
Once FrankerFaceZ is installed, remember to refresh all your open Twitch tabs so that it will load.
Copyright (c) 2018 Dan Salvato LLC
Licensed under the Apache License, Version 2.0. See LICENSE.
FrankerFaceZ uses node.js to manage development dependencies and to run an HTTP server for development. To get everything you need:
Install node.js and npm
Run npm install within the FrankerFaceZ directory.
From there, you can use npm to build FrankerFaceZ from source simply by running npm run build . For development, you can instruct webpack to watch the source files for changes and re-build automatically with npm start
FrankerFaceZ comes with a local development server that listens on port 8000 and it serves up local development copies of files, falling back to the CDN when a local copy of a file isn’t present.
To make FrankerFaceZ load from your local development server, you must set the local storage variable ffzDebugMode to true. Just run the following in your console on Twitch: localStorage.ffzDebugMode = true;
It should be noted that this project is not a browser extension that you would load in your browser’s extensions system. You still need the FrankerFaceZ extension or user-script for your browser.
You can edit the project’s icon font using the npm run font command. This will create a new Fontello session, if one doesn’t already exist, and open your default web browser to Fontello so you can edit the font.
If you’re running the development server with npm start , you’ll be able to automatically save changes to the Fontello font by clicking Fontello’s Export button. Otherwise, you can use npm run font:save to download the changes from your session.
Please make sure that your editor is configured to use tabs rather than spaces for indentation and that lines are ended with
. It’s recommended that you configure linting support for your editor as well.
If you’re using Visual Studio Code, make sure to install the ESLint extension and add the following to your workspace settings:
Loads the main FrankerFaceZ script in browsers that don’t support the extension but do support UserScripts; updated from http://userscripts-mirror.org/scripts/show/167158 and may break in your browser, UserScript version does not reflect actual FFZ version.
If you would rather try out FrankerFaceZ as a bookmarklet, copy the URI below:
Originally, FrankerFaceZ had an officially supported UserScript written by the extension’s creator, Dan Salvato, but now that the project has moved to its own CDN, the referenced script is outdated; the style used in both the bookmarklet and the UserScript is based on code used by the extension’s current maintainer, Mike (SirStendec), to test development on Microsoft Edge in anticipation for that browser’s upcoming support for Chromium-style extensions.