https://github.com/yukinarit/parrotify
Parrotify is a google chrome extension to allow custom GIF emoji displayed in your browser :thumbsupparrot:
https://github.com/yukinarit/parrotify
Last synced: 25 days ago
JSON representation
Parrotify is a google chrome extension to allow custom GIF emoji displayed in your browser :thumbsupparrot:
- Host: GitHub
- URL: https://github.com/yukinarit/parrotify
- Owner: yukinarit
- Created: 2020-07-06T13:00:55.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2020-12-17T12:50:11.000Z (over 4 years ago)
- Last Synced: 2025-02-06T08:27:43.689Z (3 months ago)
- Language: JavaScript
- Homepage:
- Size: 1.97 MB
- Stars: 4
- Watchers: 3
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
Parrotify 
Parrotify is a google chrome extension to allow animated GIF emoji displayed in your browser!
(This project is still in early stages! It's so buggy!)
Without Parrotify | With Parrotify
:-------------------------:|:-------------------------:
| 
## Features
You can add your favorite emoji from option page.
Also, you can set an URL pattern to specify which host Parrotify runs on.
## Installation
Parrotify is not yet in Chrome web store, so you need to build from the source.
* Clone the repository
```
$ git clone [email protected]:yukinarit/parrotify.git
```
* Build
```
$ cd option-app
$ npm i
$ npm run build
```
* Load parrotify
* Open Google chrome
* Type `chrome://extensions` in address bar
* Click `Load unpacked`
* Choose `parrotify` directory
## How does it work?
Very simple. Chrome extension allows to insert a javascript code in the page a user visits, it's called [Content Script](https://developer.chrome.com/docs/extensions/mv2/content_scripts/). Parrotify searches emoji text such as `:parrot:` in a page and replace it with `img` of image file.
But scanning a page is quite slow, and block the browser rendering! Parrotify implements the following techniques to workaround the perforance issue.
* Filter page by pattern to prevent Parrotify from running in unwated pages
* Cache emoji image data in memory
* Specify [document_idle](https://developer.chrome.com/docs/extensions/mv2/content_scripts/) in `manifest.json` to run the content after a page loaded
* Use [requestIdCallback](https://developer.mozilla.org/en-US/docs/Web/API/Window/requestIdleCallback) to defer the execution when a browser is idle.
* After scanning a page and found elements that contain emoji text, create a task per element push in the task queue
* The callback registered in `requestIdCallback` pops a task and execute it when the browser idle
* A task replaces the emoji text with `img` of image file
## TODO
* [ ] Use [ag-grid](https://github.com/ag-grid/ag-grid) for url table in option page
* [ ] Add popup page
* [ ] Allow deleting emoji in option page
* [ ] Allow specifying emoji scale factor per element. The currently it's hardcoded in [the source](https://github.com/yukinarit/parrotify/blob/master/script.js#L13-L18)
## CONTRIBUTING
The auther is not an expert in frontend. I'd appreciate helps like
* Feature and bugfix
* Improve performance
* Give Feedback
* Docuentation
## LICENSE
MIT