Nat Taylor — Blog, AI, Product Management & Tinkering

Chrome “Create Shortcut” (PWA) for Specific Doc

Published on .

I use a Google doc for To Do & Notes and rely on Option + Tab for window switching on my Mac, which is incompatible with Chrome tabs. Flotato mostly resolved this by making tabs into windows, but it was a memory hog, had it’s own cookie store and I much prefer Chrome’s native PWA shortcuts. However docs.google.com‘s manifest.json sets start_url to the Docs homepage, so native shorcuts don’t quite work. Well… we can fix that :)

Create a Chrome PWA Shortcut with manifest override

  1. Open the page you want to open as a PWA shortcut
  2. Open devtools and run the script below.
  3. Create shortcut (3-dot > Save & Share > Create Shortcut)

That’s it. Now you have a shortcut!

let manifest = document.head.querySelector('link[rel="manifest"]');
manifest.href = 'data:application/manifest+json,' + encodeURIComponent(JSON.stringify({
    "scope": "https://docs.google.com/document/d/<someDocId>/",
    "display": "standalone",
    "name": "<Your App Name>",
    "start_url": "https://docs.google.com/document/d/<someDocId>/edit?pli=1?usp=installed_webapp",
    "id": "<setThisId>",
    "icons": [{
        "sizes": "200x200",
        "src": "<someUrl>",
        "purpose": "any",
        "type": "image/png"
    }]
}));
manifest = document.head.querySelector('link[rel="manifest"]');
json = await fetch(href = manifest.href).then(res => res.json());
base = href.substring(0, href.lastIndexOf('/') + 1);

json.start_url = window.location.href + '?usp=installed_webapp';
json.icons.forEach((icon) => icon.src = base + icon.src);

manifest.href = 'data:application/manifest+json,' + encodeURIComponent(JSON.stringify(json));

json;

Post Navigation

«
»