Webnative ++ Web Extensions

[jeffg]

Extensions! Extensions!

Notes on getting web extensions working with Webnative SDK

Getting started

• Basic Tutorial ( 2018, by @potch )
• Extension workshop ( Mozilla )
• cross browser extensions ( MDN )
• Mozilla web extensions examples

Examples:

• Zooombie killer

Webnative notes

Questions:

1. can we do webnative stuff in the background page? worried about secure contexts
2. can we “pair” the extensions with a fission app that registers a web worker, and then do message passing from the extension to the worker?
3. least elegant solution - we have to have a page open in order to talk to fission / WN from the extension.

Tools

• web extension polyfill - polyfill library that smooths out cross-browser differences
• “batteries included” extension template
• webext - cli tool for building and publishing web extensions
• Puppeteer headful testing GH Action
• production-grade extension using tests via mocha / chai

[bgins]

A few implementation notes on the less elegant solution:

Web app

• Stores and displays URLs and screenshots captured by the web extension
• Handles webnative auth and filesystem operations
• Exposes filesystem operations to the web extension’s content script

Web extension

• Ingests URL and data URI encoded screenshot of page
  • Screenshots: tabs.captureTab() - Mozilla | MDN
• Stores URL and screenshot pairs in localstorage as a JSON string
• Has an action to open the web app and store the captured data
  • The extension injects a content script into the web app
  • The content script offloads the captured data to functions exposed by the web app – essentially a handoff so the web app can store the data in WNFS