Return to Answer

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;

// Find the head node linking to the original manifest.
manifest = document.head.querySelector('link[rel="manifest"]');

// Fetch the manifest and convert it to json.
json = await fetch(href = manifest.href).then(res => res.json());

// Store the base url for resources referenced in the manifest.
base = href.substring(0, href.lastIndexOf('/') + 1);

// Set the start url to the current location, append parameter as in the original manifest.
json.start_url = window.location.href + '?usp=installed_webapp';

// Convert icon paths relative to the manifest into absolute paths.
json.icons.forEach((icon) => icon.src = base + icon.src);

// Store the updated manifest in-place in the original link node.
// Must be URI-encoded, otherwise the # in the colors would cause parsing errors.
manifest.href = 'data:application/manifest+json,' + encodeURIComponent(JSON.stringify(json));

// Dump the updated manifest into the console for review.
json;

11.01.2024 edit based on suggestion and answer by Jason: Keep start url search parameters, account for location hash, set navigation scope and avoid breaking absolute icon paths.

manifest = document.head.querySelector('link[rel="manifest"]');
json = await fetch(manifest.href).then(res => res.json());

url = new URL(window.location);
url.search = new URLSearchParams([...new URL(json.start_url, url).searchParams, ...url.searchParams]);

json.start_url = url.href;
json.scope = url.origin + url.pathname.substring(0, url.pathname.lastIndexOf('/') + 1);
json.icons.forEach((icon) => icon.src = new URL(icon.src, manifest.href).href);

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

json;

// Find the head node linking to the original manifest.
manifest = document.head.querySelector('link[rel="manifest"]');

// Fetch the manifest and convert it to json.
json = await fetch(manifest.href).then(res => res.json());

// Create a new url for the current location, keeping the parameters from the original start url.
url = new URL(window.location);
url.search = new URLSearchParams([...new URL(json.start_url, url).searchParams, ...url.searchParams]);

// Set the start url and scope. Will revert to a normal browser when navigated outside of scope.
json.start_url = url.href;
json.scope = url.origin + url.pathname.substring(0, url.pathname.lastIndexOf('/') + 1);

// Convert relative icon paths in the manifest into absolute paths.
// When the manifest is defined inline, the paths must be absolute and include protocol.
json.icons.forEach((icon) => icon.src = new URL(icon.src, manifest.href).href);

// Store the updated manifest inline in the original link node.
// Must be URI-encoded, otherwise the # in the colors would cause parsing errors.
manifest.href = 'data:application/manifest+json,' + encodeURIComponent(JSON.stringify(json));

// Dump the updated manifest into the console for review.
json;

Introduction

I have used the javascript from this answer by Karl, but noticed the installed app would use a crude favicon, instead of the nicer icons defined in the original manifest.

I have adapted the script to update the original manifest, instead of creating a new one.

Customization

To change the start URL and other details, we can make browser use our own customized manifest:

1. Open website and go to desired URL. If not possible, adjust url in the script.
2. Open the console tab in developer tools, in Chrome or Edge: Ctrl + Shift + I.
3. Copy the javascript below into the console and press Enter.
4. Close the console and add application, Menu > Apps > Install this site as an app.

Customizing the original manifest keeps the icons and other details we do not want to change.

The script

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;

With comments

// Find the head node linking to the original manifest.
manifest = document.head.querySelector('link[rel="manifest"]');

// Fetch the manifest and convert it to json.
json = await fetch(href = manifest.href).then(res => res.json());

// Store the base url for resources referenced in the manifest.
base = href.substring(0, href.lastIndexOf('/') + 1);

// Set the start url to the current location, append parameter as in the original manifest.
json.start_url = window.location.href + '?usp=installed_webapp';

// Convert icon paths relative to the manifest into absolute paths.
json.icons.forEach((icon) => icon.src = base + icon.src);

// Store the updated manifest in-place in the original link node.
// Must be URI-encoded, otherwise the # in the colors would cause parsing errors.
manifest.href = 'data:application/manifest+json,' + encodeURIComponent(JSON.stringify(json));

// Dump the updated manifest into the console for review.
json;

Introduction

I have used the JavaScript from this answer by Karl, but noticed the installed app would use a crude favicon, instead of the nicer icons defined in the original manifest.

I have adapted the script to update the original manifest, instead of creating a new one.

Customization

To change the start URL and other details, we can make the browser use our own customized manifest:

1. Open the website and go to the desired URL. If not possible, adjust url in the script.
2. Open the console tab in developer tools, in Chrome or Edge: Ctrl + Shift + I.
3. Copy the JavaScript below into the console and press Enter.
4. Close the console and add an application, Menu > Apps > Install this site as an app.

Customizing the original manifest keeps the icons and other details we do not want to change.

The script

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;

With comments

// Find the head node linking to the original manifest.
manifest = document.head.querySelector('link[rel="manifest"]');

// Fetch the manifest and convert it to json.
json = await fetch(href = manifest.href).then(res => res.json());

// Store the base url for resources referenced in the manifest.
base = href.substring(0, href.lastIndexOf('/') + 1);

// Set the start url to the current location, append parameter as in the original manifest.
json.start_url = window.location.href + '?usp=installed_webapp';

// Convert icon paths relative to the manifest into absolute paths.
json.icons.forEach((icon) => icon.src = base + icon.src);

// Store the updated manifest in-place in the original link node.
// Must be URI-encoded, otherwise the # in the colors would cause parsing errors.
manifest.href = 'data:application/manifest+json,' + encodeURIComponent(JSON.stringify(json));

// Dump the updated manifest into the console for review.
json;

Introduction

I have used the javascript from this answer by Karl, but noticed the installed app would use a crude favicon, instead of the nicer icons defined in the original manifest.

I have adapted the script to update the original manifest, instead of creating a new one.

Customization

To change the start url and other details, we can make browser use our own customized manifest:

1. Open website and go to desired url. If not possible, adjust url in the script.
2. Open the console tab in developer tools, in Chrome or Edge Ctrl + Shift + I.
3. Copy the javascript below into the console and press Enter.
4. Close the console and add application, Menu > Apps > Install this site as an app.

Customizing the original manifest keeps the icons and other details we do not want to change.

The script

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;

With comments

// Find the head node linking to the original manifest.
manifest = document.head.querySelector('link[rel="manifest"]');

// Fetch the manifest and convert it to json.
json = await fetch(href = manifest.href).then(res => res.json());

// Store the base url for resources referenced in the manifest.
base = href.substring(0, href.lastIndexOf('/') + 1);

// Set the start url to the current location, append parameter as in the original manifest.
json.start_url = window.location.href + '?usp=installed_webapp';

// Convert icon paths relative to the manifest into absolute paths.
json.icons.forEach((icon) => icon.src = base + icon.src);

// Store the updated manifest in-place in the original link node.
// Must be URI-encoded, otherwise the # in the colors would cause parsing errors.
manifest.href = 'data:application/manifest+json,' + encodeURIComponent(JSON.stringify(json));

// Dump the updated manifest into the console for review.
json;

Introduction

I have used the javascript from this answer by Karl, but noticed the installed app would use a crude favicon, instead of the nicer icons defined in the original manifest.

I have adapted the script to update the original manifest, instead of creating a new one.

Customization

To change the start URL and other details, we can make browser use our own customized manifest:

1. Open website and go to desired URL. If not possible, adjust url in the script.
2. Open the console tab in developer tools, in Chrome or Edge: Ctrl + Shift + I.
3. Copy the javascript below into the console and press Enter.
4. Close the console and add application, Menu > Apps > Install this site as an app.

Customizing the original manifest keeps the icons and other details we do not want to change.

The script

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;

With comments

// Find the head node linking to the original manifest.
manifest = document.head.querySelector('link[rel="manifest"]');

// Fetch the manifest and convert it to json.
json = await fetch(href = manifest.href).then(res => res.json());

// Store the base url for resources referenced in the manifest.
base = href.substring(0, href.lastIndexOf('/') + 1);

// Set the start url to the current location, append parameter as in the original manifest.
json.start_url = window.location.href + '?usp=installed_webapp';

// Convert icon paths relative to the manifest into absolute paths.
json.icons.forEach((icon) => icon.src = base + icon.src);

// Store the updated manifest in-place in the original link node.
// Must be URI-encoded, otherwise the # in the colors would cause parsing errors.
manifest.href = 'data:application/manifest+json,' + encodeURIComponent(JSON.stringify(json));

// Dump the updated manifest into the console for review.
json;