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 ・ Jun 2 ・ 3 min read

#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 :)

Comments

[Emma Goto 🍙]

The name is so cute! 😍 (I might be biased because I own a Shiba). Are you planning on naming other projects after dogs too?

[Elliot]

Thanks Emma :) Shibas are such cool dogs too!

When we were brainstorming names and the idea of naming it after a dog came up, we felt really good about it. We'll see what happens with future projects but I think that it would be cool to name them after dogs!!