Nooshu/chrome-cli-command.txt

## chrome-cli-command.txt
// add this command to the CLI to enable priority hints
--enable-experimental-web-platform-features

## worker.js
// set the site we are modifying
const site = 'www.example-site.com';

// do this on a fetch
addEventListener('fetch', event => {
  const request = event.request
  const url = new URL(request.url)
  event.respondWith(handleRequest(request))
});

// the modified preloads to be added back into the head
var preloads = `
  <link rel="preload" href="https://www.example-site.com/css/print-one.css" as="style" importance="low">
  <link rel="preload" href="https://www.example-site.com/css/print-two.css" as="style" importance="low">
`;

async function handleRequest(request) {
  // store the URL
  const url = new URL(request.url);

  // disallow crawlers (write a robots.txt file)
  if(url.pathname === "/robots.txt") {
    return new Response('User-agent: *\nDisallow: /', {status: 200});
  }

  // when overrideHost is used in a WPT script, WPT sets x-host to original host i.e. site we want to proxy
  // store the value of x-host
  const xhost = request.headers.get('x-host');

  // If this header is missing, abort
  if(!xhost) {
    return new Response('x-host header missing', {status: 403});
  }

  // set our hostname to that listed in the xhost header
  url.hostname = xhost;

  // look for header that allows us to bypass the transform entirely
  const bypassTransform = request.headers.get('x-bypass-transform');

  // get the accept header to allow us to examine the type of request it is
  const acceptHeader = request.headers.get('accept');

  // check our x-host header matches the site we are testing and we aren't trying to bypass the transformation
  if(xhost === site && (!bypassTransform || (bypassTransform && bypassTransform.indexOf('true') === -1))){

    // check to see the request is for the HTML page
    if(acceptHeader && acceptHeader.indexOf('text/html') >= 0){
      // store this particular request for modification
      let oldResponse = await fetch(url.toString(), request)
      // create a new response
      let newResponse = new HTMLRewriter()
        // IMPORTANT: add the preloads to the page
        .on('head', new addPreloads())
        // modify the HTML
        .transform(oldResponse)

        // return the modified page
        return newResponse
    }
  }

  // otherwise just proxy the request unmodified
  return fetch(url.toString(), request)
}

class addPreloads {
  element(element) {
    // prepend it to the specified element
    element.prepend(preloads, {html: true});
  }
}

## wpt-script.txt
// set any cookies (e.g. accept a cookie banner)
setCookie	https://www.example-site.com/	cookies_policy=true

// bypass the transforming the page HTML using a Worker?
addHeader	x-bypass-transform:false

// this is the site we are modifying
addHeader	x-host:www.example-site.com

// when the test encounters www.example-site.com, overide with the worker URL
overrideHost	www.example-site.com	my-worker.username.workers.dev

// go to this page and modify the html
navigate	https://www.example-site.com/examplepage/here
	// add this command to the CLI to enable priority hints
	--enable-experimental-web-platform-features
	// set the site we are modifying
	const site = 'www.example-site.com';

	// do this on a fetch
	addEventListener('fetch', event => {
	const request = event.request
	const url = new URL(request.url)
	event.respondWith(handleRequest(request))
	});

	// the modified preloads to be added back into the head
	var preloads = `
	<link rel="preload" href="https://www.example-site.com/css/print-one.css" as="style" importance="low">
	<link rel="preload" href="https://www.example-site.com/css/print-two.css" as="style" importance="low">
	`;

	async function handleRequest(request) {
	// store the URL
	const url = new URL(request.url);

	// disallow crawlers (write a robots.txt file)
	if(url.pathname === "/robots.txt") {
	return new Response('User-agent: *\nDisallow: /', {status: 200});
	}

	// when overrideHost is used in a WPT script, WPT sets x-host to original host i.e. site we want to proxy
	// store the value of x-host
	const xhost = request.headers.get('x-host');

	// If this header is missing, abort
	if(!xhost) {
	return new Response('x-host header missing', {status: 403});
	}

	// set our hostname to that listed in the xhost header
	url.hostname = xhost;

	// look for header that allows us to bypass the transform entirely
	const bypassTransform = request.headers.get('x-bypass-transform');

	// get the accept header to allow us to examine the type of request it is
	const acceptHeader = request.headers.get('accept');

	// check our x-host header matches the site we are testing and we aren't trying to bypass the transformation
	if(xhost === site && (!bypassTransform \|\| (bypassTransform && bypassTransform.indexOf('true') === -1))){

	// check to see the request is for the HTML page
	if(acceptHeader && acceptHeader.indexOf('text/html') >= 0){
	// store this particular request for modification
	let oldResponse = await fetch(url.toString(), request)
	// create a new response
	let newResponse = new HTMLRewriter()
	// IMPORTANT: add the preloads to the page
	.on('head', new addPreloads())
	// modify the HTML
	.transform(oldResponse)

	// return the modified page
	return newResponse
	}
	}

	// otherwise just proxy the request unmodified
	return fetch(url.toString(), request)
	}

	class addPreloads {
	element(element) {
	// prepend it to the specified element
	element.prepend(preloads, {html: true});
	}
	}
	// set any cookies (e.g. accept a cookie banner)
	setCookie https://www.example-site.com/ cookies_policy=true

	// bypass the transforming the page HTML using a Worker?
	addHeader x-bypass-transform:false

	// this is the site we are modifying
	addHeader x-host:www.example-site.com

	// when the test encounters www.example-site.com, overide with the worker URL
	overrideHost www.example-site.com my-worker.username.workers.dev

	// go to this page and modify the html
	navigate https://www.example-site.com/examplepage/here