Browser PoC: Safari Extension and Reborn

[sethkfman]

What is this about?

This issue is meant to prove out the idea that safari extensions can be utilized to communicate with the reborn browser with in the MetaMask mobile app.

Scenario

No response

Design

No response

Technical Details

1. Understand if the Reborn browser can use Safari Extension

• Build a simple extension installed on Safari Mobile
• Possibility Extension Source Code MetaMask Main snow (1).zip

2. Have a Reborn browser installed and try to use the extension
3. Ideas for injecting SDK/Ethereum provider

Threat Modeling Framework

No response

Acceptance Criteria

• Video demo of safari extension communicating with dapp site (can be console.logs)
• If PoC, is not possible outline findings and any further steps or areas of investigation

Stakeholder review needed before the work gets merged

• Engineering (needed in most cases)
• Design
• Product
• QA (automation tests are required to pass before merging PRs but not all changes are covered by automation tests - please review if QA is needed beyond automation tests)
• Security
• Legal
• Marketing
• Management (please specify)
• Other (please specify)

References

• in-app reborn browser
• iOS Safari Extension
• https://docs.google.com/document/d/1HgcXo1WNbO3Cnr-1Zwu8E3hAgyA1teRzr-4lcF_QELw/edit
• Extension Source Code MetaMask Main snow (1).zip

[sethkfman]

@kylanhurt more documentation:

• https://developer.apple.com/documentation/safariservices/messaging-between-a-webpage-and-your-safari-web-extension

[kylanhurt]

We specifically used Javascript's alert function within a content.js file (within the web extension), as well as Javascript's console.log function to see whether our extensions's code was running on the webpage in each of the scenarios.

Basic repository code:
https://github.com/kylanhurt/mm-safari-ext

(Just clone and then open the folder up in XCode to run)

Findings:

1. We were able to get a Safari web extension running on Safari on MacOS (desktop). Note that you may have to manually change Safari setting for extension to allow content script (in our case) to run on a specific website. Console logs and alert functionality worked fine.

2. We were also able to get it to run in native Safari on iOS (mobile). Console logs and alert functionality worked fine.

3. We were not able to get it to run correctly within react-native-inappbrowser-reborn inside of a React Native application. In fact, neither the alert nor the console.log code was executing

Following video shows alert functionality working on native Safari on iOS but not working from within MetaMask. I changed the button to just open up inappbrowser-reborn modal to chosen website.

RPReplay_Final1725907952.1.MP4

[gauthierpetetin]

Next step: Ask on the Reborn repo if Reborn can support Safari extensions

[gauthierpetetin]

It's actually already done here: proyecto26/react-native-inappbrowser#467

[sethkfman]

@kylanhurt Do you know if the PoC was done using an extension built and bundled in the metamask app or separate from it?

cc: @Gudahtt @andrepimenta