aboutsummaryrefslogtreecommitdiffstats
path: root/docs/frontend_api.md
diff options
context:
space:
mode:
authorLibravatar Vijay A <vraravam@users.noreply.github.com>2022-04-18 06:51:50 -0500
committerLibravatar Vijay A <vraravam@users.noreply.github.com>2022-04-18 06:51:50 -0500
commit18801ed0c02627e87639dc0848cab44dacc18be2 (patch)
tree15e56ba66c68bf7b4594e6c9fdef44e037b4be31 /docs/frontend_api.md
parentRemove deprecated webPreference flag (diff)
downloadferdium-recipes-18801ed0c02627e87639dc0848cab44dacc18be2.tar.gz
ferdium-recipes-18801ed0c02627e87639dc0848cab44dacc18be2.tar.zst
ferdium-recipes-18801ed0c02627e87639dc0848cab44dacc18be2.zip
Rebranded from 'ferdi' to 'ferdium' (companion changes for the main repo PR #2)
Diffstat (limited to 'docs/frontend_api.md')
-rw-r--r--docs/frontend_api.md56
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
38Provides a set of helper functions to integrate the service into [Ferdi](https://ferdium.org). 38Provides 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
59Ferdi.setBadge(4, 2); 59Ferdium.setBadge(4, 2);
60 60
61// or 61// or
62 62
63Ferdi.setBadge(3); 63Ferdium.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
79Ferdi.setDialogTitle('Dialog title'); 79Ferdium.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
95const path = require('path'); 95const path = require('path');
96 96
97// inject a single css file 97// inject a single css file
98Ferdi.injectCSS(path.join(__dirname, 'style.css')); 98Ferdium.injectCSS(path.join(__dirname, 'style.css'));
99 99
100// inject multiple css files 100// inject multiple css files
101const globalStyles = path.join(__dirname, 'global.css'); 101const globalStyles = path.join(__dirname, 'global.css');
102const focusModeStyles = path.join(__dirname, 'focusmode.css'); 102const focusModeStyles = path.join(__dirname, 'focusmode.css');
103 103
104Ferdi.injectCSS(globalStyles, focusModeStyles); 104Ferdium.injectCSS(globalStyles, focusModeStyles);
105``` 105```
106 106
107### injectJSUnsafe(pathToJsFile) 107### injectJSUnsafe(pathToJsFile)
108 108
109Injects the contents of one or more JavaScript files into the current webview without context isolation 109Injects the contents of one or more JavaScript files into the current webview without context isolation
110 110
111Ferdi uses context isolation to prevent services from accessing Node.js APIs in the webview. 111Ferdium uses context isolation to prevent services from accessing Node.js APIs in the webview.
112If 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. 112If 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.
113Trying 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. 113Trying 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
126const path = require('path'); 126const path = require('path');
127 127
128// inject a single css file 128// inject a single css file
129Ferdi.injectJSUnsafe(path.join(__dirname, 'webview-unsafe.js')); 129Ferdium.injectJSUnsafe(path.join(__dirname, 'webview-unsafe.js'));
130 130
131// inject multiple css files 131// inject multiple css files
132const globalScripts = path.join(__dirname, 'global.js); 132const globalScripts = path.join(__dirname, 'global.js);
133const focusModeScripts = path.join(__dirname, 'focusmode.js); 133const focusModeScripts = path.join(__dirname, 'focusmode.js);
134 134
135Ferdi.injectCSS(globalScripts, focusModeScripts); 135Ferdium.injectCSS(globalScripts, focusModeScripts);
136``` 136```
137 137
138### loop(action) 138### loop(action)
139 139
140Runs an action every X milliseconds (Ferdi default is currently 1s) 140Runs 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
150const path = require('path'); 150const path = require('path');
151 151
152module.exports = Ferdi => { 152module.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
180module.exports = Ferdi => { 180module.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
210This handler should take the necessary steps to (de-)activate dark mode on the page, e.g. by clicking a button or flipping a switch. 210This 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
212Ferdi 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. 212Ferdium 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
232Ferdi.handleDarkMode((isEnabled, helpers) => { 232Ferdium.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
254Ferdi.handleDarkMode((isEnabled, helpers) => { 254Ferdium.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
305Ferdi.safeParseInt(mySelector.innerText) 305Ferdium.safeParseInt(mySelector.innerText)
306``` 306```
307 307
308### setDialogTitle(title) 308### setDialogTitle(title)
309 309
310When you want to set the title of the Ferdi window (while this service is active or in focus), you can use this function 310When 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
319Ferdi.setDialogTitle(element ? element.textContent : null); 319Ferdium.setDialogTitle(element ? element.textContent : null);
320``` 320```