https://github.com/ewen-lbh/smooth-cursorify

Applies a Microsoft Word-like smooth caret animation to multiple online editors
https://github.com/ewen-lbh/smooth-cursorify

Last synced: 14 days ago
JSON representation

Applies a Microsoft Word-like smooth caret animation to multiple online editors

• Host: GitHub
• URL: https://github.com/ewen-lbh/smooth-cursorify
• Owner: ewen-lbh
• License: unlicense
• Fork: true (YonatanAhituv/rainbow-cursor)
• Created: 2020-02-27T12:10:34.000Z (over 4 years ago)
• Default Branch: master
• Last Pushed: 2024-04-16T22:44:56.000Z (7 months ago)
• Last Synced: 2024-08-01T16:31:29.650Z (3 months ago)
• Language: JavaScript
• Homepage:
• Size: 3 MB
• Stars: 28
• Watchers: 2
• Forks: 2
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        


    

    
Apply a Microsoft Word-like smooth caret animation to multiple online editors.

    
Firefox • Chrome • Demo video • Bookmarklets


![Mozilla Add-on downloads](https://img.shields.io/amo/dw/smooth-cursorify?label=firefox%20downloads)

![Chrome Web Store users](https://img.shields.io/chrome-web-store/users/ohhjfajndpfpbimipmehmdkblnbelaec?label=chrome%20users)

  

## Supported websites

> Please open an issue to request a new website

* Google Docs (https://docs.google.com/) 

* Overleaf (https://www.overleaf.com/) 

### To be released

* Google Sheets (https://sheets.google.com/): the cursor is not transitioned, but the border around the active cell is (thanks @JaduaStudios)

## How does it work?

Some websites use custom rendering engines to edit rich text, instead of relying on `contenteditable` or using a plain ``/``. When using such custom methods, the cursor is not the native one, and is instead an HTML element, that can be stylized like any other. For example, Google Docs uses a 2-pixels-wide div with a black background to render its cursor.

Since those cursors are plain HTML elements, they can be **stylized**, that's where this extension comes in.

The process is simple:

1. Find the element

2. Append `transition: all 80ms` to its style tag

The problem with this is that methods using the native cursor can't really have them applied: we _can't_ access the system cursor to style it with CSS.

## Manual installation

If you want to install this extension manually:

1. Download this repository

2. Load the extension

  * On Firefox:

    1. Open 

    2. Click "This Firefox"

    3. Click "Load temporary addon"

    4. Navigate to the repository's folder and select the `manifest.json` file.

  * On Chrome: 

    1. Open 

    2. Toggle on "Developer mode"

    3. Click "Load unpacked extension"

    4. Select the repository's folder