Xbar bővítmény írása Javascript-be
Hétvégi projektként egy egyszerű bővítményt akartam írni az xbar-hoz, egy olyan alkalmazást, amiben nemrég megbotlottam. Az xbar maga a „Go” programozási nyelven íródott, és a „Wails” szolgáltatást használja alapul szolgáló szolgáltatásként, hogy a fejlesztők egyéni menübejegyzéseket írhassanak a MacOS menüsorához (igen, jelenleg csak a macOS -ra korlátozódik).
Az xbar szépsége az, hogy támogatja a programozási nyelvek széles skáláját, beleértve a Javascript -et is. Én magam, mint webfejlesztő, szerettem volna látni, hogy milyen egyszerű olyan egyéni bővítményt írni, amely kapcsolódik a Plausible.io-hoz, az adatvédelem-barát elemzőszolgáltatásomhoz. A cél az összes jelenlegi felhasználó megjelenítése, akik jelenleg ezen a webalkalmazáson vannak. Írásáig a lekérési kérelem még felülvizsgálat alatt áll.
Alap xbar beállítás
Az xbar egyszerűen letölthető és telepíthető a Mac számítógépére. Az első indítás után az összes letölthető és közzétett bővítményt tartalmazó képernyő használható a kívánt bővítmény beszerzésére.
A telepítési folyamat egyszerűen bemásolja a beépülő modul forráskódját (egyetlen fájl pluginonként) egy speciális mappába, ahonnan az xbar leolvassa az összes jelenleg telepített bővítményt. A saját bővítmény írásának megkezdéséhez egyszerűen hozzon létre egy fájlt a könyvtárban, és kezdje el a hackelést. Tiszta!
xbar fájlnév -egyezmény
A fájl neve három részből áll, ponttal elválasztva.
- egyedi plugin neve
- a kód végrehajtásának időintervalluma, hasonlóan a CRON-feladatokhoz
- a közös fájl utótagja
plausible.1m.js
Xbar bővítmény kódolása JS -ben
Most már készen áll a kódolás megkezdésére! Először is tartalmazza a szükséges shebang utasítást, hogy megmondja az xbarnak, hol kell megtalálni a csomópontpéldányt.
#!/usr/bin/env /usr/local/bin/node
A következő rész néhány metaadat hozzáadása. Természetesen a helyi fejlesztés érdekében ezt el lehet hagyni, de ezt használom a Plausible pluginhez.
// Metadata allows your plugin to show up in the app, and website.
//
// <xbar.title>Plausible Tracker</xbar.title>
// <xbar.version>v1.0</xbar.version>
// <xbar.author>Tom Schönmann</xbar.author>
// <xbar.author.github>flaming-codes</xbar.author.github>
// <xbar.desc>See who's on your site at-a-glance.</xbar.desc>
// <xbar.dependencies>node</xbar.dependencies>
// <xbar.abouturl>https://flaming.codes</xbar.abouturl>
// <xbar.image>https://raw.githubusercontent.com/flaming-codes/xbar-plausible-stats/main/plausible-icon-36-36-144.png</xbar.image>
És ez minden, ami szükséges a beépülő modul futtatásához. Most van egy vászonja, ahol tiszta Javascript-ben kódolhat, amelyet a felhasználó Node.js-példánya hajt végre. Ez azt jelenti, hogy hozzáférünk minden alapvető csomópont-csomaghoz, például a „https” -hez. Az én esetemben ez minden, amire szükségem van, mivel a felhasználók nyomon követése egyszerűen lekérést igényel a Plausible.io-API-tól.
A következő kódrészletek a legrelevánsabb részt mutatják be, amelyről szerintem érdemes beszélni. A teljes kód a kapcsolódó nyilvános adattárban érhető el, az oldal végén található kiegészítés linkje.
// Here you see how to make network
// requests with 'https'-only.
// This is a native node-lib that
// works w/ data streams, as you'll see.
const https = require("https");
// Those have to edited by the
// user directly in the file,
// after it has been downloaded
// (aka installed)!
const SITE_ID = "";
const API_KEY = "";
// ... other code ...
async function fetcher() {
return new Promise((resolve, reject) => {
let body = "";
const request = {
host: "plausible.io",
path: `/api/v1/stats/realtime/visitors?site_id=${SITE_ID}`,
method: "GET",
headers: {
Authorization: `Bearer ${API_KEY}`,
},
};
try {
const req = https.get(request, (res) => {
res.on("data", (data) => {
body += data;
});
res.on("end", () => {
resolve(JSON.parse(body));
});
});
req.on("error", (error) => {
console.error(error);
});
req.end();
} catch (error) {
reject(error);
}
});
}
// I've implemented an array of tuples
// that hold an icon + count threshold
// when to active it.
// The first entry doesn't render a
// string (which can be direclty used),
// but rather a mapping that results in
// the following code:
//
// `image="..." font=Menlo color=white`
//
// This is a special syntax that tells
// xbar to render a base64 image w/
// a custom font and color.
//
// 'plausibleIconWhite' is just the string
// for the base64-image.
const stepIcons = [
[0, `${plausibleIconWhite} Menlo white`, "image font color"],
[5, "💫"],
[10, "⭐️"],
[50, "🌟"],
[100, "⚡️"],
[500, "💥"],
];
// Actually rendering stuff in xbar
// is super simple - just output it
// with console.log(...).
//
// As you'll see, '---' define
// separator. The first log-call
// gets rendered as acutal menu item.
const linksMenu = [
"---",
`🔮 Open dashboard | href=https://plausible.io/${SITE_ID}`,
`🔥 Made by flaming.codes | href=https://flaming.codes`,
];
function renderError(props) {
const { error } = props;
const output = [
"❔",
"---",
"No data accessible",
"Please check your user data",
...linksMenu,
];
console.log(output.join("\n"));
}
// Finally, I defined a single function
// where everything starts. This function
// just gets called to kick everyting off.
// Plain JS, it's that simple.
async function render() {
const { data, error } = await fetcher()
.then((data) => ({ data }))
.catch((error) => ({ error }));
if (data >= 0) return renderData({ data });
if (error) return renderError({ error });
}
render();
Az xbar kódolása egyszerű
Az egész folyamat néhány órát vett igénybe, főként az API -ból való ellenőrzés az xbar -ból, valamint a stílus különböző konfigurációival való játék. Mindent összevetve, egy ilyen egyszerű bővítmény írása valóban nem sok erőfeszítés, ami igazán szórakoztató. Ha van néhány szabad órád, akkor azt is ki kell próbálnod!
Azt hiszem, ami az xbar számára a legjobban szól, az a szkriptolási lehetőség, amelyet ez a rugalmas és gyors fejlesztés lehetővé tesz. Egyéni nyomkövetőket írhat felhőbeállításaihoz vagy elemzőszolgáltatásaihoz, így a mutatók pillanatok alatt láthatók a macOS menüsorában. Tetszik!
