KeepKey Client Browser Extension

Table of Contents

• Intro
• Features
• Structure
  • ChromeExtension
  • Packages
  • Pages
• Getting started
  • Chrome
  • Firefox
• Install dependency
  • For root
  • For module
• Community
• Reference
• Star History
• Contributors

Intro

This extension is designed for building browser-based applications integrated with the KeepKey hardware wallet using modern web technologies like React, Typescript, and Vite. The main goal is to provide seamless development and build processes tailored to KeepKey.

For more information, visit KeepKey's website or contact the development team at highlander@keepkey.com.

Features

• React18
• TypeScript
• Tailwindcss
• Vite
• Turborepo
• Prettier
• ESLint
• Chrome Extension Manifest Version 3
• Custom I18n Package
• Custom HMR(Hot Module Rebuild) Plugin
• End to End Testing with WebdriverIO

Getting started:

1. When you're using Windows run this:
   • git config --global core.eol lf
   • git config --global core.autocrlf input

   This will change eol(End of line) to the same as on Linux/Mac, without this, you will have conflicts with your teammates with those systems and our bash script won't work

2. Clone this repository.
3. Change extensionDescription and extensionName in the messages.json file.
4. Install pnpm globally: npm install -g pnpm (check your node version >= 18.19.1)
5. Run pnpm install

For Chrome:

1. Run:
   • Dev: pnpm dev (On windows, you should run as administrator.)
   • Prod: pnpm build
2. Open in browser - chrome://extensions
3. Check - Developer mode
4. Find and Click - Load unpacked extension
5. Select - dist folder at root

For Firefox:

1. Run:
   • Dev: pnpm dev:firefox
   • Prod: pnpm build:firefox
2. Open in browser - about:debugging#/runtime/this-firefox
3. Find and Click - Load Temporary Add-on...
4. Select - manifest.json from the dist folder at root

Remember in Firefox, you add the plugin in temporary mode, meaning it will disappear after each browser close. You'll need to repeat this on every browser launch.

Install dependency for Turborepo:

For root:

1. Run pnpm i <package> -w

For module:

1. Run pnpm i <package> -F <module name>

package - Name of the package you want to install, e.g., nodemon
module-name - You can find it inside each package.json under the key name, e.g., @extension/content-script

Env Variables

1. Copy .example.env and paste it as .env in the same path.
2. Add a new record inside .env.
3. Add this key with type for value to vite-env.d.ts (root) in ImportMetaEnv.
4. Then you can use it with import.meta.env.{YOUR_KEY} as with standard Vite Env.

If you want to set it for each package independently:

1. Create .env inside that package.
2. Open the related vite.config.mts and add envDir: '.' at the end of the config.
3. Follow the same steps as above.

Remember you can't use global and local env for the same package simultaneously (It will be overwritten).

Structure

ChromeExtension

Main app with background script and manifest:

• manifest.js - manifest for the Chrome extension.
• lib/background - background script for the Chrome extension (background.service_worker in manifest.json).
• public/content.css - content CSS for page injection.

Packages

Some shared packages:

• dev-utils - utils for Chrome extension development (manifest-parser, logger).
• i18n - custom i18n package with type safety and validation.
• hmr - custom HMR plugin for Vite.
• shared - shared code (types, constants, custom hooks, components, etc.).
• storage - helpers for Chrome storage API.
• tailwind-config - shared Tailwind config.
• tsconfig - shared TypeScript config.
• ui - components and functions for UI integration.
• vite-config - shared Vite config.
• zipper - packs the dist folder into extension.zip.
• e2e - End-to-end tests with WebdriverIO.

Pages

• content - Content script for page interactions.
• devtools - DevTools for Chrome extension.
• new-tab - New tab for the extension.
• options - Options page.
• popup - Popup page for the extension.

Community

Join the KeepKey Discord to connect with other developers and share your experiences, suggest features, or get support.

Reference

• Vite Plugin
• Chrome Extension Docs
• Rollup
• Turborepo
• Rollup-plugin-chrome-extension

---

For more information, visit KeepKey's website or reach out at highlander@keepkey.com.