esse-dev / akita

A browser extension that gives you insight into your engagement with Web Monetization.

Akita

A browser extension that gives you insight into your engagement with Web Monetization, part of The Akita Project.

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.

We've built this for the Grant for the Web x DEV hackathon! We're so thrilled to have received a Runner Up Award for this project 🎉 - Winners Announcement.

Our license information can be found here and our license/copyright notices can be found in LICENSE. Assets in the assets/external directory are assets from another source or repository, which may not have been created by Akita contributors. Please refer to the per-asset/per-source license information in assets/external.

	Grant for the Web x DEV Community Hackathon Runner Up (June 2020)
	Grant for the Web Mid Level Grantee (October 2020)

---

Table of Contents

• Installing
• Contributing
• Screenshots & Demos
• About Akita
  • The Problem We're Addressing
  • How Akita Helps
  • Blog Posts on Our Process
  • Why 'Akita'?
  • Akita Data
• Connect with Us

---

Installing

Check out the instructions to install from source or package here.

You can also install Akita from Browser Extension/Add-On Stores:

• Chrome Web Store
• Firefox Browser Add-ons
• Microsoft Edge Add-ons

---

Contributing

We'd love to have you be a part of Akita! Please feel free to open issues or create pull requests. Check out our Contributing Guidelines to get started!

---

Screenshots & Demos

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 this:

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

Akita Main View

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

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

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!

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

Akita Demo Video

Click to check out a video walkthrough of Akita:

---

About Akita

The Problem We're Addressing

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.

How Akita Helps

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.

Blog posts on our process

1. Kickstarting a project idea: going from 0 to...0 - Part 1
2. Kickstarting a project idea: going from 0 to...0 - Part 2
3. How can you support websites without having to deal with annoying ads?
4. Hackathon Update: Breaking Our Idea Down Into Dog-Treat-Sized Tasks
5. Akita: Get Involved in Web Monetization With or Without the Price Tag (Hackathon Submission Post
6. Akita — Grant Report #1
7. Support us by taking the Akita Beta Release Survey

Why 'Akita'?

Naming projects can be pretty challenging. We spent a good chunk of time coming up with various names before deciding to stay true to our "brand" at the time of the hackathon, which was dog-s, and selecting "Akita" as our project name.

The Akita is a Japanese dog breed known for its loyalty and dedication. It's also quite fluffy. We were drawn to "Akita" because of the values the breed represents (i.e. loyalty, dedication), as those characteristics are what we want to embrace with our project. Through Akita and Web Monetization, we want to enable mutual loyalty and dedication between content creators/websites and their users.

We were also very inspired by the story of Hachikō - a dog of immense loyalty. Hachikō was an Akita who would meet with his owner every day at the train station. Even after his owner passed away, Hachikō continued to wait for his owner at the train station for more than 9 years. Hachikō continues to have a legacy in Japanese culture, with various statues created in his memory - there was even an American film based on him.

Akita Data

Akita collects data on

• your time spent and number of visits on all websites,
• the Payment Pointers present on the websites you visit,
• and the currency and amount of payments streamed to Payment Pointers via Web Monetization.

You can view an example of the data collected by Akita in examples/example_data.json. The data collected by Akita is stored on your machine, in your browser's local storage. Your data stays in your hands: it is not backed up, shared, or uploaded anywhere. Therefore, if you uninstall the Akita browser extension, your data will be permanently deleted and will not be recoverable.

For more info, check out Akita's Privacy Policy.

---

Connect with Us

• Email
  • [email protected]
• Interledger Community Forem (formerly Web Monetization Community Forem)
  • Akita
  • Elliot
  • Sharon
• DEV
  • esse-dev
  • Elliot
  • Sharon
• Discord
  • Akita Discord Server
• Twitter
  • esse_dev
  • Elliot
  • Sharon
• LinkedIn
  • esse dev

akita's Issues

Make http request asynchronous

The HTTP request in #9 is synchronous, but:

Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help, check https://xhr.spec.whatwg.org/.

We can fix this using callbacks.

Review Akita design and accessibility standards

• look at how Akita can be improved to meet accessibility standards
• look into accessibility standards for browser extensions
• conduct user testing to get feedback on UX

Add tests

• test data classes
• test storage

Akita does not pass Firefox extension store JavaScript tests

Firefox has tests and warnings on upload of an extension to the extension. Akita fails some of these tests and warnings because of

• Errors: use of the ?. operator.
• Errors: use of the ?? operator.
• Errors: Declaring class properties outside of the constructor.
• Warnings: Use of .innerHTML with dynamic content.

To Reproduce
Steps to reproduce the behavior:

1. Package Akita into a .zip
2. Go to https://addons.mozilla.org/en-US/developers/addon/submit/upload-listed
3. Upload akita.zip
4. View errors and warnings

Expected behavior
Firefox extension store should not give any warnings or errors so we can be confident that the extension will be accepted to the extension store.

Extension does not identify that Twitch.tv is monetized

Reproducing:

1. Use chrome with Akita and Coil installed and activated.
2. Go to https://www.twitch.tv/boxbox or another active streamer's page on Twitch.tv
3. Open developer console and observe that Akita outputs: siteIsMonetized: false
4. Elements view of the developer console shows:

5. The Coil extension is streaming money.

Comments:
The monetization meta tag is added dynamically after the page loads. Additionally, if Coil is not installed the meta tag is not added.

Create initial "slideshow" tutorial

The first time a user opens up the Akita popup, they should see a "slideshow" tutorial that introduces them to Web Monetization concepts and Akita.

• link resources (websites, videos, etc.)

Slides

1. Tired of ads? (WHY)
2. What is Web Monetization?
3. What is a Payment Provider?
4. Resources
5. Why Akita?

Differentiate payment pointers from same origin

If a site has multiple payment pointers, e.g. Twitch, the user might want to know which creators' payment pointers they're actually contributing to.

Example data:

	{
		"origin":"https://www.twitch.tv",
		"isMonetized":true,
		"originVisitData":{
			"timeSpentAtOrigin": 4723893,
			"numberOfVisits": 2,
			"dateOfFirstVisit": "2020-05-15",
			"dateOfMostRecentVisit": "2020-05-27"
		},
		"paymentPointerMap":{
			"https://www.twitch.tv/nasa":{
				"paymentPointer":"$spsp.coil.com/twitch/nasa",
				"sentAssetsMap":{
					"XRP":{
						"amount":5351,
						"assetScale":9,
						"assetCode":"XRP"
					}
				}
			},
			"https://www.twitch.tv/xqcow":{
				"paymentPointer":"$spsp.coil.com/twitch/xqcow",
				"sentAssetsMap":{
					"XRP":{
						"amount":11442,
						"assetScale":9,
						"assetCode":"XRP"
					}
				}
			}
		}
	}

Improve Akita's community profile

Complete our community profile. Info here: https://github.com/dog-s/akita/community

• Code of Conduct
• Contributing Guidelines - e6c660a
• Issue Templates - 48661a1, 209b891
• PR Template

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

We don't want the user to lose their data when they clear their browser history. Is there a way to store data for a browser extension that is independent of regular browser history?

Can information be stored in a permanent file which is not affected by clearing browser data? Do we want to do something like that?

How can we delete the data we store?

https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage

Develop Akita as a cross-browser extension

We have intentions to release Akita on Chrome, Firefox, Edge and possibly other browsers (eg. Opera). Due to browser extension API compatibility differences, we may need to implement slightly different code for different platforms.

For example, we may want to consider a preprocessor solution to include code by platform.

Alternatively, we can opt to target Firefox as our dominant browser and use a polyfill API to provide coverage to other browsers. The webextension-polyfill is Mozilla's suggested API to use: https://github.com/mozilla/webextension-polyfill/.

More info here: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Build_a_cross_browser_extension

Browser Availability:

• Chrome Web Store
  • https://chrome.google.com/webstore/detail/akita/phcipgphomfgkenfmjnbmajdiejnlmgg
• Firefox Add-ons:
  • https://addons.mozilla.org/en-CA/firefox/addon/akita/
• Microsoft Edge Add-ons
  • https://microsoftedge.microsoft.com/addons/detail/akita/halamaefcdjalhjgkbefalmhpnboncoc

Keep track of all PRs merged in sketchy hackathon rush

We came to an agreement that we will bypass code review for the last week of the hackathon so that we can more quickly get our changes in.

PRs will be created for any changes we make, but approvals are not required and can changes can be merged right away. PR descriptions will need to include a synopsis of changes made as well as a list of any corners cut in implementation.

The PR name and url needs to be commented in this issue thread, so that we can keep track of all the PRs made in haste. The PR also needs to be assigned the label "sketchy" https://github.com/dog-s/akita/labels/sketchy.

Make tutorial demo image match the extension badge based on user's browser

icon pic in tutorial doesn't match the icon badge in firefox

Discovered in #48 .

Favicon loading is delaying extension UI

We load the favicon image into the top site circle when the extension is opened. This can result in the image being deformed or not loaded at all. On top of that, the loading of the image can delay the loading of the extension UI itself, which is bad UX. We should cache the image or otherwise may the favicon loading more efficient.

The below problems were discovered in #48.

• Circle shouldn't be empty

• Favicon loading issue? Image stretched
  

Document how to install Akita on chrome and firefox

Since we likely won't have time to deploy to the extension/add-on stores, we should give clear instructions on how to manually install Akita.

Create new labels to better tag issues/PRs

To better sort and more easily prioritize issues and PRs, we should curate more labels to tag them with.

Some labels we may want:

• payment pointer
• browser:chrome
• browser:firefox
• accessibility

Let user know that deleting Akita will delete their Akita data permanently

Until #20 is resolved, we should let the user know that their data is not recoverable once they uninstall the Akita browser extension, since all data is stored locally in the browser and associated with the browser extension.

We should let them know in some or all of these places:

• in the extension tutorial
• in the app store listing description
• in the Akita README

Give user option to delete their Akita data

Users should be able to delete the browsing/monetization data stored by Akita.

We should include a button/interface for the user to do so in the browser extension popup. We will link the UI element to a call to https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/storage/StorageArea/clear.

Repeatedly check if payment pointer in monetization tag has changed

1. Repeatedly check if monetization tag payment pointer has changed. setinterval can be used. Could be checked every ~second.
2. Save whether payment pointer has been validated recently. i.e. within the past hour.
3. Validate payment pointers which have never been validated, or which have not been validated recently.

This data (and potentially also the logic) would fit well in the AkitaPaymentPointerData class.

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

Our extension will passively collect data as the user browses the web. The data can be viewed in the extension icon pop-up.

The data we display:

• time on web monetized sites.

• time on non-web monetized sites.

• number of visits to web monetized sites.

• number of visits to non-web monetized sites.

• ratio between these two times ^

• amount streamed to websites.

• top 5 sites based on: amount $$ streamed, # of visits, amount of time spent

  • top 5 in general
  • top 5 mon
  • top 5 non-mon

• FUTURE: search for amount and time spent on websites (search by website name/url)

For this task, we just want to show the data and are not concerned with aesthetics or presentation.

Set up Discussions forum for this repo

Currently, we have a Discord server in case anyone wants to get a hold of us. However, having a discussion board right in our repo might be a better place for conversation and sits right next to our code, issues and pull requests.

Let's draft a "welcome" post (General category) to introduce visitors to our discussion board and point them to useful links/resources for the Akita project, such as:

• how to open an issue
• contributing guidelines
• https://dev.to/esse-dev
• https://github.com/esse-dev/a-web-monetization-story

This is the provided template:

<!--
    ✏️ Optional: Customize the content below to let your community know what you intend to use Discussions for.
-->
## 👋 Welcome!
  We’re using Discussions as a place to connect with other members of our community. We hope that you:
  * Ask questions you’re wondering about.
  * Share ideas.
  * Engage with other community members.
  * Welcome others and are open-minded. Remember that this is a community we
  build together 💪.

  To get started, comment below with an introduction of yourself and tell us about what you do with this community.

<!--
  For the maintainers, here are some tips 💡 for getting started with Discussions. We'll leave these in Markdown comments for now, but feel free to take out the comments for all maintainers to see.

  📢 **Announce to your community** that Discussions is available! Go ahead and send that tweet, post, or link it from the website to drive traffic here.

  🔗 If you use issue templates, **link any relevant issue templates** such as questions and community conversations to Discussions. Declutter your issues by driving community content to where they belong in Discussions. If you need help, here's a [link to the documentation](https://docs.github.com/en/github/building-a-strong-community/configuring-issue-templates-for-your-repository#configuring-the-template-chooser).

  ➡️ You can **convert issues to discussions** either individually or bulk by labels. Looking at you, issues labeled “question” or “discussion”.
-->

Remaining changes for hackathon prototype

Circle Changes

• change circle::after to html element - @vezwork
• change circle hover background to same colour as circle - @sharon-wang
• get rid of XRP text from circle - @vezwork
• add % of time spent on site to circle detail - @sharon-wang
• add % of visits on site to circle detail - @sharon-wang
  - [ ] live update circle data - @vezwork
• put website favicon in circles - @sharon-wang
• remove click to go to site from circles - @vezwork
• open site when you click on the circle - @sharon-wang
• add payment stream estimate in circle detail - @sharon-wang

Tutorial Changes

• tutorial slide 2 (tired of ads?) make image more legible/toaster ad popup animation - @vezwork
• add link to coil on how to monetize your own site "Learn more and get involved" tutorial slide - @sharon-wang
• add perspective on how web monetization benefits creators in tutorial slides - @sharon-wang
• look into custom bullet points - @sharon-wang
• higher res images for the Akita Icon tutorial slide - @vezwork
• mention that it's the browser extension icon in Akita Icon tutorial slide - @vezwork

General Changes

• change colour of links in akita, maybe match akita branding colours - @sharon-wang
• add tooltip to "These monetized sites could use <3" to explain what that means - @vezwork
• remove "https://" from sites that could use love and add favicon - @sharon-wang
• replace needs love list with resources if user not using WM provider - @sharon-wang

Other

• Update README with demo, screenshots, tutorial explanation: #39
• test browser extension on windows (firefox, chrome) - @vezwork
• test browser extension on mac (firefox, chrome) - @sharon-wang

Web Monetization Icon shows incorrect state

Happens especially when switching between tabs.

May also be able to be solved alongside #17 . But that is a larger issue.

[BUG] On sites with monetized AND non-monetized pages, non-monetized pages count for monetized time

Describe the bug
Once Akita sees that a site (domain) has a monetized page, it marks the entire domain as monetized. This is not accurate to how Web Monetization actually works. For example, Coil provides a mechanism for web monetizing youtube videos, once you visit a web monetized youtube video, Akita incorrectly counts ALL time on youtube as monetized time.
To Reproduce
Steps to reproduce the behavior:

1. Clear Akita data
2. Visit this web-monetized youtube video https://www.youtube.com/watch?v=sApKXmwhg4g&ab_channel=Simmer.io with an active Coil subscription and extension, and the Akita extension.
3. Spend 1 minute on the above youtube video.
4. Spend some extra time (let's say 5 mins) on other youtube videos which are not monetized. e.g. https://www.youtube.com/watch?v=F4we73GHH9k
5. Click on Akita extension icon and look at "Top monetized sites" section. Observe that youtube has 6 mins spent on it rather than 1.

Expected behavior
In the above reproduction Akita should only say that youtube has 1 minute spent on it, because while 6 mins were spent in total on the site, only 1 of those minutes was on a monetized page.

Akita should track both monetized and non-monetized time on a site seperately. For the purpose of the "Top monetized sites" section, only monetized time should be considered.

Screenshots
Unfortunately I do not have a screenshot.

Desktop (please complete the following information):

• OS and Version: unknown
• Browser and Version Chrome - version unknown

Check for monetization meta tag on a webpage

We need to check for the monetization meta tag to figure out if a site is monetized or not.

Is there a way to confirm that their monetization endpoint is valid?

Docs:
https://webmonetization.org/docs/getting-started

Cache top site favicons

In #54, we decided to lazy load favicons to avoid bad image loading UX. However, an additional enhancement would be to cache the favicon images so that we don't need to load them every time we visit a site.

---

Suggested by @vezwork in #54 (comment):

We can do image serialization (for caching) using FileReader.readAsDataURL() along with the fetch API:

async function loadImageToDataURL(url) 
  const response = await fetch(url);
  const blob = await response.blob();
  return new Promise((resolve, reject) => {
    const reader = new FileReader()
    reader.onloadend = () => resolve(reader.result);
    reader.onerror = () => reject();
    reader.readAsDataURL(blob);
  });
}

reference: https://stackoverflow.com/a/20285053/5425899 "How can I convert an image into Base64 string using JavaScript?"

[BUG] iframe allow="monetization"

Describe the bug
When visiting sites that have content in an iframe with allow="monetization" set Akita does not track the payments being streamed, or that the page supports monitization.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'https://gunnywatcher.itch.io/firsttest' or 'https://defold.itch.io/climberz'
2. Click on 'Run Game'
3. See absence of tracking

Expected behavior
Tracking of web monetization in iframes per:
https://webmonetization.org/docs/api/#iframes

Desktop (please complete the following information):

• Windows 10
• Brave Version 1.16.72 Chromium: 86.0.4240.183 (Official Build) (64-bit)

Change extension icon dynamically from js

Change extension icon to indicate whether a site is web monetized or not based off of the data the extension collects passively.

• Create logo
• Create version of logo to indicate monetization

Confirm if Akita payment pointer resolution is spec compliant

As per the payment pointer spec https://paymentpointers.org/syntax-resolution/#requirements:

Clients MUST support HTTP redirects as a result of 3XX responses per RFC 7231.

If a website is using a vanity payment pointer (payment pointer redirects to another payment pointer), then a request to the payment pointer will respond with a redirect, i.e. 3XX response. Right now, we only check that a 200 OK is returned to validate that the payment pointer is working. We need to add handling to accept the 3XX response, send a new request with the redirect endpoint, and confirm that a 200 OK is returned.

Relevant links

• Use your domain name as a payment pointer: https://dev.to/dtinth/comment/107da
• How to make a vanity Payment Pointer for Web Monetization: https://www.ctrl.blog/entry/ilp-payment-pointer-redirects.html

Visualize historical Akita site visit data

Builds on #26.

• Design a way to visualize historical akita data
• Implement visualization(s)

Validate the payment pointer resolution response body for expected fields

Discussed in #60.

• destination_account (ILP Address)
• shared_secret (32 bytes, base64 (base64url) encoded (including padding))
• receipts_enabled (Boolean, optional)

Spec: https://interledger.org/rfcs/0009-simple-payment-setup-protocol/#response-body

Akita doesn't handle resolved payment pointer format in meta tag

Akita expects payment pointers in meta tags to be properly formed (i.e. start with '$'), but we should allow 'https://' pointers as well.

Establish code design/format guidelines

We should decide on how we'd like to format our code and configure an auto-formatter/linter to enforce the guidelines we set out.

We may want to create a markdown document with these guidelines.

Akita does not pass Chrome Web Store Review

Our initial submission to the Chrome Web Store was rejected. We think that it was rejected due to the browser permissions we've requested - likely the tabs or <all_urls> permissions. (permissions are specified in the manifest)

1. Research

   • Look for guidelines on how to prepare Chrome Web Store submissions/how to properly justify browser permissions, etc.

2. Refactor

   • Check to see if we can remove the tab permission or any other permissions
   • Test on Chrome, Firefox after refactoring

3. Resubmit

   • Modify existing submission based on new changes and guidelines from research, and submit

Extension doesn't run in Firefox due to empty "background" in manifest

Firefox appears to have more strict checks for browser extensions than Chrome. Akita can't be loaded into Firefox as a temporary extension due to these lines:
https://github.com/dog-s/akita/blob/ac6af61dfc7684e3d8ab2ea1a5633c64c18c3c28/manifest.json#L11-L12

Error reported:

Error processing background: Value must either: contain the required "page" property, or contain the required "scripts" property

Solution: ensure that background contains "page" or "scripts" in our next PR, or remove background until we actually use it

Removing background allows Akita to be installed, and I've verified that Akita can check for monetization successfully in Firefox, other than the known issue described in #12.

Track time spent on a webpage

How much time is being spent on each webpage?

Use cases for tracking time:

• ratio of time spent on web monetized vs non-web monetized sites
• how much time spent on web monetized sites (estimate how much money the user would stream to the site if they are not yet streaming payment)

Commit basic project structure

Add the basic project structure we need to create a browser extension.

Remove console logs from final demo

Get rid of console log messages for the hackathon submission

Update README with demo, screenshots, tutorial explanation

Add more info and detail to our README so that users understand how to interact with Akita.

[BUG] Clicking on slide dot in tutorial does not make dot darker

The slide dots in the Akita tutorial do not darken when the slide dot is used to change the slide.

To Reproduce
Steps to reproduce the behavior:

1. Go to 'Akita Tutorial'
2. Click on a dot that is not the current tutorial slide
3. The dot does not darken to indicate that the slide has changed

Expected behavior
The slide dot should be darkened when it is clicked.

Web Monetized Site Discoverability

Provide functionality in the Akita extension to recommend new web monetized sites based on the sites you have visited.

Handle raw endpoint URLs in monetization meta tag

Discussed in #9, it seems like the raw endpoint URLs (e.g. https://host.com/path) might be used in the monetization meta tag instead of a payment pointer (e.g. $host.com/path), as per the SPSP Spec:

Raw endpoint URL (Not recommended) https://example.com/spsp/alice. This SHOULD NOT be exposed to users, but SHOULD be supported by SPSP Clients.

We should investigate is this is an accurate understanding of the spec, and add handling for raw endpoint URLs provided in the monetization meta tag.

Track # of visits to websites

• collect individual data for web-monetization sites
• collect a single total for all non-web-monetized sites

Akita icon shows monetization badge on FB messenger

Describe the bug
When a monetized site is opened in one Chrome window and you navigate back to a Messenger call in another Chrome window, the Akita extension image remains on the non-monetized (no tongue) image, but the monetization badge shows up. This is bizarre behaviour...

To Reproduce
Steps to reproduce the behavior:

1. Open a full-screen Chrome browser window and call someone on Facebook Messenger (make sure they pick up :P)
2. Open another full-screen Chrome browser window (not another tab, make sure it's another window) and go to a monetized site
3. Note that Akita displays the following icon on the monetized page
   
4. Go back to the Messenger call window
5. See the Akita icon bug
   

Expected behavior
The regular non-monetized icon with no dollar sign badge should show up on the messenger window because messenger is not Web Monetized...

Desktop (please complete the following information):

• OS and Version: macOS 10.15.5
• Browser and Version: Chrome Version 84.0.4147.135 (Official Build) (64-bit)

Add various calculations to use in UI display

• calculate top 5 monetized sites - top 5 is determined by total amount spent at that origin
• percentage of monetized time out of total time
  • calculate total time spent across all sites
  • calculate total monetized time spent across all sites
• percentage of monetized visits out of total visits
  • calculate total visits across all sites
  • calculate total monetized visits across all sites
• calculate total payment streamed (per currency)
• figure out sites that could "use a little more love"
  • monetized sites that a user visits a lot, but doesn't spend very much time at

[BUG] Websites without favicons display incorrectly

Describe the bug
Websites without favicons have less indentation than sites with favicons in the "sites that need <3" section .

To Reproduce
Steps to reproduce the behavior:

1. Clear Akita data
2. Visit a website without a favicon with Akita installed in your browser e.g. sharonwang.netlify.app
3. Visit a website with a favicon e.g. dev.to
4. Click on Akita extension icon and see the "sites that need <3" section. One website url will be indented less than the other.

Expected behavior
The website url text should be indented the same amount as website url text with a favicon.

Screenshots

Desktop (please complete the following information):

• OS and Version: unknown - N/A
• Browser and Version Chrome - unknown version - N/A

Provide a payment stream prediction based on time spent on websites

For users of Akita who are not using a provider, include a calculation (based on Coil's payment stream rate for now) of how much money they would be streaming to give them an idea of the low cost of streaming payment to web monetized sites. Calculate using timeSpentOnSite*paymentStreamRate. Maybe a per-month total is sufficient?

It's likely that many/most of the sites people visit may not be web monetized - maybe we'd want to include two sums: (1) if all websites were web monetized and (2) only sites that are currently web monetized.

Store daily visit data that identifies monetized/non-monetized time spent

• store visit data (time spent, date of visit, etc.) per day
• whether the visit time involved streaming payment or not

Track amount streamed to websites

Use the web monetization js API through the extension to listen to monetization events and collect data.

#5 may be technically related

UI/UX issues Mac (Firefox and Chrome/Brave)

Related: #41

The following issues were found during testing in Firefox and Chrome/Brave on Mac.

• Empty circle space should be filled with something

• Should never display 'NaN'

Moved to #54
- [ ] Circle shouldn't be empty
- [ ] Favicon loading issue? Image stretched

• Text in circle too small, not easily legible
  

• Mismatched favicon & Empty circle due to no favicon and circle too small for text display
  

Moved to #55.
- [ ] icon pic in tutorial doesn't match the icon badge in firefox

• handle single visit/minute/etc, i.e. "1 visits" --> "1 visit"; "1 minutes" --> "1 minute", etc.

Allow users to store their Akita data to their browser account

Users may want to see their congregated Akita data across browser instances, i.e. on different devices. We should give users the option to store their data to their browser account so they can access it on various devices, instead of seeing different totals on different devices. We can also allow users to see how their payments different across browser instances.

However, we've made a conscious choice to avoid sending any user data anywhere (everything stored locally only), so this change would contradict that choice.