Support for Safari Browser

[rafmjr]

What problem does this feature solve?

When developing vue applications on remote servers is not always possible to connect with the ngrok tunnel as proposed on the README for the standalone electron app. It is also very inconvenient having to install ngrok and the electron shell just to be able to debug the application.

I believe extensions provide a better user experience as they are directly integrated in the web browser and do not require configuration on the projects or developers machines.

What does the proposed API look like?

Unfortunately I don't have experience developing safari extensions but I'm willing to spend time helping on the development of this feature and learning how to do it if the idea is supported.

[zoltan-magyar]

Safari 14 supports a new range of JavaScript APIs, along with a new Web Extension app extension type for Safari. This is supposed to make porting existing Chrome and Firefox extensions much easier. It also offers some conversion tools.

The biggest drawback that as they remained App Extensions, they are distributed through the AppStore in the same way previous ones, but with support for JS APIs that are used by Firefox and Chrome extensions.

[mesqueeb]

Suggestion: Create a link to easily add funding to this issue on Issue Hunt.

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]

@mesqueeb I forked this repo, created an issue and added some funding.

https://issuehunt.io/r/rafmjr/vue-devtools/issues/1

[tjkohli]

Just doubled the existing fund. Let's make this happen— it would be instrumental to my development workflow!

[mesqueeb]

I'm not sure any one can claim the funds if it's funded on a fork.
Technically I think the PR closing the issue should then be a PR towards that fork?

There's already over 100 USD on that forked git issue, so would be sad to see it go to vain.

I hope someone of the official Dev team can look into this git issue situation.

[rafmjr]

@mesqueeb I was planning of doing just that. If somebody submits a PR to close the issue, I would then submit a PR to this repository and close the one on the fork once it has been merged here.

However, I do admit it is a little bit awkward and if a maintainer of this repository would create an issue in Issue Hunt, I would close it in favor of that one. I'm open to suggestions for a better solution.

[ygj6]

@rafmjr I noticed that v4.1.4 and earlier versions support safari browser, but End safari support from #644.

Maybe we should figure out whether the vue team has plans to support the safari browser again.

@Akryum Could you please help answer this question?

[varna]

Did anyone try the CLI converter?

Convert your existing extension to a Safari web extension using Xcode’s command-line tool.
https://developer.apple.com/documentation/safariservices/safari_web_extensions/converting_a_web_extension_for_safari

[reisnobre]

Any updates?

[Akryum]

I'm considering adding the devtools to more browsers after 6.0 is released.

[raffeyang]

Safari 15 add support to Web Inspector Extention ,Please support Safari

[theartkod]

Hi there! Any updates?

[reisnobre]

Sadly nope, they claim that the stand alone app should be enough, but for my use case it doesn't work at all... I really would like to have the option to use safari.

Atm I'm just using chrome for running the project and safari for everything else.

[nezaboravi]

I'm considering adding the devtools to more browsers after 6.0 is released.

Have you finish consideration? :) Its almost a year :)

[trubelik]

I'm considering adding the devtools to more browsers after 6.0 is released.

Have you finish consideration? :) Its almost a year :)

It seems that version 6.0 is still in beta.

[iBobik]

New API: https://developer.apple.com/videos/play/wwdc2022/10100/

[vad1ym]

While PR on review you can try my fork.
Here is already builded extension app and short guide for manual building.
https://github.com/kidaww/devtools/releases/tag/v6.2.0-safari

Works with Safari Technology Preview (Safari 16.0).
Manual build possible with Xcode 14 beta 3

[reisnobre]

Testing right now. I'll keep using it. I was using chrome just for development because of the lack of support.
Thanks @kidaww

[nezaboravi]

Testing right now. I'll keep using it. I was using chrome just for development because of the lack of support.

same here

[iBobik]

Few days using it seems, working well. Just first start was unsure - after enabling I had to close devtools and reload page in correct order.

[nezaboravi]

@kidaww Here, i need to reenable Allow Unsigned Extensions everytime i turn off safari

[vad1ym]

@kidaww Here, i need to reenable Allow Unsigned Extensions everytime i turn off safari

Hi, you can build the extension with self-signing (personal team).
Look the instruction by the link above, bottom section, I've updated it recently.

[iBobik]

After page reload Vue devtools usually end in disconnected state. Close and open devtools works. Safari Technology Preview Release 150.

[do4Mother]

Just copy vue dev tools from chrome extension and convert it to mac.

Works fine in safari 16.0

https://developer.apple.com/documentation/safariservices/safari_web_extensions/converting_a_web_extension_for_safari

[nezaboravi]

Just copy vue dev tools from chrome extension and convert it to mac.

Works fine in safari 16.0

https://developer.apple.com/documentation/safariservices/safari_web_extensions/converting_a_web_extension_for_safari

Would be great if you tell us where to find vue dev tools from chrome extension

[vad1ym]

I will try to describe in more detail method provided by do4Mother

1. Download .zip Chrome extension in any way (e.x. with the extension https://chrome.google.com/webstore/detail/crx-extractordownloader/ajkhmmldknmfjnmeedkbkkojgobmljda)

2. Unarchive a zip and run command xcrun safari-web-extension-converter ~/Downloads/Vue-js-devtools --macos-only --project-location ~/Documents/VueSafari

Where ~/Downloads/Vue-js-devtools is path to the unarchived FOLDER (not zip file)
Where ~/Documents/VueSafari is path to store generated xcode project
And --macos-only flag creates project without iOS target, that will be a bit easier to config

3. After running the command you get new xcode project. It will be opened after creating.

4. Setup your personal team for both targets. You can skip it, but then you have to click 'Allow unsigned extension' each time you run Safari.
   

5. Click Run button or click Product>Run. After build and app start - click 'Quit and open Safari setting' and you see activated Vue Devtools Extension. If you don't - maybe you didn't setup personal team for build from step 4. Try to click Develop>Allow unsigned extensions in the Safari and extension must appear.

[nickkadutskyi]

@kidaww that worked like a charm! Signed it so that I don't need to always "Allow unsigned extensions"

[nezaboravi]

Thank you for step by step guide and explaining how to download extension

However, i am getting this:
xcrun safari-web-extension-converter ~/Downloads/Vue-js-devtools.crx --macos-only --project-location ~/Documents/VueSafari
Unable to parse manifest.json at file:///Users/codingwisely/Downloads/Vue-js-devtools.crx

same happens with Vue-js-devtools.zip file

Any suggestions?

[nickkadutskyi]

@nezaboravi I think you downloaded the wrong format of extension. In my cases I downloaded zip archive, then unarchived it and then ran xcrun on that folder.
My command was:

xcrun safari-web-extension-converter ~/Downloads/Vue-js-devtools --macos-only --project-location ~/Documents/VueSafari

[nezaboravi]

@nezaboravi I think you downloaded the wrong format of extension. In my cases I downloaded zip archive, then unarchived it and then ran xcrun on that folder. My command was:

xcrun safari-web-extension-converter ~/Downloads/Vue-js-devtools --macos-only --project-location ~/Documents/VueSafari

i actyually tried both of them

[nickkadutskyi]

@nezaboravi you need to unzip the zip archive and run that command on a folder. See @kidaww 's instructions here #1139 (comment)

[Abhishek0116]

@kidaww I followed all steps successfully but at the last step when I click 'Quit and open Safari setting' the 'Vue.js devtools' app which was built by Xcode quitted and nothing happened.

I also open Safari Extension Preference manually but this extension was not there. I quit safari and tried again but no luck.

Am I doing anything wrong?

[Abhishek0116]

@kidaww I followed all steps successfully but at the last step when I click 'Quit and open Safari setting' the 'Vue.js devtools' app which was built by Xcode quitted and nothing happened.

I also open Safari Extension Preference manually but this extension was not there. I quit safari and tried again but no luck.

Am I doing anything wrong?

Okay, I got it. I enabled Allow Unsigned Extension from Develop menu of Safari.

Now it's working fine.

Thanks.

[trubelik]

I will try to describe in more detail method provided by do4Mother

1. Download .zip Chrome extension in any way (e.x. with the extension https://chrome.google.com/webstore/detail/crx-extractordownloader/ajkhmmldknmfjnmeedkbkkojgobmljda)
2. Unarchive a zip and run command xcrun safari-web-extension-converter ~/Downloads/Vue-js-devtools --macos-only --project-location ~/Documents/VueSafari

Where ~/Downloads/Vue-js-devtools is path to the unarchived FOLDER (not zip file) Where ~/Documents/VueSafari is path to store generated xcode project And --macos-only flag creates project without iOS target, that will be a bit easier to config

3. After running the command you get new xcode project. It will be opened after creating.
4. Setup your personal team for both targets. You can skip it, but then you have to click 'Allow unsigned extension' each time you run Safari.
   
5. Click Run button or click Product>Run. After build and app start - click 'Quit and open Safari setting' and you see activated Vue Devtools Extension. If you don't - maybe you didn't setup personal team for build from step 4. Try to click Develop>Allow unsigned extensions in the Safari and extension must appear.

Works just fine, but is there any solution without using the CRX downloader extension for Chrome?
After this I'm going to stop using other browsers for good 😁

[euaaaio]

Works just fine, but is there any solution without using the CRX downloader extension for Chrome?

Just clone and build this repo with npm install and npm run build

[sean7512]

What's holding back an official release of this? It clearly works just fine on Safari....

After all, Safari is now the 2nd most used desktop browser: https://gs.statcounter.com/browser-market-share/desktop/worldwide/#monthly-202201-202303

[jamesandersonwalsh]

I agree with @sean7512. I'm curious to hear what would keep this from being officially released as a Safari extension, it appears to work well and reliably, the only pain points being that we're all spinning up the extension via xcode devtools at the moment.

[bronisMateusz]

I can confirm that version 6.4.5 also works with the latest Safari version 17. Although the installation is not complicated, it would be nice to see official support.

[iBobik]

Installation is not complicated, but it is pain to install it on each Safari restart.

[kaiserkiwi]

After the recent updates of Chrome with it's anti-privacy stuff, it would really be nice to see some progress here. The standalone app is terrible and definitely not a replacement for a proper extension.

[kapalla]

I'm using Safari 17 (macOS 14 on ARM) and followed @vad1ym steps 🙏 but the extension doesn't detect vuejs. Does anyone have any idea?

[euaaaio]

I'm using Safari 17 (macOS 14 on ARM) and followed @vad1ym steps 🙏 but the extension doesn't detect vuejs. Does anyone have any idea?

It works for me with the same versions of MacOS and Safari.

[kapalla]

Ok, it works. I've tried to create the .zip file with npm install && npm run zip from this repo, but that seems to be wrong. I have now downloaded and unzipped the .crx file.

[Abhishek0116]

They are not interested in releasing it on Safari. This issue has existed since Jan 4, 2020, it's been more than 3 and a half years. 🧐

[DaDlugosch]

Any update about releasing a stable Vue devtools version on Safari?

[ogroves]

Who do we need to pay for Vue Devtools on Safari?