23

I have 2 Google accounts (personal/work). If I go to the Google Calendar site, on the work account, in Chrome, I can go to ... / More tools / Create shortcut..., which will create a Google Calendar.app file.

I can then add it to the dock - but, this goes to the wrong account :(

If I do Show Package Contents I can open the Info.plist file, and I see the url inside:

    <key>CrAppModeShortcutURL</key>
    <string>https://calendar.google.com/calendar/r</string>

Now if I change the url to https://calendar.google.com/calendar/b/1/r (which is the correct way to choose a specific Google account), I would expect it to work. But in fact that doesn't change anything.

But actually, even if I put any random website here, it will still go to Google Calendar so basically I think this has no effect at all, which is surprising.

Ideas?

Improve this question
1
  • Saw Karl's solution. Wondering if there's a simpler one...
    – AlikElzin-kilaka
    Jun 26, 2022 at 7:04

3 Answers 3

Reset to default
39

I also had this issue (trying to create an app shortcut to the second Google Calendar account) and solved it by creating a web app manifest before creating the app shortcut:

  1. Copy the JavaScript below
  2. On the Google Calendar page, open the Chrome Devtools (right click anywhere on the page and select "Inspect")
  3. Go to the Console tab and paste the copied JavaScript
  4. Modify the URL if necessary to whatever URL you are trying to create an app for
  5. Hit return to run the JavaScript
const startUrl = 'https://calendar.google.com/calendar/u/1/r';

const unsanitizedHtmlPolicy = trustedTypes.createPolicy('unsanitizedHtml', {
  createHTML: (htmlString) => htmlString,
});

document.head
  .querySelector(':first-child')
  .insertAdjacentHTML(
    'beforebegin',
    unsanitizedHtmlPolicy.createHTML(
      `<link rel="manifest" href='data:application/manifest+json,{"start_url":"${startUrl}"}' />`,
    ),
  );

This will add a Web App Manifest for this website which will be used when creating the app.

Once you have done this, you can create the desktop app as normal:

  1. Click on the three dots menu > More Tools > Create Shortcut
  2. Check "Open as window" and select "Create"

Now you should have a separate desktop app for your second calendar account!

Source: https://github.com/karlhorky/pwa-tricks#change-starting-url-of-pwa-in-chrome

Alternatives: Editing Existing Manifest, Security Restriction Workarounds

If you're trying to add a different PWA than Google Calendar where the page either specifies a manifest already or sets the Content Security Policy directive manifest-src or trusted-types, then the above solution may not work, potentially also returning an error such as:

Refused to load manifest from 'data:application/manifest+json,...' because it violates the following Content Security Policy directive: "manifest-src 'self'".

To get around this, two additional options:

A) Manually Edit HTML

Switch to the Elements tab of the Chrome DevTools and manually edit the HTML to match the manifest in the JavaScript above

B) Chrome Local Overrides

Use Chrome Local Overrides to modify the start_url in the Web App Manifest:

  1. On the page of the application, open the Chrome DevTools (right click anywhere on the page and select "Inspect")
  2. Locate and expand the <head> element and find the link element with rel="manifest". Note the file path in href.



  3. Open the Sources tab in the DevTools. If you have not used overrides before, you will need to set them up:
    • Switch to the Overrides 2nd-level tab (you may need to find it in the » menu)
    • If you Create a new folder in your projects or Documents folder called chrome-overrides
    • Click on ＋ Select folder for overrides and select the folder you created



    • Confirm any prompts at the top of the browser asking for access to the folder



  4. Refresh the page to make sure all sources load. Locate the web app manifest corresponding to the file path you noted earlier. Right click and select Save for overrides:



  5. Now the web app manifest is editable! Make your changes to start_url or anything else that you need, save the file and reload the page
  6. The updated web app manifest has now been loaded, and you can install or create a shortcut to the PWA as normal 🙌

Source: https://github.com/karlhorky/pwa-tricks#solution-2-edit-an-existing-web-app-manifest

Improve this answer
8
  • Glad that it helped you!
    – Karl Horky
    Aug 28, 2020 at 17:00
  • 2
    This worked for YouTube not letting me set the URL for a video I wanted a focus video soundtrack (e.g. youtube.com/watch?v=_JJJBQSBiA4&t=83s) that I wanted PWAize to a specific timestamp. It was always stripping the entire path off, to www.youtube.com. The first method worked and took about 30 seconds once I was done reading, which for some reason looked more complicated than it actually was. I did have to uninstall the previous PWA/Shortcut and re-add it, as expected. I suppose this solution could be packaged as a Chrome Extension too.
    – Elijah Lynn
    Apr 8, 2022 at 0:18
  • 1
    Thank you so much for the detailed guide! The first option didn't work for me (trying to save Google Meet with a secondary account as a desktop shortcut), but the second (via overrides) did! Just a note, though, is that I got an error on the first option command: VM182:4 This document requires 'TrustedHTML' assignment. VM182:4 Uncaught TypeError: Failed to execute 'insertAdjacentHTML' on 'Element': This document requires 'TrustedHTML' assignment. - Maybe be you can double check this and update your repo with updated instructions? Cheers!
    – Felipe Maia
    Jan 27 at 13:01
  • 1
    This solution works perfectly for Notion on Windows as well. Thanks!
    – Winand
    Feb 11 at 11:06
  • 1
    Also, btw, you can use your Google account's email address in place of the number in the /u/1 part of Google urls (e.g., /calendar/u/[email protected]/r). Google will redirect to the correct /u/N for that email. (The numbers can change depending on the order you log into your Google accounts.)
    – medmunds
    Sep 13 at 19:45
1

I tried making a desktop app shortcut for Microsoft 365 outlook calendar and it always redirected back to the mail component. This solution to this question didn't work for me but going into the sources tab and manually editing the url manifest file and then creating the shortcut worked like a charm. Just putting it on here incase the other solution doesn't work, mine might.

Improve this answer
2
  • Right, I actually also just added detailed instructions about this to my pwa-tricks repo 3 days ago 😄 : github.com/karlhorky/…
    – Karl Horky
    Jan 16, 2021 at 11:03
  • I will also add a section to the answer above referencing this second solution in the repo - should have also updated it 3 days ago.
    – Karl Horky
    Jan 16, 2021 at 11:03
1

The first part of Karl Horky's answer above is correct, however, it seems that Google has since started using TrustedHTML on their web apps so it no longer works for Gmail, Google Calendar, etc.

This is an update to his answer that works on Google and non-Google sites.

const startUrl = 'https://calendar.google.com/calendar/u/1/r';

const escapeHTMLPolicy = trustedTypes.createPolicy("forceInner", { createHTML: (to_escape) => to_escape });
document.head
  .querySelector(':first-child')
  .insertAdjacentHTML(
    'beforebegin',
    escapeHTMLPolicy.createHTML(`<link rel="manifest" href='data:application/manifest+json,{"start_url":"${startUrl}"}' />`),
  );
Improve this answer
1
  • Thanks Andrew! 🙌 I've also edited my answer and my repo to avoid misleading people
    – Karl Horky
    Jul 15 at 15:21

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .