Maskbook icon indicating copy to clipboard operation
Maskbook copied to clipboard

[Demand] Support Safari on macOS and iOS 15

Open Jack-Works opened this issue 4 years ago • 4 comments

MDN data: https://github.com/mdn/browser-compat-data/pull/6320 Apple document: https://developer.apple.com/documentation/safariservices/safari_web_extensions

Jack-Works avatar Jun 23 '20 03:06 Jack-Works

@Jack-Works are we still going to support safari 14? If not, I'd suggest we close this issue first.

yisiliu avatar Mar 31 '21 07:03 yisiliu

We can leave it thou no plan on supporting it currently.

Jack-Works avatar Mar 31 '21 07:03 Jack-Works

let's close it then.

yisiliu avatar Mar 31 '21 07:03 yisiliu

Re-open this since it is not resolved. We may want to revisit this in the future since iOS 15 just supported Web Extension yet.

Jack-Works avatar Jun 10 '21 15:06 Jack-Works

I'm still new to this project, I'll look into this It is true that a number of users use the Apple browser

qqqzhch avatar Mar 16 '23 09:03 qqqzhch

some info https://developer.apple.com/forums/thread/710876

Safari 15.4 introduced support for manifest version 3. Safari 16 continues to support both manifest version 2 and version 3. Manifest version 3 brings new and improved APIs for developers but if you have an existing mv2 extension, it will continue to work in Safari 16.

qqqzhch avatar Mar 16 '23 13:03 qqqzhch

Our extension has Chrome Manifest V3 support, but I didn't test for Firefox and Safari (for V3). Since I got a new mac device, I may be able to start to investigate support for Safari.

Jack-Works avatar Mar 17 '23 04:03 Jack-Works

Our extension has Chrome Manifest V3 support, but I didn't test for Firefox and Safari (for V3). Since I got a new mac device, I may be able to start to investigate support for Safari.

I will gather information about the project as I learn about it and try to see what needs to be modified to make the migration successful.

qqqzhch avatar Mar 17 '23 09:03 qqqzhch

@Jack-Works
Chrome Manifest V3 support is not yet complete, I think, I tried to build the Chrome MV3, can not open the pop page in Chrome , which has a number of errors

i use npm run build:mv3

qqqzhch avatar Mar 17 '23 12:03 qqqzhch

@qqqzhch Hi, it used to run on Chrome MV3 but we lack a test of it so it gets regression. I believe those issues are easy to fix.

Jack-Works avatar Mar 20 '23 15:03 Jack-Works

@Jack-Works Okay, I know, I'm not very familiar with the project, I'll learn something about the project in the process of finding out what went wrong.

qqqzhch avatar Mar 21 '23 01:03 qqqzhch

@Jack-Works I've got the latest code to build mv3 to work in Google Chrome

qqqzhch avatar Mar 25 '23 07:03 qqqzhch

I've been working on this for the past few days, as much of the information on the internet is rather outdated and can only be used as a reference, but in practice need to create your own projects

1 need to create the project yourself in xcode, the information on the internet is rather outdated 2 need to upgrade browser to the latest v16 because Cannot import script to service worker with self.importScripts https://developer.apple.com/forums/thread/711341 3 Debugging method The debugging method is a little different from the Google Chrome plugin https://developer.apple.com/documentation/safariservices/safari_web_extensions/troubleshooting_your_safari_web_extension 4 Add a try catch to view the backend error log, because after an error, the installation will not see the error

try {
    importScripts(
        './worker_env.js',
        './gun.js',
        './polyfill/browser-polyfill.js',
        './sandboxed-modules/mv3-preload.js',
        './js/background.js',
    )
}
catch(error){
    console.log(error)
    
}

I can already see the error message, but I can't pinpoint the exact error yet image

qqqzhch avatar Mar 26 '23 03:03 qqqzhch

about the Unexpected token '{', maybe you can try to downgrade the syntax target. Currently we're targeting ES2022 syntax and that may be unsupported by Safari.

Jack-Works avatar Mar 26 '23 06:03 Jack-Works

@Jack-Works Okay, I'll try it.

qqqzhch avatar Mar 27 '23 04:03 qqqzhch

I have tried to modify the b/packages/mask/.webpack/config.ts

target: ['web', 'es5'] Then it is packaged and put into the browser plug-in, but the error remains the same. Are there other configuration files that need to be changed as well?

qqqzhch avatar Apr 02 '23 03:04 qqqzhch

ok I'll investigate this

Jack-Works avatar Apr 03 '23 18:04 Jack-Works

play around with Xcode and Safari for a while, and I found it's actually not debuggable.

https://developer.apple.com/forums/thread/720904

I maybe not investigate this these days unless I have more input.

Jack-Works avatar Apr 10 '23 11:04 Jack-Works

play around with Xcode and Safari for a while, and I found it's actually not debuggable.

https://developer.apple.com/forums/thread/720904

I maybe not investigate this these days unless I have more input.

1 1 If the error is reported in the service worker, the debugging screen will not open in the browser. like this WX20230411-092402@2x so

try {
    importScripts(
        './worker_env.js',
        './gun.js',
        './polyfill/browser-polyfill.js',
        './sandboxed-modules/mv3-preload.js',
        './js/background.js',
    )
}
catch(error){
    console.log(error)
    
}

2 The location of the debug menu is really difficult to find the first time

WX20230411-092935@2x After adding trycatch to the service worker WX20230411-092904@2x

qqqzhch avatar Apr 11 '23 01:04 qqqzhch

Safari version v16.3

qqqzhch avatar Apr 11 '23 01:04 qqqzhch

can you share how you configure the Xcode project for the extension?

Jack-Works avatar Apr 11 '23 06:04 Jack-Works

can you share how you configure the Xcode project for the extension?

I'll organize the information I've seen and write it in the issues

qqqzhch avatar Apr 14 '23 07:04 qqqzhch

afaik a safari extension requires an Xcode project. maybe you can open a PR containing the Xcode project you created?

Jack-Works avatar Apr 16 '23 13:04 Jack-Works

afaik a safari extension requires an Xcode project. maybe you can open a PR containing the Xcode project you created?

Okay, I'll write a post documenting the creation of the project that, and then create a pr for testing

qqqzhch avatar Apr 16 '23 13:04 qqqzhch

Record the steps and things to note to create Safari browser plug-in extensions with mv3 https://docs.google.com/document/d/1SeV6-P_rXHUwvSnLHpgF8tuk9CK7-7YPnl6KrCARYC0/edit?usp=sharing

qqqzhch avatar Apr 16 '23 14:04 qqqzhch

@Jack-Works To create a project, i need to generate a folder under Maskbook/packages, the name of the folder is called MaskSafari better or MaskSafariExtension better?

qqqzhch avatar Apr 17 '23 11:04 qqqzhch

https://github.com/DimensionDev/Maskbook/pull/9436 @Jack-Works Added the xcode file for creating projects

qqqzhch avatar Apr 22 '23 12:04 qqqzhch

Before local testing is more casual, I put the whole built project in and then operate in xocde. Now I plan to 1 first create a build folder in the resource directory, copy the built mv3 files into it. 2 write a new configuration file based on the existing configuration file and put it under the resource directory. This will allow for better testing

qqqzhch avatar Apr 24 '23 03:04 qqqzhch

To record some information, the error message I encountered in my troubleshooting project was image

  • /build/js/npm-ns.masknet.compartment.js A syntax error occurs when loading, which is quite puzzling, because the build has been successful.
  • fetchBlob and localStorage need to be checked to see how browsers support them

qqqzhch avatar Jun 01 '23 12:06 qqqzhch

Hi I'm cleaning up our infrastructure to prepare for Safari!

Jack-Works avatar Jun 02 '23 07:06 Jack-Works