Stylus: Support for Edge

[xt0rted]

Edge has extension support using the same api as Chrome. I ran the code though the Microsoft Edge Extension Toolkit and was able to get it loading, but that's as far as I could get with it for now.

[schomery]

@xt0rted can we submit extensions for MS Edge? As far as I know they don't accept extensions yet

[xt0rted]

More extensions have been showing up such as LastPass, Ghostery, Tampermonkey and uBlock (this one is odd because I can never find it in the store, but I can find it with the direct link).

Right now the only way to get an extension listed is to send a request about it and possibly by reaching out to the Edge team for more info https://twitter.com/msedgedev

[xt0rted]

Now that Edge 15 has shipped with the Creators Update I gave this another go. The extension loads and generally works on the surface. I'm even able to go to userstyles.org and install the GitHub-Dark style. But this is where things fall apart.

Even though the style installed I don't see it listed under Manage. Nor does it show as running when I'm on GitHub.

This code is failing

chrome.tabs.query({ currentWindow: true }, function(tabs) { ... });

For some reason tabs is undefined, yet if I pass false it returns an array of tabs for the other instances of Edge. I pinged the Edge team on twitter to see what their thoughts are on this.

Trying to add a style for a site/page brings up the edit page, but there's no editor. This may be related to the above error, or it may be related to the other one I'm seeing which points to edit.js

function addSection(event, section) {
    var div = template.section.cloneNode(true);

The template.section is undefined.

[tophf]

The template.section is undefined.

It should be automatically set by localization.js in the editor. The error means one needs to actually debug the code and find out where and why and what is wrong. I don't use Edge nor plan to. OTOH I'll see if it's easy to fix once the big upcoming PR #50 is finalized.

[xt0rted]

The template object isn't being properly setup because node.content doesn't contain a .firstElementChild property in Edge. According to the docs Edge supports templates, but the API isn't the same as what Chrome supports. If I remove it or replace it with .clone(true) then the extension loads more and I can see the editor, but code mirror itself is unresponsive and there's a bunch of new errors shown in the console.

With this change I'm still able to install GitHub-Dark, but it doesn't show as installed. It does on the website, but not in the extension menu or manage page.

[tophf]

.content property is a DocumentFragment according to spec, meaning it must have .firstElementChild, meaning it's an Edge bug. Of course the workaround is simple in this case, but the real problem is that it's apparently not the only thing that's implemented in Edge differently.

[xt0rted]

Looks like Edge only supports a small subset of the api https://developer.microsoft.com/en-us/microsoft-edge/platform/catalog/?page=1&q=documentfragment

[tophf]

Well, I guess .querySelector('*') might work the same as .firstElementChild.

[xt0rted]

Removing .firstElementChild seems to work, using anything else just causes more errors. I was also able to get code mirror functioning by fixing what looks to be a bug in it at codemirror.js#L7145. I changed it to if (next && next.attach).

I'm still not able to save a style or run one, but it's starting to work more at least.

[tophf]

Try changing that line to template[node.dataset.id] = tHTML(node.innerHTML);
Also check if #50 zip supports Edge any better.

[tophf]

I've finally tried Edge:

• it complained about a few optional manifest.json keys not being set ("author", "persistent")
• it couldn't use chrome.i18n without it being explicitly specified in manifest.json
• it failed to access prefs.get in background page and I don't see how to debug the background page while it's loading, which is extremely easy and convenient in Chrome.
• its devtools underlines let and const as errors.

I've fixed the first two but on the 3rd and 4th I've remembered the days of IE6, so no, I won't be touching it.

P.S. One would expect an excellent debugging experience for WebExtensions from a company that makes Visual Studio but alas, it's even worse than that of Firefox. It's really weird that Chrome, the most simplified browser that never aimed to be advanced, offers a much more advanced and complete debugging experience for extensions while the competition lags far behind or simply sucks.

[DanaMW]

Sorry should have paid more attention. Take care,

[dwatley]

@tophf Have you considered raising issues here with the Edge team? https://developer.microsoft.com/en-us/microsoft-edge/platform/issues/

This would be a nice extension to have, and I imagine other extension developers may have similar issues?

[tophf]

The thing is, it would take several years for the Edge team to implement all the stuff I heavily use in Chrome devtools and which was implemented over the very long history of Chrome. BTW, the same applies to Firefox. Luckily, we've fixed most of the blockers in FF so I only have to spend a minute or a few to test for any weird quirks.

[jcotton42]

Is this still planned? It has the tag as such, but the last message from @tophf seems to imply it's not going to be done.

[FranklinYu]

@jcotton42 I think @tophf meant “we need to wait for Edge team”.

[Mottie]

I was looking at this today... so far I've discovered there are a few essential WebExtension components that Edge doesn't support:

• Only browser is supported, we'd have to replace all instances of chrome.
• alarms aren't supported. This is needed to update the installed styles periodically. We could work around this issue, but it'd still be better if it was supported natively.
• Lots of storage issues so far...

I'm still looking at it, but it's not going easy. I may delay trying this a bit longer...

[Project-Magenta]

aww

[lKobi]

This is pretty much the only extension keeping me away from Edge (by that I mean I only don't use Edge as main browser due to lack of Stylus).
MEET made the bridge for alarms with no problems, so I don't know why @Mottie claimed they aren't supported.
It lacks the links for Microsoft Edge, beyond that there's no errors so far. As for storage we can use the ME Storage API.

[grand-lotus-iroh]

So what you could do @lKobi is convert / export your styles into a tampermonkey userscript. Just find a style on Userstyles.org and scroll to bottom where it says "Install style as userscript" - it should autopromt tampermonkey install screen and you are good to go.

Now, instead of loading your CSS as a stylesheet, it'll just get blasted into J$.

p.s. - if you want, you could upload your userstyle and use the website to autogenerate the userscript. maybe there is tool online that'll help you export / convert css into userscript.

[pabli24]

In the next big windows update, Edge will be based on chromium anyway so there is no reason now to support EdgeHTML version.

[grand-lotus-iroh]

I suspect most people will not have Edge Chrome for 9+months if not a year or two. Nobody I know is ever in a rush to update W10 to the latest build. I really hope Edge Chrome doesn't lose the powerful PDF / ePub reader code. The M$ team did such a beautiful job with that part of the browser...

[narcolepticinsomniac]

Edge will be Chromium based in the near future.

[xt0rted]

Installing both Stylus and Stylus (beta) from the Chrome Web Store works in the current preview release of Edge. I've been running it in the Dev Channel for the last week on one of my machines without any issues.

[Seia-Soto]

Installing stylus on Chrome Store in Edge 44 is not working for me. Chrome web store let me to install Chrome to use stylus extension. Please check this and consider uploading to Microsoft store :>

Also I am on Windows version 1903.

[DanaMW]

Works great here. You need the chrome version.
Microsoft Edge
Microsoft Edge is up to date
Version 76.0.182.6 (Official build) dev (64-bit)

[AaronKelley]

Works fine for me too. Make sure you have checked the box for "Allow extensions from other stores" on the Edge extensions/settings page.

[lKobi]

Stylus is working perfectly on Edge Chromium, it just needs to be released on the Microsoft Store.

[narcolepticinsomniac]

The comment above yours says all you need to do is enable a setting to install from CWS. Not sure we wanna sign up for all the extra aggravation which is practically inevitable when dealing with yet another extension gallery, particularly when installing from CWS seems fairly straightforward.

[Project-Magenta]

You need an unreleased preview/developer version of Edge to use CWS

[DanaMW]

Sigh.

[narcolepticinsomniac]

You need an unreleased preview/developer version of Edge to use CWS

IDK, I thought they were all preview/developer versions at this point. I don't use Win 10, and AFAIK there aren't even official releases for other versions of Windows yet. Seems pretty ridiculous to switch to a Chromium based browser, if you're not gonna allow extension installs from CWS. I guess we've seen M$ make dumber anti-user moves though.

Doesn't change the fact that this will undoubtedly be a PITA, so it's not something I'm gonna advocate for. Even just reading the submission process details, it looks like a nightmare. "Sign up for this, and sign up for that, Then send us a formal request and we'll get to it when we get to it, but we're very busy, you know."

Mottie reopened it, so I guess if it's something you want, he might be volunteering. He's been handling submissions anyway, so nobody should be volunteering for him. Before we commit to some new bureaucracy, we might wanna update Opera next time around. Been almost a year since they've got an update. Gotta be borderline unusable.

[FranklinYu]

Don’t think there is anything else we need to do. I would just wait for Edge to come stable. CWS is good enough. Or we can have some step-by-step guide if anyone don’t know how to install Chrome extension in (the new) Edge. Hell no, we already have many such things online like How-To Geek.

[DanaMW]

If someone has to explain it to you maybe don't use it. The Dev chan. of Edge works as expected and is pretty straight forward as Chrome goes. It updates itself and is , well, chrome.

[narcolepticinsomniac]

If someone has to explain it to you maybe don't use it.

[lKobi]

The comment above yours says all you need to do is enable a setting to install from CWS. Not sure we wanna sign up for all the extra aggravation which is practically inevitable when dealing with yet another extension gallery, particularly when installing from CWS seems fairly straightforward.

Cause the feature set and extension rules are different between Microsoft Edge (Chromium) and Chrome, is currently working cause it's in the early stages.

So would be preparing for the future.

[narcolepticinsomniac]

Cause the feature set and extension rules are different between Microsoft Edge (Chromium) and Chrome...

Only if they intentionally do so to sabotage compatibility. It'd be one of the most hostile, anti-user moves imaginable, but yeah, sounds a lot like something M$ might do.

...is currently working cause it's in the early stages.

Because they haven't gotten around to the dumb stuff yet?

So would be preparing for the future.

I've already made my opinion on this pretty clear. If M$ wants to intentionally sabotage Chromium, so they can wall off CWS and create a competing extension gallery, that's their prerogative, but if they expect developers to jump through hoops to support them in this anti-user endeavor, I think they're in for a rude awakening.

This is just my opinion. If anyone else here wants to ask "How high?" when M$ says "Jump!", it's not like I'd stand in their way.

[AaronKelley]

The comment above yours says all you need to do is enable a setting to install from CWS. Not sure we wanna sign up for all the extra aggravation which is practically inevitable when dealing with yet another extension gallery, particularly when installing from CWS seems fairly straightforward.

Cause the feature set and extension rules are different between Microsoft Edge (Chromium) and Chrome, is currently working cause it's in the early stages.

So would be preparing for the future.

Microsoft has stated that they intend to support Chrome extensions with Chromium-Edge. (Allowing extensions to be installed from the CWS is pretty indicative of this in any case.)

[lKobi]

The comment above yours says all you need to do is enable a setting to install from CWS. Not sure we wanna sign up for all the extra aggravation which is practically inevitable when dealing with yet another extension gallery, particularly when installing from CWS seems fairly straightforward.

Cause the feature set and extension rules are different between Microsoft Edge (Chromium) and Chrome, is currently working cause it's in the early stages.
So would be preparing for the future.

Microsoft has stated that they intend to support Chrome extensions with Chromium-Edge. (Allowing extensions to be installed from the CWS is pretty indicative of this in any case.)

They have, and goes besides the point that he totally missed, he shows BIAS towards Google (with hate towards Microsoft).

If anyone is being hostile and anti-user is Google, and every Chromium Browser and Extension Developer are trying to shift away from them.

I though this project was open minded, currently we playing favorites with Google.

[Mottie]

I though this project was open minded

We are. There's only a few of us consistently working on this project (one less if you don't count me since I've been neglecting this project lately 😿). We're all busy and we each have our own browser preference. If you'd like to contribute, PRs are welcome.

[narcolepticinsomniac]

he shows BIAS towards Google (with hate towards Microsoft).

What makes you think I don't dislike them both equally? I use Chromium, or various forks, but haven't used Google Chrome in many years. Besides search, and a couple unavoidable gmail accounts, I avoid their services whenever possible. For the record, I'm not a huge fan of Mozilla either.

This has nothing to do with which company we like better, or dislike less. The point is, there are two main browsers which support WebExtensions, Chromium and Firefox. If we wanna support Firefox, they've restricted extension installations to AMO, so we need to deal with AMO. Google dominates Chromium, and the browser market share in general, so since they've restricted extension installations to CWS, we also need to deal with CWS.

All other Chromium forks have the luxury of built-in compatibility with CWS. To intentionally make a Chromium fork incompatible with CWS would certainly be "anti-user". I'm applying that term to that particular detail alone, not comparing the companies as a whole. If we did, it'd be a toss up between M$ and Google IMO.

every Chromium Browser and Extension Developer are trying to shift away from them.

"Shift away" how, and to where? Google has ~70% market share, and will only install extensions from CWS, so if you want to actually be available to all Chromium users, CWS is the only host which allows for that.

Everyone besides you seems to think this is a non-issue, and M$ will support installs from CWS, which would be the logical decision. Pretty much all Chromium forks allow this in one way or another. Like it or not (I don't), Google has been calling most of the shots with Chromium for over a decade now. You can fork Chromium and make it your own to a certain extent, but to restrict CWS and attempt to force developers into your own, redundant, closed ecosystem, will not work out well for users, or the browser's success in general.

Don't get it twisted though, if the situation were reversed, and you swapped M$ for Google in this hypothetical, I'd feel the exact same way.

[xt0rted]

I don't use Win 10, and AFAIK there aren't even official releases for other versions of Windows yet.

Canary builds for Windows 7, 8, and 8.1 were just made available yesterday. https://www.microsoftedgeinsider.com/en-us/download/

[narcolepticinsomniac]

Yeah, I checked it out yesterday. Stylus installed easily and seems to work as expected when I briefly tested. Takes a long time to get a browser set up how you like though, and I would never use Canary regularly anyway.

I'm hooked on Cent these days. Compact UI, double clicks close tabs, integrated command line switches, and truly portable. So many other cool little features that I instantly miss when using any other browser.

[tophf]

Stylus works in the new Edge so let's consider this "implemented" 😄

[Mottie]

Now if I can get my re-install of Windows 10 to actually not fail at updating, maybe I can get Edge-chromium to work 🤣

[Soitora]

Stylus works in the new Edge so let's consider this "implemented" 😄

Can this be added to the Edge Extension store as well?

[lKobi]

Stylus works in the new Edge so let's consider this "implemented" 😄

Can this be added to the Edge Extension store as well?

Won't happen, you have Code Injector on the Microsoft Store with more features.

[FranklinYu]

@lKobi You mean https://github.com/Lor-Saba/Code-Injector? Does it support installing styles from http://userstyles.org?

[lKobi]

@lKobi You mean https://github.com/Lor-Saba/Code-Injector? Does it support installing styles from http://userstyles.org?

I don't know, the styles themselves are compatible (as code injector supports CSS), but I doubt you can install them with a click of a button.

I use this extensions for my own code and modifications, and found code injector superior, considering Stylus is limited to CSS.

[tophf]

Code-Injector is basically a hybrid of basic CSS injection that's almost entirely orthogonal to the way Stylus/Stylish is used (our primary purpose is to install and apply usercss/userstyles) and a very limited subset of Tampermonkey. For some people this is convenient but it's not "superior", one could even argue it's "inferior" if compared to the corresponding full-fledged extensions, but actually it's just a totally different use case.

[Soitora]

Stylus works in the new Edge so let's consider this "implemented" 😄

Can this be added to the Edge Extension store as well?

Won't happen, you have Code Injector on the Microsoft Store with more features.

Code Injector don't seem to support my Stylus lang files, if that's the case then it's completely useless.