Hackathon Update: Breaking Our Idea Down Into Dog-Treat-Sized Tasks

@sharon and I are continuing to work on our #GftWhackathon project. For our submission, we are making Akita! Akita is a browser extension that gives you insight into your involvement with Web Monetization. We have broken down our browser extension creation process into 8 tasks. We use GitHub to manage our tasks; you can see all our comments, related code, and progress on Akita's GitHub page. In this article I list our tasks and give a brief explanation of each of them. We have finished ✅ some already, and we are still working 🚧 on the others.

For a backstory and explanation of the thinking behind Akita, check out the article @sharon wrote:

How can you support websites without having to deal with annoying ads?

Sharon for esse-dev ・ Jun 2 '20

#gftwhackathon #webmonetization #webdev #browser

Here are our 8 tasks for creating the Akita browser extension for the #GftWhackathon:

✅
1. Commit basic project structure

• Create a "hello world" browser extension.

✅
2. Check for monetization meta tag on a webpage

• Check whether the "monetization" meta tag for a payment pointer exists on the site.
• Validate the payment pointer according to https://paymentpointers.org/ and https://interledger.org/rfcs/0009-simple-payment-setup-protocol/#specification.

🚧
3. Change extension icon dynamically from JavaScript

• When a user is on a monetized website, the Akita extension icon in the browser bar should visually change to make it clear that the site is monetized.

✅
4. Figure out how to store data without relying on browser search history

• Store data using browser.storage.local. Write helper functions to make sure data is stored in the expected structure, and data is not accidentally overwritten.
• https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage

✅
5. Data collection: Track amount streamed to websites

• Use the Web Monetization JavaScript API to listen to monetization events and collect data through the extension. The API is available to website developers through functions in the document.monetization object. This ended up being a challenge because the document.monetization object is not directly accessible in the browser extension JavaScript runtime environment, so a script must be injected into the webpage to access it.

🚧
6. Data collection: Track # of visits to websites

• Track and store total number of visits to monetized sites vs. unmonetized sites.

🚧
7. Data collection: Track time spent on a webpage

• Track and store total time spent on monetized sites vs. unmonetized sites.

🚧
8. Load collected data and display it in the extension pop-up

• When a user clicks on the Akita extension icon in the browser bar, a small window will pop up which visually displays all of the collected data, whether the current page is web monetized, and links to resources for getting involved with Web Monetization.

Thank you for reading and following our progress in the hackathon! I've seen that some people have already posted some cool submissions. I'm excited to be getting involved in the growing Web Monetization community and can't wait for @sharon and I to submit Akita :)