Web Monetization is an exciting new concept! It's paving the way for a more open, fair and inclusive web, to better support both users and creators. But, it's not exactly the easiest concept to understand. It took hours of research and reading before Web Monetization clicked for Elliot and I.

Once we had a grasp of Web Monetization, we realized that the journey to Web Monetization enlightenment was not an easy one. We could see a few major hurdles to overcome along the way:

  • Understanding how it works: if you don't have technical experience, you aren’t enabled to see the big picture and if you do have technical experience, you may still face a steep learning curve.
  • Being comfortable with what it costs: putting money into something you don't understand doesn't feel safe and you may not be in a position to put in money anyways.
  • How it relates to you: it’s not clear how Web Monetization affects the way you interact with websites.

Because of these hurdles, it can be difficult to see the value and broad potential of Web Monetization. We felt like there was a gap — although there’s a good amount of content explaining Web Monetization, we wished there was a free and easy way to experience Web Monetization.

What We Built

We built Akita, a browser extension that gives you insight into your involvement with Web Monetization.

Akita presents your top visited monetized sites, how much time you’re spending on them, and how much you’re contributing (or could contribute) to them.

If you’re looking to start supporting websites by streaming payment, Akita will give you a good idea of which sites you can directly support through Web Monetization. If you’re already using a Web Monetization payment provider, Akita gives you insight into your contributions to the website by showing you the time spent on the site and the amount of payment streamed as a result.

As Web Monetization becomes more common on websites, you’ll be able to see the evolution through Akita. We hope to see your favourite sites join the Web Monetization community! All of the data collected about your browsing and streamed payments is stored in local browser storage, so all of this information stays in your hands.

Overall, our goal with Akita is to increase Web Monetization exposure and awareness, and to help people understand how Web Monetization fits in with their regular browsing. We want to give people who aren’t using a Web Monetization provider a way to engage in payment streaming. As more Web Monetization providers pop up, users can choose providers that fit their needs based on the browsing data presented by Akita.

Submission Category: Foundational Technology

Demo

Akita Extension Icon

The Akita extension icon changes depending on the site you are visiting. If the site has monetization enabled, then the Akita icon will look something like:

Monetization Enabled Akita Icon

Otherwise, if the site does not have monetization enabled, then the icon will appear as:

Monetization Not Enabled Akita Icon

Akita Main View

Our browser extension helps you see the top monetized sites you visit and your involvement with Web Monetization at-a-glance.

Here's a screenshot of what Akita looks like if you're using a Web Monetization provider:

Monetization Enabled Akita Main View

You'll likely have some monetized sites that you visit often, but don't really spend much time on. Maybe you'd like to give them a little more love and spend a bit more time there, so that additional payment can be streamed to them. Check out the 'These monetized sites could use ♄' section!

Needs Love Hover

Here's an example of what Akita looks like if you don't have a Web Monetization provider installed:

Monetization Not Enabled Akita Main View

Akita Video Demo

Demo Video

Link to Code

esse-dev/akita

To try out Akita, follow the instructions in our README! We've provided instructions on how to install our browser extension on Chrome and Firefox. We hope to make it available in browser extension stores soon! We've also added some basic contribution guidelines if you'd like to join our effort. :)

How We Built Akita

Stack

  • JavaScript
  • HTML
  • CSS
  • Browser extension APIs

Challenges

Tracking time spent on a website (Issue, PR)

Finding suitable and simple APIs to track time was a bit challenging. We ended up using the Page Visibility API and checking performance.now() in a regular interval to log time spent on the site. Here's what we did: trackTimeOnSite().

Additionally, the inconsistent performance of new Date() and performance.now() on different browsers was surprising. Here's a simple benchmark we used to test performance of the two on Chrome vs Firefox.

Twitch monetization tracking (Issue, PR)

After getting our first few commits in, we noticed that we weren't tracking monetization properly on Twitch. For Twitch, the monetization meta tag is added dynamically after the page loads. Additionally, if Coil is not installed the meta tag is not added.

We learned that Coil is directly integrated with Twitch, so personalized payment pointers are generated and assigned to each streamer's page.

Unfortunately, due to how payment pointers are added to Twitch, we're unable to access the monetization meta tag when an Akita user who isn't using a Web Monetization provider visits the site. This means that we can't relay Twitch monetization info to our user, if they aren't using Coil. That's alright though, we decided to look into other ways we can bring value to a user who isn't using a provider.

Interesting Discoveries

Payment Pointer Verification (Issue, PR)

At first, checking for monetization on a site seemed pretty trivial — just check for the monetization meta tag. Then, we realized that checking for the tag only confirms that there is a payment pointer. But that doesn't mean that the payment pointer is actually valid.

To verify that the payment pointer itself is valid, we first grabbed the payment pointer from the monetization meta tag. Then, we resolved it from its raw format to the Interledger SPSP Endpoint format. If you're interested, you can check out some payment pointer syntax resolution examples here. After that, we made an HTTP request to the resolved endpoint, with an expectation of 200 OK as the response. If that expectation is fulfilled and we receive 200 OK as the response, then we deem the pointer to be valid. Something we missed during development is handling 3XX responses as a result of a vanity payment pointer being used. We've opened an issue for this and we'll work on resolving it post-hackathon.

(As a little sidenote, while reading the SPSP Specification I realized a typo and opened a PR to fix it. It was merged! It's a super tiny change, but it still felt really fulfilling to contribute.)

That's the summary of how we validated payment pointers — you can check out the code here if you'd like!

Providing a meaningful experience for those who aren't using a Web Monetization provider

Since Web Monetization is a pretty recent addition to the web ecosystem, there's going to be a lot of people unfamiliar with it. With this in mind, we spent a lot of time thinking about how we could provide value to people who aren't using a Web Monetization provider. For those already in-the-know and all set up with a Web Monetization provider, we want Akita to help keep track of their contributions in a non-bank-statement-y way. For those completely new to Web Monetization and those without a provider, the resources, tutorial and payment predictions are meant to help them learn about Web Monetization and get an idea of what their involvement could look like.

Additionally, Elliot received a Coil trial for the hackathon, which was fantastic because he was able to develop and test alongside Coil and I developed and tested without it. This allowed us to check for bugs and think about the user experience from both perspectives: with a Web Monetization provider and without.

Closing Thoughts

One of our favourite parts of this hackathon was chatting directly with the Grant for the Web team. Their comments and support have been insightful and delightful :). Their excitement has been especially encouraging and motivates us to really think about not only the tech behind our idea, but the underlying value of it.

Having submitted Akita for this hackathon, our next steps are drafting our application for Grant for the Web and getting started on our "next steps" GitHub issues.

Thanks so much for being a part of our journey! We hope you enjoy Akita and learn about your Web Monetization involvement through it. đŸ¶