Using a secondary browser as Messenger for MS Teams only (open all links in other browser)

README.md

How to use a secondary browser as MS Teams messenger only

Chrome for Teams, Firefox for everything else

1. install both browsers
2. install the chrome-extension Open in Firefox
3. add teams.microsoft.com as PWA in Chome
4. go to the settings for "Open in Firefox" and select to open everything except *.microsoft.com in firefox

Firefox for Teams, Chrome for everything else

1. install both browsers
2. install the firefox-extension Open in Chrome
3. install the firefox-extension PWAs for Firefox
4. add teams.microsoft.com as PWA in Firefox
5. go to the settings for "Open in Chrome" and select to open everything except *.microsoft.com in chrome

Issues:

• Pictures cannot be displayed when this is activated.
• sent links cannot be opened by clicking

One can fix the issue of Pictures not being displayed by adding following quick and dirty guard inside the forEach loop:
Someone can probably figure out a more robust pattern than this.

if (linkElement.href && linkElement.href.includes("teams.microsoft.com/")) {
    return
}

@hterik sorry I should have updated this earlier: You can run ms teams in chrome in app mode (see step 4) and use the chrome extension Open in Firefox to open all links that do not belong to teams in Firefox. If you use a different Browser there's also Add-Ons for that. That way you don't need Tampermonkey and you don't need steps 1 and 2.

Edge App Flatpak Command

This may help for those that wish to not use the Edge creator (I have seen my created Apps disappear) and instead build their own Desktop link.

It's the command to run Teams in App mode on Linux Edge as that runs from a Flatpak.

/usr/bin/flatpak run --branch=stable --arch=x86_64 --command=/app/bin/edge --file-forwarding com.microsoft.Edge --app=https://teams.microsoft.com/v2 --profile-directory="Profile 1" –-window-size="720,1280" %U

I added the --profile-directory="Profile 1" part as I created a specific profile for the Teams app to run under, hopefully limiting any default profile stuff, too. (the --window-size="720, 1280" doesn't appear to work)

I understand that there may be even more ways to make this sleeker by using alias ... but I don't fully understand that, yet.

Violent Monkey Observer JQuery Alternative

This uses the VM JQuery method to perform the work, it works on SLACK and Outlook PWAs in Edge on Linux (Debian) but I'm having trouble getting it to work in Teams.

Code

// ==UserScript==
// @name         external-teams-links
// @namespace    https://mstaff.de/
// @version      0.1
// @description  replace links in MS Teams to have chrome act like a messenger only
// @author       Max Staff <max.staff@gmx.de>
// @match        https://teams.microsoft.com/*
// @match        https://app.slack.com/*
// @match        https://outlook.office.com/*
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==
// @require      https://cdn.jsdelivr.net/npm/@violentmonkey/dom@1
// @require      https://cdn.jsdelivr.net/npm/jquery@3/dist/jquery.min.js
// @grant        none
// ==/UserScript==
 
VM.observe(document.body, () => {
  const $node = $('a[target="_blank"][href^="http"]');
 
  if ($node.length) {
    $($node).each(function () {
 
      // Check All Is OK
      let urllyOrig = new URL($(this).attr('href'));
      let urllyHost = urllyOrig.hostname;
      let urllyHostLow = urllyHost.toLowerCase();
 
      if ( !urllyHostLow.endsWith(".slack.com") || !urllyHostLow.endsWith("teams.microsoft.com") || !urllyHostLow.endsWith("outlook.office.com") ){
        // Construct New URL
        let urlly = $(this).attr('href').slice(4);
        let urllyNu = new URL("browser"+urlly);
        // Place new URL on A element
        $(this).attr('href', urllyNu);
      };
    });
 
    // If uncommented this will not run for all new links after it has handled one
    //return true;
  }
});

You may be able to make this more efficient than I have, I only know enough for 'applied' coding. 😅

More Information

I was a bit concerned that this would replace all instances of "http" in a URL, but then I remembered that replace() by default only replaces the first.

So I nearly didn't put it together.

However, I noticed that you had the issue with sent items and with images, and I thought that the fact that the observer in this instance isn't breaking might well fix that.

Teams Issues

For whatever reason, I cannot get this to run properly on Teams URLs.

I have tried the different 'inject' settings and also the following options in the metadata ...

// @match        http*://teams.microsoft.com/*
// @match        http*://teams.microsoft.com/v2/?clientType=pwa
// @run-at        document-start

... but I cannot get it to functionally fudge with the Teams HTML.

Do you think that perhaps Teams has an observer of its own that first needs to be disabled?

I updated the instructions so that all the custom stuff is no longer necessary. If you still want to do it the hard way you can check the gists history.

OK, well, I'm not the trusting type, so my genuine apologies on not wishing to install both another extension and a local client.

Thanks, though, for all your hard work!

So here is something interesting. I follow this guide using the open in chrome plugin for edge. I add teams and outlook as an app from edge. When I open the Outlook app, it opens as a wpa in edge. When I open the teams app it opens chrome. Any ideas?

cat msedge-cifhbcnohmdccbgoicgdjpfamggdegmo-Default.desktop
#!/usr/bin/env xdg-open
[Desktop Entry]
Version=1.0
Terminal=false
Type=Application
Name=Microsoft Teams
Exec=/opt/microsoft/msedge/microsoft-edge --profile-directory=Default --app-id=cifhbcnohmdccbgoicgdjpfamggdegmo "--app-url=https://teams.microsoft.com/v2/?clientType=pwa"
Icon=msedge-cifhbcnohmdccbgoicgdjpfamggdegmo-Default
StartupWMClass=crx__cifhbcnohmdccbgoicgdjpfamggdegmo