Installability

Every web page is an installable app! Generate or repair a Web Manifest for any web page.
当前为 2023-08-08 提交的版本，查看最新版本。
换行
// ==UserScript==
// @name        Installability
// @description Every web page is an installable app! Generate or repair a Web Manifest for any web page.
// @namespace   Itsnotlupus Industries
// @match       https://*/*
// @version     1.5
// @noframes
// @author      itsnotlupus
// @license     MIT
// @require     https://greasyfork.org/scripts/468394-itsnotlupus-tiny-utilities/code/utils.js
// @grant       GM_xmlhttpRequest
// @grant       GM_addElement
// @grant       GM_getValue
// @grant       GM_setValue
// @connect     *
// ==/UserScript==
 
/* jshint esversion:11 */
/* eslint curly: 0 no-return-assign: 0, no-loop-func: 0 */
/* global $, $$, crel, log, logGroup, withLogs */
 
const FALLBACK_ICON = 'data:image/svg+xml;base64,'+btoa`<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48"><defs><linearGradient id="a" x1="-44" x2="-4" y1="-24" y2="-24" gradientUnits="userSpaceOnUse"><stop offset="0" stop-color="#009467"/><stop offset="1" stop-color="#87d770"/></linearGradient></defs><rect width="40" height="40" x="-44" y="-44" fill="url(#a)" rx="20" transform="matrix(0 -1 -1 0 0 0)"/><path d="M4 23.5v.5a20 20 0 1 0 40 0v-.5a20 20 0 0 1-40 0z" opacity=".1"/><path fill="#fff" d="M24.5 23a1.5 1.5 0 0 0 0 3 1.5 1.5 0 0 0 0-3z"/><g fill="none" stroke="#fff" stroke-linecap="round" stroke-linejoin="round"><path d="M33.5 27.5s3-1 3-3c0-3.5-9.2-5-12.5-5-7-.1-12.3 1.4-12.5 4s3 3 3 3"/><path d="M30.5 17.5s1.1-3.8-.6-4.7c-3-1.7-8.9 5.7-10.5 8.4-3.7 6-5 11.4-2.8 12.9 2.2 1.4 3.9-.6 3.9-.6"/><path d="M21.5 14.5s-2.2-2.4-3.8-1.4c-3 1.8.3 10.5 2 13.4 3.3 6.2 7.3 10 9.6 8.8 5.2-2-.8-12.8-.8-12.8"/></g></svg>`;
 
const CACHE_MANIFEST_EXPIRATION = 24*3600*1000; // keep cached bits of manifests on any given site for 24 hours before fetching/generating new ones.
 
async function cacheInto(key, work) {
  const cached = GM_getValue(key);
  if (cached && cached.expires > Date.now()) return cached.data;
  const data = await work();
  if (data != null) GM_setValue(key, { expires: Date.now() + CACHE_MANIFEST_EXPIRATION, data });
  return data;
}
 
const resolveURI = (uri, base=location.href) => uri && new URL(uri, base).toString();
 
// CSP stuff. mostly useless.
// const CSP_HEADER = 'Content-Security-Policy';
// const parseCSP = csp => csp?csp.split(';').map(line=>line.trim().split(/\s+/)).reduce((o,a)=>(a.length>1&&(o[a[0]]=a.slice(1)),o),{}):{};
// async function inspectCSP() {
//   const csp1 = parseCSP((await fetch('')).headers.get(CSP_HEADER));
//   const csp2 = parseCSP($(`meta[http-equiv="${CSP_HEADER}"]`)?.content);
//   console.log(csp1);
//   console.log(csp2);
//   // limited usefulness, but if CSP allows for blob: and not data:, or data: and not blob:,
//   // a userscript could tweak the URI scheme they use to make things work.
// }
// inspectCSP();
 
/**
 * load an image without CSP restrictions.
 */
function getImage(src) {1
  return new Promise((resolve) => {
    const img = GM_addElement('img', {
      src: resolveURI(src),
      crossOrigin: "anonymous"
    });
    img.onload = () => resolve(img);
    img.onerror = () => resolve(null);
    img.remove();
  });
}
 
function grabURL(src) {
  return new Promise(resolve => {
    const url = resolveURI(src);
    GM_xmlhttpRequest({
      url,
      responseType: 'blob',
      async onload(res) {
        resolve(res.response);
      },
      onerror() {
        log("Couldn't grab URL " + src);
        resolve(null);
      }
    });
  });
}
 
/**
 * Grab an image and its mime-type regardless of browser sandbox limitations.
 */
async function getUntaintedImage(src) {
  const blob = await grabURL(src);
  const blobURL = URL.createObjectURL(blob);
  const img = await getImage(blobURL);
  if (!img) return null;
  URL.revokeObjectURL(blobURL);
  return {
    src: resolveURI(src),
    img,
    width: img.naturalWidth,
    height: img.naturalHeight,
    type: blob.type
  };
}
 
function makeBigPNG(fromImg) {
  // scale to at least 144x144, but keep the pixels if there are more.
  const width = Math.max(144, fromImg.width);
  const height = Math.max(144, fromImg.height);
  const canvas = crel('canvas', { width, height });
  const ctx = canvas.getContext('2d');
  ctx.drawImage(fromImg, 0, 0, width, height);
  const url = canvas.toDataURL({ type: "image/png" });
  return {
    src: url,
    width,
    height,
    type: "image/png"
  };
}
 
async function repairManifest() {
  let fixed = 0;
  const manifestURL = $`link[rel="manifest"]`.href;
  const manifest = await cacheInto("site_manifest:" + location.origin, async () => {
    verb = '';
    return JSON.parse(await (await grabURL(manifestURL)).text());
  });
  // fix manifests with missing start_url
  if (!manifest.start_url) {
    manifest.start_url = location.origin;
    fixed++;
  }
  // fix manifests with display values Chromium doesn't like anymore
  if (!["standalone", "fullscreen", "minimal-ui"].includes(manifest.display)) {
    manifest.display = "minimal-ui";
    fixed++;
  }
  // TODO: add repair steps from these lists:
  //   https://developer.chrome.com/en/docs/lighthouse/pwa/installable-manifest/
  //   https://web.dev/install-criteria/
  //   https://developer.mozilla.org/en-US/docs/Web/Progressive_web_apps/Guides/Making_PWAs_installable#the_web_app_manifest
  if (fixed) {
    // since we're loading the manifest from a data: URI, fix all the relative URIs (TODO: some relative URIs may linger)
    manifest.icons.forEach(img => img.src= resolveURI(img.src, manifestURL));
    ["start_url", "scope"].forEach(k => manifest[k] = resolveURI(manifest[k], manifestURL));
    $$`link[rel="manifest"]`.forEach(link=>link.remove());
    verb += `repaired ${fixed} issue${fixed>1?'s':''}`;
    return manifest;
  }
  // nothing to do, let the original manifest stand.nothing.
  verb += 'validated';
  return null;
}
 
async function generateManifest() {
  // Remember how there's this universal way to get a web site's name? Yeah, me neither.
  const goodNames = [
    // plausible places to find one
    $`meta[name="application-name"]`?.content,
    $`meta[name="apple-mobile-web-app-title"]`?.content,
    $`meta[name="al:android:app_name"]`?.content,
    $`meta[name="al:ios:app_name"]`?.content,
    $`meta[property="og:site_name"]`?.content,
    $`meta[property="og:title"]`?.content,
  ].filter(v=>!!v).sort((a,b)=>a.length-b.length); // short names first.
  const badNames = [
    // various bad ideas
    $`link[rel="search]"`?.title.replace(/ search/i,''),
    document.title,
    $`h1`?.textContent,
    [...location.hostname.replace(/^www\./,'')].map((c,i)=>i?c:c.toUpperCase()).join('') // capitalized domain name. If everything else fails, there's at least this.
  ].filter(v=>!!v);
  const short_name = goodNames[0] ?? badNames[0];
  const app_name = goodNames.at(-1) ?? badNames[0];
 
  const descriptions = [
    $`meta[property="og:description"]`?.content,
    $`meta[name="description"]`?.content,
    $`meta[name="description"]`?.getAttribute("value"),
    $`meta[name="twitter:description"]`?.content,
  ].filter(v=>!!v);
  const app_description = descriptions[0];
 
  const colors = [
    $`meta[name="theme-color"]`?.content,
    getComputedStyle(document.body).backgroundColor
  ].filter(v=>!!v);
  const theme_color = colors[0];
  const background_color = colors.at(-1);
 
  // focus on caching only the bits with network requests
  const images = await cacheInto("images:"+location.origin, async () => {
     const icons = [
      ...Array.from($$`link[rel*="icon"]`).filter(link=>link.rel!="mask-icon").map(link=>link.href),
      resolveURI($`meta[itemprop="image"]`?.content),
    ].filter(v=>!!v);
    // fetch all the icons, so we know what we're working with.
    const images = (await Promise.all(icons.map(getUntaintedImage))).filter(v=>!!v);
    images.sort((a,b)=>b.height - a.height); // largest image first.
    if (!images.length) {
      const fallback = await getUntaintedImage("/favicon.ico"); // last resort. well known location for tiny site icons.
      if (fallback) images.unshift(fallback);
    }
    if (!images.length) {
      images.unshift(await getUntaintedImage(FALLBACK_ICON));
      verb = 'generated with a fallback icon';
    }
    // grab the biggest one.
    const biggestImage = images[0];
    if (biggestImage.width < 144 || biggestImage.height < 144 || biggestImage.type !== 'image/png') {
      log(`We may not have a valid icon yet, scaling an image of type ${biggestImage.type} and size (${biggestImage.width}x${biggestImage.height}) into a big enough PNG.`);
      // welp, we're gonna scale it.
      const img = await makeBigPNG(biggestImage.img);
      images.unshift(img);
    }
    images.forEach(img=>delete img.img);
    verb = '';
    return images;
  });
  if (!images) {
    return;
  }
 
  verb += 'generated';
  // There it is, our glorious Web Manifest.
  return {
    name: app_name,
    short_name: short_name,
    description: app_description,
    start_url: location.href,
    scope: resolveURI("/"),
    display: "standalone",
    theme_color: theme_color,
    background_color: background_color,
    icons: images.map(img => ({
      src: img.src,
      sizes: `${img.width}x${img.height}`,
      type: img.type
    }))
  };
}
 
let adjective;
let verb = 'grabbed from cache and ';
 
async function main() {
  const start = Date.now();
  let manifest;
 
  if ($`link[rel="manifest"]`) {
    adjective = 'Site';
    manifest = await repairManifest();
  } else {
    adjective = 'Custom';
    manifest = await generateManifest();
  }
 
  if (manifest) {
    // Use GM_addElement to inject the manifest.
    // It doesn't succeed in bypassing Content Security Policy rules today, but maybe userscript extensions will make this work someday.
    // (Note: TamperMonkey lets you disable CSP altogether in their Advanced Settings.)
    GM_addElement(document.head, 'link', {
      rel: "manifest",
      href: 'data:application/manifest+json,'+encodeURIComponent(JSON.stringify(manifest))
    });
  }
  // explain what we did.
  logGroup(`${adjective} manifest ${verb} in ${Date.now()-start}ms.`,
    manifest ?
      JSON.stringify(manifest,null,2).replace(/"data:.{70,}?"/g, url=>`"${url.slice(0,35)}…[${url.length-45}_more_bytes]…${url.slice(-10,-1)}"`)
      : $`link[rel="manifest"]`?.href ?? ''
  );
}
 
withLogs(main);