Vue-devtools: macOS Big Sur (Version 11)

[henrikdahl]

What problem does this feature solve?

Will it be possible to port vue-devtools to Safari now with the upcoming extension API changes to macOS Big Sur?

What does the proposed API look like?

https://hacks.mozilla.org/2020/06/welcoming-safari-to-the-webextensions-community/

[jonowells]

I've contributed to Safari Web Inspector in the past. I'm not completely familiar yet with the new extension API, but I don't think there'd be a way to add DevTools extensions to Web Inspector, though maybe the WebKit team added a way to support this new API. Not sure.

[jaydrogers]

With Safari 14 being released for Catalina today, I am sure there may be a lot of people coming to this thread to check support for Vue Devtools.

Just as a heads up, this is also being discussed in #1139.

I was excited to see Apple make it easier to move Chrome/Firefox plugins to Safari, but you have to distribute the extension though the App Store 🤦‍♂️

I am sure this will be a struggle for a lot of open source browser plugins. One more hurdle and $100/year Developer Program to get through...

[RobertoGongora]

Is there any way we can help the community by providing the $100/year or something? I'd really like to see the Vue Devtools in Safari. I hate having to use Chrome just for that :(

[vegerot]

Is the only barrier the money? I can contribute the money if that's the only blocker from getting this. At least for the first year

[Yoshi2889]

The app does not need to be distributed through the App Store, few examples:

• https://support.logmeininc.com/lastpass/help/how-do-i-install-the-safari-app-extension-on-my-mac-lp010097
• https://github.com/lautis/refined-github-safari

You can install both of these outside of the App Store and Safari will happily load the extensions once the app has been launched. You'll still need to provide a (preferably signed) app, however unsigned extensions can be enabled in the Develop menu.

[Stevenje]

+1 for Safari now the extension API matches chrome / Firefox https://developer.apple.com/videos/play/wwdc2020/10665/

[jbrooksuk]

It looks like Safari doesn't yet support the requirements:

xcrun safari-web-extension-converter shell-chrome
Xcode Project Location: /Users/james/Code/vuejs/vue-devtools/packages
App Name: Vue.js devtools
App Bundle Identifier: com.yourCompany.Vue.js-devtools
Language: Swift
Is this correct? [yes]:
Warning: The following keys in your manifest.json are not supported by your current version of Safari. If these are critical to your extension, you should review your code to see if you need to make changes to support Safari:
    persistent
    devtools_page
    devtools
Do you want to overwrite /Users/james/Code/vuejs/vue-devtools/packages/Vue.js devtools? [Y/n]: y

[jbrooksuk]

However, running xcrun safari-web-extension-converter shell-chrome, building the extension in Xcode and then loading unsigned extensions renders this:

And it does work on pages that do have Vue.js:

So, unless I'm missing something, we're still waiting on Safari to support devtools extensions.

[henrikdahl]

@jbrooksuk Seems you are right: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/Browser_support_for_JavaScript_APIs#devtools

Not sure if they are planning to support it but appears to be lacking at the moment.

[jbrooksuk]

One option to work around this may be to bundle the Electron version, so clicking the toolbar icon opens the extension separately.

[jonowells]

@jbrooksuk That sounds like the best approach for now.

The WebKit team hasn't expressed an interest to add Web Inspector extensions in the past. They could be looking into that now, and looking to bridge the differences between WebKit Web Inspector and Blink DevTools so that DevTools extensions can be converted over automatically. It might be worth asking the WebKit team on IRC about this: irc://irc.freenode.net/#webkit and irc://irc.freenode.net/#webkit-inspector

[jonowells]

It looks like the WebKit team IS working on support for devtools extensions in Safari:

https://trac.webkit.org/changeset/269701/webkit

[mesqueeb]

Suggestion:
Close this issue in favour of #1139

Then: Create a link to Issue Hunt that people can add funding to #1139.

Once a link is generated for Issue Hunt and people start adding some funding, I'm sure some developer will pick it up in no time!!

[rafmjr]

I have created an issue and added some funding for this request:

https://github.com/vuejs/vue-devtools/issues/1139#issuecomment-756169724