diff options
Diffstat (limited to 'docs/frontend_api.md')
-rw-r--r-- | docs/frontend_api.md | 56 |
1 files changed, 28 insertions, 28 deletions
diff --git a/docs/frontend_api.md b/docs/frontend_api.md index 35b0918..af9acf8 100644 --- a/docs/frontend_api.md +++ b/docs/frontend_api.md | |||
@@ -1,5 +1,5 @@ | |||
1 | - [Frontend API](#frontend-api) | 1 | - [Frontend API](#frontend-api) |
2 | - [Ferdi Class Methods](#ferdi-class-methods) | 2 | - [Ferdium Class Methods](#ferdium-class-methods) |
3 | - [setBadge(directMessages, [indirectMessages])](#setbadgedirectmessages-indirectmessages) | 3 | - [setBadge(directMessages, [indirectMessages])](#setbadgedirectmessages-indirectmessages) |
4 | - [Arguments](#arguments) | 4 | - [Arguments](#arguments) |
5 | - [Usage](#usage) | 5 | - [Usage](#usage) |
@@ -35,9 +35,9 @@ | |||
35 | 35 | ||
36 | # Frontend API | 36 | # Frontend API |
37 | 37 | ||
38 | Provides a set of helper functions to integrate the service into [Ferdi](https://ferdium.org). | 38 | Provides a set of helper functions to integrate the service into [Ferdium](https://ferdium.org). |
39 | 39 | ||
40 | ## Ferdi Class Methods | 40 | ## Ferdium Class Methods |
41 | 41 | ||
42 | ### setBadge(directMessages, [indirectMessages]) | 42 | ### setBadge(directMessages, [indirectMessages]) |
43 | 43 | ||
@@ -56,11 +56,11 @@ Sets the unread message badge | |||
56 | #### Usage | 56 | #### Usage |
57 | 57 | ||
58 | ```js | 58 | ```js |
59 | Ferdi.setBadge(4, 2); | 59 | Ferdium.setBadge(4, 2); |
60 | 60 | ||
61 | // or | 61 | // or |
62 | 62 | ||
63 | Ferdi.setBadge(3); | 63 | Ferdium.setBadge(3); |
64 | ``` | 64 | ``` |
65 | 65 | ||
66 | ### setDialogTitle(title) | 66 | ### setDialogTitle(title) |
@@ -76,7 +76,7 @@ Sets the active dialog title to the app title | |||
76 | #### Usage | 76 | #### Usage |
77 | 77 | ||
78 | ```js | 78 | ```js |
79 | Ferdi.setDialogTitle('Dialog title'); | 79 | Ferdium.setDialogTitle('Dialog title'); |
80 | ``` | 80 | ``` |
81 | 81 | ||
82 | ### injectCSS(pathToCssFile) | 82 | ### injectCSS(pathToCssFile) |
@@ -95,20 +95,20 @@ Injects the contents of one or more CSS files into the current webview | |||
95 | const path = require('path'); | 95 | const path = require('path'); |
96 | 96 | ||
97 | // inject a single css file | 97 | // inject a single css file |
98 | Ferdi.injectCSS(path.join(__dirname, 'style.css')); | 98 | Ferdium.injectCSS(path.join(__dirname, 'style.css')); |
99 | 99 | ||
100 | // inject multiple css files | 100 | // inject multiple css files |
101 | const globalStyles = path.join(__dirname, 'global.css'); | 101 | const globalStyles = path.join(__dirname, 'global.css'); |
102 | const focusModeStyles = path.join(__dirname, 'focusmode.css'); | 102 | const focusModeStyles = path.join(__dirname, 'focusmode.css'); |
103 | 103 | ||
104 | Ferdi.injectCSS(globalStyles, focusModeStyles); | 104 | Ferdium.injectCSS(globalStyles, focusModeStyles); |
105 | ``` | 105 | ``` |
106 | 106 | ||
107 | ### injectJSUnsafe(pathToJsFile) | 107 | ### injectJSUnsafe(pathToJsFile) |
108 | 108 | ||
109 | Injects the contents of one or more JavaScript files into the current webview without context isolation | 109 | Injects the contents of one or more JavaScript files into the current webview without context isolation |
110 | 110 | ||
111 | Ferdi uses context isolation to prevent services from accessing Node.js APIs in the webview. | 111 | Ferdium uses context isolation to prevent services from accessing Node.js APIs in the webview. |
112 | If you want to expose objects to the service (eg. via the `window` object) or interact with the Javascript loaded by the service you must do so from a script injected with this method. | 112 | If you want to expose objects to the service (eg. via the `window` object) or interact with the Javascript loaded by the service you must do so from a script injected with this method. |
113 | Trying to overwrite properties of the `window` object or other objects or trying to interact with the Javascript loaded by the service from `webview.js` will fail due to context isolation. | 113 | Trying to overwrite properties of the `window` object or other objects or trying to interact with the Javascript loaded by the service from `webview.js` will fail due to context isolation. |
114 | 114 | ||
@@ -126,18 +126,18 @@ The code is executed as if part of the body of a Javascript function, ie. you sh | |||
126 | const path = require('path'); | 126 | const path = require('path'); |
127 | 127 | ||
128 | // inject a single css file | 128 | // inject a single css file |
129 | Ferdi.injectJSUnsafe(path.join(__dirname, 'webview-unsafe.js')); | 129 | Ferdium.injectJSUnsafe(path.join(__dirname, 'webview-unsafe.js')); |
130 | 130 | ||
131 | // inject multiple css files | 131 | // inject multiple css files |
132 | const globalScripts = path.join(__dirname, 'global.js); | 132 | const globalScripts = path.join(__dirname, 'global.js); |
133 | const focusModeScripts = path.join(__dirname, 'focusmode.js); | 133 | const focusModeScripts = path.join(__dirname, 'focusmode.js); |
134 | 134 | ||
135 | Ferdi.injectCSS(globalScripts, focusModeScripts); | 135 | Ferdium.injectCSS(globalScripts, focusModeScripts); |
136 | ``` | 136 | ``` |
137 | 137 | ||
138 | ### loop(action) | 138 | ### loop(action) |
139 | 139 | ||
140 | Runs an action every X milliseconds (Ferdi default is currently 1s) | 140 | Runs an action every X milliseconds (Ferdium default is currently 1s) |
141 | 141 | ||
142 | #### Arguments | 142 | #### Arguments |
143 | 143 | ||
@@ -149,19 +149,19 @@ Runs an action every X milliseconds (Ferdi default is currently 1s) | |||
149 | // slack integration | 149 | // slack integration |
150 | const path = require('path'); | 150 | const path = require('path'); |
151 | 151 | ||
152 | module.exports = Ferdi => { | 152 | module.exports = Ferdium => { |
153 | const getMessages = () => { | 153 | const getMessages = () => { |
154 | const directMessages = $('.unread_highlights, .unread_highlight').not( | 154 | const directMessages = $('.unread_highlights, .unread_highlight').not( |
155 | '.hidden', | 155 | '.hidden', |
156 | ).length; | 156 | ).length; |
157 | const indirectMessages = $('.unread').length - directMessages; | 157 | const indirectMessages = $('.unread').length - directMessages; |
158 | 158 | ||
159 | Ferdi.setBadge(directMessages, indirectMessages); | 159 | Ferdium.setBadge(directMessages, indirectMessages); |
160 | }; | 160 | }; |
161 | 161 | ||
162 | Ferdi.loop(getMessages); | 162 | Ferdium.loop(getMessages); |
163 | 163 | ||
164 | Ferdi.injectCSS(path.join(__dirname, 'style.css')); | 164 | Ferdium.injectCSS(path.join(__dirname, 'style.css')); |
165 | }; | 165 | }; |
166 | ``` | 166 | ``` |
167 | 167 | ||
@@ -177,22 +177,22 @@ Runs `fn` on every notification created by the service before sending them to th | |||
177 | 177 | ||
178 | ```js | 178 | ```js |
179 | // messenger integration | 179 | // messenger integration |
180 | module.exports = Ferdi => { | 180 | module.exports = Ferdium => { |
181 | const getMessages = () => { | 181 | const getMessages = () => { |
182 | let count = document.querySelectorAll( | 182 | let count = document.querySelectorAll( |
183 | '._5fx8:not(._569x),._1ht3:not(._569x)', | 183 | '._5fx8:not(._569x),._1ht3:not(._569x)', |
184 | ).length; | 184 | ).length; |
185 | const messageRequestsElement = document.querySelector('._5nxf'); | 185 | const messageRequestsElement = document.querySelector('._5nxf'); |
186 | if (messageRequestsElement) { | 186 | if (messageRequestsElement) { |
187 | count += Ferdi.safeParseInt(messageRequestsElement.textContent); | 187 | count += Ferdium.safeParseInt(messageRequestsElement.textContent); |
188 | } | 188 | } |
189 | 189 | ||
190 | Ferdi.setBadge(count); | 190 | Ferdium.setBadge(count); |
191 | }; | 191 | }; |
192 | 192 | ||
193 | Ferdi.loop(getMessages); | 193 | Ferdium.loop(getMessages); |
194 | 194 | ||
195 | Ferdi.onNotify(notification => { | 195 | Ferdium.onNotify(notification => { |
196 | if (typeof notification.title !== 'string') { | 196 | if (typeof notification.title !== 'string') { |
197 | notification.title = | 197 | notification.title = |
198 | ((notification.title.props || {}).content || [])[0] || 'Messenger'; | 198 | ((notification.title.props || {}).content || [])[0] || 'Messenger'; |
@@ -209,7 +209,7 @@ You can use a `darkmode.css` to automatically get the service into a dark theme. | |||
209 | 209 | ||
210 | This handler should take the necessary steps to (de-)activate dark mode on the page, e.g. by clicking a button or flipping a switch. | 210 | This handler should take the necessary steps to (de-)activate dark mode on the page, e.g. by clicking a button or flipping a switch. |
211 | 211 | ||
212 | Ferdi won't activate DarkReader or inject `darkmode.css` if the recipe has defined a custom handler. If you still need to do this, you can use the `injectDarkModeStyle` or `enableDarkMode` function provided as the second argument. | 212 | Ferdium won't activate DarkReader or inject `darkmode.css` if the recipe has defined a custom handler. If you still need to do this, you can use the `injectDarkModeStyle` or `enableDarkMode` function provided as the second argument. |
213 | 213 | ||
214 | #### Arguments | 214 | #### Arguments |
215 | 215 | ||
@@ -229,7 +229,7 @@ Ferdi won't activate DarkReader or inject `darkmode.css` if the recipe has defin | |||
229 | 229 | ||
230 | ```JavaScript | 230 | ```JavaScript |
231 | // Handler that works for Reddit | 231 | // Handler that works for Reddit |
232 | Ferdi.handleDarkMode((isEnabled, helpers) => { | 232 | Ferdium.handleDarkMode((isEnabled, helpers) => { |
233 | // Open dropdown menu if not already open | 233 | // Open dropdown menu if not already open |
234 | const menu = document.querySelector('#USER_DROPDOWN_ID'); | 234 | const menu = document.querySelector('#USER_DROPDOWN_ID'); |
235 | if (menu.getAttribute('aria-expanded') === 'false') { | 235 | if (menu.getAttribute('aria-expanded') === 'false') { |
@@ -251,7 +251,7 @@ Ferdi.handleDarkMode((isEnabled, helpers) => { | |||
251 | // --- or --- | 251 | // --- or --- |
252 | 252 | ||
253 | // Helper that activates DarkReader and injects your darkmode.css at the same time | 253 | // Helper that activates DarkReader and injects your darkmode.css at the same time |
254 | Ferdi.handleDarkMode((isEnabled, helpers) => { | 254 | Ferdium.handleDarkMode((isEnabled, helpers) => { |
255 | if (isEnabled) { | 255 | if (isEnabled) { |
256 | helpers.enableDarkMode(); | 256 | helpers.enableDarkMode(); |
257 | if (!helpers.isDarkModeStyleInjected()) { | 257 | if (!helpers.isDarkModeStyleInjected()) { |
@@ -276,7 +276,7 @@ While exiting/closing/disabling the service, if you want to clear the local stor | |||
276 | #### Usage | 276 | #### Usage |
277 | 277 | ||
278 | ```JavaScript | 278 | ```JavaScript |
279 | Ferdi.clearStorageData(settings.id, { | 279 | Ferdium.clearStorageData(settings.id, { |
280 | storages: [ | 280 | storages: [ |
281 | 'appcache', | 281 | 'appcache', |
282 | 'serviceworkers', | 282 | 'serviceworkers', |
@@ -302,12 +302,12 @@ A utility method that can be used to safely parse the text content (handles null | |||
302 | #### Usage | 302 | #### Usage |
303 | 303 | ||
304 | ```JavaScript | 304 | ```JavaScript |
305 | Ferdi.safeParseInt(mySelector.innerText) | 305 | Ferdium.safeParseInt(mySelector.innerText) |
306 | ``` | 306 | ``` |
307 | 307 | ||
308 | ### setDialogTitle(title) | 308 | ### setDialogTitle(title) |
309 | 309 | ||
310 | When you want to set the title of the Ferdi window (while this service is active or in focus), you can use this function | 310 | When you want to set the title of the Ferdium window (while this service is active or in focus), you can use this function |
311 | 311 | ||
312 | #### Arguments | 312 | #### Arguments |
313 | 313 | ||
@@ -316,5 +316,5 @@ When you want to set the title of the Ferdi window (while this service is active | |||
316 | #### Usage | 316 | #### Usage |
317 | 317 | ||
318 | ```JavaScript | 318 | ```JavaScript |
319 | Ferdi.setDialogTitle(element ? element.textContent : null); | 319 | Ferdium.setDialogTitle(element ? element.textContent : null); |
320 | ``` | 320 | ``` |