🐢 TurtlPass Chrome Extension

LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 Ryan Amaral <ryanamaral.com>
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

README.md

@@ -0,0 +1,84 @@
+<p align="center">
+<img src="assets/icons/icon-no-padding.png" alt="logo" width=90>
+<h3 align="center">TurtlPass Chrome Extension</h3>
+<p align="center">
+TurtlPass Chrome Extension sends a hash of the user's inputs (Domain, Account ID, and PIN) to the TurtlPass Firmware via USB. When the physical button on the device is pressed, the firmware emulates an external keyboard and types the password. This method ensures that the password is never transmitted over potentially insecure channels, providing an additional layer of security.
+</p>
+<p align="center">
+<a href="https://github.com/TurtlPass/turtlpass-chrome-extension/releases"><img src="https://img.shields.io/badge/Chrome%20Extension-v1.0.0-green?logo=googlechrome" alt="Releases"/></a>
+</p>
+<p align="center">
+<a href="https://github.com/TurtlPass/turtlpass-firmware-arduino"><img src="https://img.shields.io/badge/Arduino%20Firmware-v1.0.0-blue?logo=arduino" alt="Firmware Repo"/></a>
+<a href="https://github.com/TurtlPass/turtlpass-android"><img src="https://img.shields.io/badge/Android%20App-v1.0.0-blue?logo=android" alt="Android Repo"/></a>
+</p>
+
+
+## ⚡ Features
+
+* Generate strong, secure passwords using the TurtlPass Firmware
+* Automatically populate the `Domain` based on active tab
+* No need to re-enter your `Account ID` every time
+* Press `Ctrl` to quickly and easily reveal or hide your password
+* Keep your online accounts safe and secure with TurtlPass!
+
+
+## 🔑 How to Use
+
+<img src="assets/how-to.gif" width="512px">
+
+1. Go to a Login Web page
+    * For example: https://github.com/login
+2. Click on this Chrome extension icon and a popup will open with the current domain auto-filled
+3. Fill in the `User ID` input with an email address, for example.
+    * Next time this field will be auto-populated with this value.
+4. Click `Unlock`
+5. Type your 6 digits `PIN`
+5. Choose _TurtlPass_ device from the popup and click **Connect**
+6. The TurtlPass extension closes automatically on Success
+
+👉 **Now, by pressing the hardware button of the device it starts typing the password in the current input field with focus.**
+
+
+## 🔧 Installation
+
+1. [Download](https://github.com/TurtlPass/turtlpass-chrome-extension/archive/refs/tags/1.0.0.zip) this repository to your computer
+2. Go to the **Chrome extensions** page: `chrome://extensions`
+3. Turn on **Developer mode**
+4. Add the extension by clicking **Load Unpacked** button and selecting the downloaded folder
+5. Done - you can start using it!
+
+
+### 🙋 Troubleshoot
+
+If you can't connect, try turn on the serial port connection feature in Chrome:
+
+```
+chrome://flags/#enable-experimental-web-platform-features
+```
+
+
+## 📚 APIs & Libraries
+
+* [Web Serial API](https://web.dev/serial/)
+* [Lottie Web](https://github.com/airbnb/lottie-web)
+* [Material Design UI components for the web](https://github.com/material-components/material-components-web)
+
+
+## 📦 Sources
+
+* [JS implementation of SHA-512](http://pajhome.org.uk/crypt/)
+* [Load favicon images](https://stackoverflow.com/a/15750809/904907)
+* [UI of PIN input](https://codepen.io/bradeneast/pen/YzzMoGw)
+* [USB Memory Stick Animation](https://lottiefiles.com/20358-usb-memory-stick-animation)
+* [Loading/Success/Error Animation](https://lottiefiles.com/627-loading-success-failed)
+
+
+## 🔮 Future improvements
+
+- Read NFC Tag ID
+- Hash with Argon2
+
+
+## 📄 License
+
+TurtlPass Chrome Extension is released under the [MIT License](https://github.com/TurtlPass/turtlpass-chrome-extension/blob/main/LICENSE).

app.html

@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <link rel="stylesheet" href="css/app.css" />
+    <link rel="stylesheet" href="css/github-corner.css" />
+    <script src="js/lottie.5.10.0.min.js"></script>
+    <script src="assets/anim/lottie-loader.js"></script>
+  </head>
+  <body>
+    <div id="bodymovin"></div>
+    <span id="message">Enter your PIN number</span>
+    <input id="submitted" type="checkbox" tabindex="-1">
+    <form>
+      <input type="number" min="0" max="9" placeholder=" " id="n1" autofocus>
+      <input type="number" min="0" max="9" placeholder=" " id="n2">
+      <input type="number" min="0" max="9" placeholder=" " id="n3">
+      <input type="number" min="0" max="9" placeholder=" " id="n4">
+      <input type="number" min="0" max="9" placeholder=" " id="n5">
+      <input type="number" min="0" max="9" placeholder=" " id="n6">
+      <label id="connectButton" class="submit" type="button" tabindex="0" for="submitted"></label>
+      <span class="indicator"></span>
+    </form>
+
+    <!-- Github right -->
+    <a target="_blank" rel="noopener noreferrer" href="https://github.com/TurtlPass/turtlpass-chrome-extension" class="github-corner" aria-label="View source on GitHub"><svg width="80" height="80" viewBox="0 0 250 250" style="fill:#43AA8F; color:#fff; position: absolute; top: 0; border: 0; right: 0;" aria-hidden="true"><path d="M0,0 L115,115 L130,115 L142,142 L250,250 L250,0 Z"></path><path d="M128.3,109.0 C113.8,99.7 119.0,89.6 119.0,89.6 C122.0,82.7 120.5,78.6 120.5,78.6 C119.2,72.0 123.4,76.3 123.4,76.3 C127.3,80.9 125.5,87.3 125.5,87.3 C122.9,97.6 130.6,101.9 134.4,103.2" fill="currentColor" style="transform-origin: 130px 106px;" class="octo-arm"></path><path d="M115.0,115.0 C114.9,115.1 118.7,116.5 119.8,115.4 L133.7,101.6 C136.9,99.2 139.9,98.4 142.2,98.6 C133.8,88.0 127.5,74.4 143.8,58.0 C148.5,53.4 154.0,51.2 159.7,51.0 C160.3,49.4 163.2,43.6 171.4,40.1 C171.4,40.1 176.1,42.5 178.8,56.2 C183.1,58.6 187.2,61.8 190.9,65.4 C194.5,69.0 197.7,73.2 200.1,77.6 C213.8,80.2 216.3,84.9 216.3,84.9 C212.7,93.1 206.9,96.0 205.4,96.6 C205.1,102.4 203.0,107.8 198.3,112.5 C181.9,128.9 168.3,122.5 157.7,114.1 C157.9,116.9 156.7,120.9 152.7,124.9 L141.0,136.5 C139.8,137.7 141.6,141.9 141.8,141.8 Z" fill="currentColor" class="octo-body"></path></svg></a>
+
+    <script type="text/javascript" src="js/sha512.js"></script>
+    <script type="text/javascript" src="js/app.js"></script>
+  </body>
+</html>