Frontend API
The Franz Frontend API provides a set of helper functions to integrate a service into Franz.
Every Franz Recipe requires a webview.js
. The minimum requirement in webview.js to access the Franz Frontend API, is to export a function that takes the Franz
class as an argument.
module.exports = (Franz) => {
// insert your magic here
}
Franz Class Methods
setBadge(directMessages, [indirectMessages])
Sets the unread message badge
Arguments
int
directMessages
- sets the count of direct messages eg. Slack direct mentions, or a message to @channel
int
indirectMessages (optional)
- Set a badge that defines there are new messages but they do not involve me directly to me eg. in a channel
Usage
Franz.setBadge(4, 2);
injectCSS(pathToCssFile)
Injects the contents of one or more CSS files into the current webview
Arguments
string
cssFile
- CSS files that should be injected. This must be an absolute path to the file
Usage
const path = require('path');
// inject a single css file
Franz.injectCSS(path.join(__dirname, 'style.css'));
// inject multiple css files
const globalStyles = path.join(__dirname, 'global.css');
const focusModeStyles = path.join(__dirname, 'focusmode.css');
Franz.injectCSS(globalStyles, focusModeStyles);
loop(action)
Runs an action every X milliseconds (Franz default is currently 2s)
Arguments
function
action
Usage
// slack integration
const path = require('path');
module.exports = (Franz) => {
const getMessages = () => {
const directMessages = $('.unread_highlights, .unread_highlight').not('.hidden').length;
const indirectMessages = $('.unread').length - directMessages;
Franz.setBadge(directMessages, indirectMessages);
}
Franz.loop(getMessages);
Franz.injectCSS(path.join(__dirname, 'style.css'));
}
onNotify(fn)
Runs fn
on every notification created by the service before sending them to the host (Useful if you want to update information of the notification before showing it to the user)
Arguments
function
fn
Usage
// messenger integration
module.exports = (Franz) => {
const getMessages = function getMessages() {
let count = document.querySelectorAll('._5fx8:not(._569x),._1ht3:not(._569x)').length;
const messageRequestsElement = document.querySelector('._5nxf');
if (messageRequestsElement) {
count += parseInt(messageRequestsElement.innerHTML, 10);
}
Franz.setBadge(count);
};
Franz.loop(getMessages);
Franz.onNotify(notification => {
if (typeof notification.title !== 'string') {
notification.title = ((notification.title.props || {}).content || [])[0] || 'Messenger';
}
return notification;
});
};