https://github.com/raindropio/highlight
https://github.com/raindropio/highlight
Last synced: 4 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/raindropio/highlight
- Owner: raindropio
- Created: 2024-06-28T13:08:25.000Z (almost 2 years ago)
- Default Branch: master
- Last Pushed: 2025-11-17T13:26:48.000Z (7 months ago)
- Last Synced: 2025-11-17T15:19:22.966Z (7 months ago)
- Language: HTML
- Size: 1.3 MB
- Stars: 12
- Watchers: 2
- Forks: 5
- Open Issues: 1
-
Metadata Files:
- Readme: readme.md
Awesome Lists containing this project
README
# Highlight
```
npm i
npm run build
cd dist/
```
### Subscribe to events
- { type: 'RDH_READY', payload: { url } } Highlighter is ready to receive incoming msgs
- { type: 'RDH_ADD', payload: { text, color, note } } Add new highlight
- { type: 'RDH_UPDATE', payload: { _id, note... } } Update specific highlight, only updated fields are present in payload!
- { type: 'RDH_REMOVE', payload: { _id } } Remove specific highlight
### Supported events
- { type: 'RDH_CONFIG', payload: { enabled: true, nav: true, pro: true } }
- { type: 'RDH_APPLY', payload: [[...{_id, text, color, note}]] }
- { type: 'RDH_SCROLL', payload: { _id } }
- { type: 'RDH_ADD_SELECTION' }
- { type: 'RDH_NOTE_SELECTION' }
### Use as an webextension inject script
Example in `test/webextension` folder
```js
browser.runtime.onMessage.addListener(({ type, payload }, sender)=>{
if (sender.id != browser.runtime.id || typeof type != 'string') return
})
browser.tabs.sendMessage(sender.tab.id, { type: 'some', payload: {} })
```
### Iframe
Example in `test/iframe` folder
```js
window.addEventListener('message', ({data, source}) => {
if (typeof data != 'object' || typeof data.type != 'string') return
const { type, payload } = data
})
iframe.postMessage({ type: 'some', payload: {} }, '*')
```
### Use in electron
Example in `test/electron` folder
```js
webview.addEventListener('ipc-message', ({ channel, args=[] }) => {
if (channel != 'RDH') return
const [{ type, payload }] = args
})
webview.send('RDH', { type: 'some', payload: {} })
```
### Use in React Native
```js
{
const data = JSON.parse(nativeEvent.data)
if (typeof data != 'object' || typeof data.type != 'string') return
const { type, payload } = data
}} />
import js from './highlight.string.js'
ref.current.injectJavaScript(`${js}; true`)
ref.current.injectJavaScript(`window.ReactNativeWebViewSendMessage(${JSON.stringify({ type: 'some', payload: {} })}); true`)
```