Add support for monetization in iframes

[vezwork]

Closes #82

Design Notes

The design for iframe web monetization tracking was outlined in #82, as discussed with @sharon-wang (and ❤️'d by @thejustinwalsh). Iframe web monetization tracking in Akita works as follow:

• Following the spec, only iframes with the allow="monetization" attribute will count as monetized. If the iframe does not have this attribute, or the attribute is programmatically removed, the iframe will not be counted as being monetized.
  • NOTE: It is technically possible for a provider to send payments to an iframe without the allow="monetization" attribute. In this case, this PR tracks web monetization events even if the iframe does not have allow="monetization" because users will probably want to know if they are streaming payment even if it is not spec compliant, but I wouldn't expect that to happen
• iframe monetization and time spent are tracked as part of the top-level page's AkitaOriginData.
  • A page is considered monetized by akita (and therefore the user's visit and time spent on the page is considered monetized) if it contains a valid payment pointer in a monetization meta tag, OR if any of the iframes on the page contain a valid payment pointer in a monetization meta tag.
  • Visits to, and time spent on, iframes are NOT tracked separately from the top level page.
  • iframe web monetization events are stored under the top level page's origin, NOT under the iframe's origin.
  • This avoids the problem of worrying about how payment is split between iframes on the page.
• Nested monetized iframes are not supported by this PR (nested iframes are iframes in iframes).
  • The spec does not specifically address nested iframes.
  • Coil does not support nested monetized iframes.
• A new field called iframeSrcOrigin will be added to AkitaPaymentPointerData to keep track of the origin of payment pointers inside of iframes. (actually not necessary right now, I will discuss with @sharon-wang if this should be added)

For example, https://defold.itch.io/climberz only contains monetization within an iframe (the iframe contains a web game). This is how it appears in Akita:

Note that the iframe's origin is https://v6p9d9t4.ssl.hwcdn.net/html/2866116/Climberz/index.html, but that origin is not tracked nor is it shown in the UI.

Implementation Notes

src/content_main.js has been split into three content scripts and moved to a new folder src/content_scripts/

• content_origin.js handles time and visit tracking for the top level page. content_origin.js decides if the page is monetized based on the payment pointers on the page and in iframes on the page.
• content_general.js runs both at the top level page (alongside content_origin.js), and in iframes (alongside content_iframe.js); it handles forwarding web monetization events into akita events.
• content_iframe.js runs inside of each iframe and tracks and notifies content_origin.js of payment pointer changes in the iframe via the webBrowser.runtime message channel. Each content_iframe.js in each iframe is assigned a uuid from content_origin.js via postMessage so that content_origin.js can know which iframe the script is associated with when the script sends messages.

manifest.json includes these content scripts in a specific order: content_shared.js must be included before both content_main.js and content_iframe.js because it initializes constants and starts tracking monetization events, and content_main.js must be included before content_iframe.js because it sets a flag window.isTopLevel which lets content_iframe.js not run the code it contains if it is in the top level page.

Note that webBrowser.runtime.sendMessage is used by content_iframe.js to send payment pointers when they change to the top level page instead of postMessage because the messages it sends cannot be accessed by the page, so it should be a little safer. postMessage must be used for sending uuids to iframes because the uuids must be sent directly to the iframe element so content_main.js knows which iframe it assigned the uuid.

Testing Notes

• Tested on https://defold.itch.io/climberz
• Tested on https://www.youtube.com/watch?v=sApKXmwhg4g&amp%3Bab_channel=Simmer.io&ab_channel=Simmer.io
• Tested on https://esse-dev.github.io/a-web-monetization-story/
• Tested on https://dev.to/esse-dev/akita-get-involved-in-web-monetization-with-or-without-the-price-tag-cd8

[vezwork]

TODO: rename content_main.js to content_origin.js. rename content_shared.js to content_general.js

[sharon-wang]

Looks good! Just some nits and wording/doc suggestions

[vezwork]

@sharon-wang addressed your comments and tested. Let me know if you have any other comments, otherwise the PR is in good shape.

[sharon-wang]

Tested these changes with https://defold.itch.io/climberz and it's working for me on Brave.

just noticed this one thing, probably leftover typo from before. But lgtm and ready to merge!

[vezwork]

💯