Aloha HiveDevs,
I want to share a fun weekend project called Hive Fishy. It's a simple browser extension which displays Hive account status. When browsing on a popular Hive frontend such as Hive.blog, PeakD, LeoFinance, or Ecency, the extension's icon will update when looking at a profile or blog. The icon turns into a plankton, minnow, redfish, dolphin, orca, whale depending on the account's current Hive Power (HP).
Hive Fishy source is available on GitHub here: https://github.com/hiveuprss/hive-fishy. It is submitted to the Chrome App Store, pending review.
UPDATE: The browser extension is now available in the app store here: https://chrome.google.com/webstore/detail/hive-fishy/akpamabfabidiaiigaefaokgoogmhhkm. Please try it out and let me know what you think. If it gains traction I will upgrade the graphics.
Building browser extensions is fun because you don't need a lot of environment set up. The browser gives you tons of APIs, and the browser's developer tools are very familiar. Developer Tools Console provides a great sandbox/REPL for trying out code snippets and for debugging. The browser extension code all lives in DOM pages and JavaScript files.
Nuts and Bolts
When I started this project I looked around for a lightweight JavaScript Hive API client, and came across @mahdiyari's hive-tx-js (GitHub). Using this library, I only needed 3 lines of code to make requests for Hive account metadata. Amazing! See snippet below.
hiveTx.config.node = 'https://anyx.io'
hiveTx.call('condenser_api.get_accounts', [[account_name]])
.then(res => { /* do something */)`
Condenser's get_accounts API give us the account's vesting_shares value, which is not the same as Hive Power. A conversion is needed. From developer documentation the formula for conversion is total_vesting_fund_steem * user_vests / total_vesting_shares. And the total_vesting_fund_steem and total_vesting_shares values come from a different Condenser API called get_dynamic_global_properties. See here: https://developers.hive.io/tutorials-recipes/vest-to-steem.html
The rest of the guts are Chrome API's. The chrome.webNavigate API is used to subscribe to navigation events, which are needed to grab URL's from the address bar. The URL's are then parsed to extract Hive account name.
chrome.browserAction is used to dynamically change icons, badge background color, and badge badge text.
chrome.runtime.onMessage API is used to send data between the extensions popup page (which you see when you click on the icon) and the invisible background page. The background page holds the main extension logic such as calling hive-tx-js.
Chrome's message passing is very easy to use. Background.js listens for a message, and popup.js sends a message. When a response is received, the popup.js callback updates popup.html's data for display.
Art / assets
I am no designer or artist. I just used off-the-shelf vector graphics (free for commercial user and no attribution required) from Pixabay.com. The links are available in the GitHub project README.md.
One tricky part I ran into is the icon images need to specific pixel sizes, or Chrome/Brave will refuse to load the image. Luckily there are handy, web-based tools for this kind of icon cutting task. For this project I used https://hotpot.ai/icon_resizer to generate the icons in various sizes, using the "Favicon" and "Firefox" modes.
The current images and styles are working for a proof of concept, but readability is not great. Definitely room for improvement here.
Shout outs
Thank you @mahdiyari for creating hive-tx-js and making it available and open-source.
Thank you @eddiespino for the inspiration and idea for this project.
Thank you @nathanmars for encouraging folks to BUIDL on HIVE!!
