kltdwrds/sw-warning.css Secret

## sw-warning.css
html {
    width: 100%;
    height: min-content;
    margin: 0;
    border: 0;
}

body {
    width: 100%;
    height: min-content;
    margin: 0;
}

a {
    color: inherit;
    text-decoration: none;
  }

.sw-warning-content {
    height: min-content;
    width: 100%;
    text-align: center;
    font-size: 14px;
    font-weight: 600;
    padding: 12px;
    color: #FFFFFF;
    background: linear-gradient(269.95deg, #8BC7F3 -0.71%, #1E81CD 100%);
    cursor: pointer;
}

.underline {
    text-decoration: underline;
}

## sw-warning.html
<!DOCTYPE html>
<meta charset=utf-8>
<title>SW Warning</title>
<head>
  <link rel="stylesheet" href="sw-warning.css">
</head>
<a id="sw-warning-anchor" href="https://chrome.google.com/webstore/detail/ID" target="_blank">
  <div id="sw-warning-content" class="sw-warning-content">
      Extension needs to be updated -
      <strong class="underline">Click here</strong> to reinstall
  </div>
</a>
<script src="swWarning.js"></script>

## sw-warning.ts
const showWarning = (): void => {
  window.parent?.postMessage("showWarning", "*");
};

const hideWarning = (): void => {
  window.parent?.postMessage("hideWarning", "*");
};

const checkServiceWorker = (): void => {
  navigator.serviceWorker
    .getRegistrations()
    .then((registrations) => {
      if (registrations?.length > 0) {
        hideWarning();
        return;
      }
      showWarning();
    })
    .catch((reason) => {
      console.warn(reason);
    });
};

const runServiceWorkerIntervalCheck = (): void => {
  setInterval(checkServiceWorker, 10000);
  const anchor = window.document.getElementById(
    "sw-warning-anchor"
  ) as HTMLAnchorElement;
  anchor.href = `https://chrome.google.com/webstore/detail/${your_ext_name}/${chrome.runtime.id}`;
};

window.addEventListener("load", runServiceWorkerIntervalCheck);

## swWarningContentScript.ts

const swWarning = document.createElement("iframe");
const BH_CLASSNAME_VISIBLE = "visible";
const BH_CLASSNAME_TRANSFORM = "warning-transform";
swWarning.id = "sw-warning";
swWarning.className = "sw-warning";

const injectSwWarning = (): void => {
  swWarning.src = chrome.runtime.getURL("sw-warning.html");
  document.body.appendChild(swWarning);
};

const handleMessage = (event): void => {
  if (event.origin !== `chrome-extension://${chrome.runtime.id}`) {
    return;
  }

  if (event.data === "showWarning") {
    swWarning?.classList.add(BH_CLASSNAME_VISIBLE);
    document.body.classList.add(BH_CLASSNAME_TRANSFORM);
  } else if (event.data === "hideWarning") {
    swWarning?.classList.remove(BH_CLASSNAME_VISIBLE);
    document.body.classList.remove(BH_CLASSNAME_TRANSFORM);
  }
};
window.addEventListener("message", handleMessage);

window.addEventListener("load", injectSwWarning);
	html {
	width: 100%;
	height: min-content;
	margin: 0;
	border: 0;
	}

	body {
	width: 100%;
	height: min-content;
	margin: 0;
	}

	a {
	color: inherit;
	text-decoration: none;
	}

	.sw-warning-content {
	height: min-content;
	width: 100%;
	text-align: center;
	font-size: 14px;
	font-weight: 600;
	padding: 12px;
	color: #FFFFFF;
	background: linear-gradient(269.95deg, #8BC7F3 -0.71%, #1E81CD 100%);
	cursor: pointer;
	}

	.underline {
	text-decoration: underline;
	}
	<!DOCTYPE html>
	<meta charset=utf-8>
	<title>SW Warning</title>
	<head>
	<link rel="stylesheet" href="sw-warning.css">
	</head>
	<a id="sw-warning-anchor" href="https://chrome.google.com/webstore/detail/ID" target="_blank">
	<div id="sw-warning-content" class="sw-warning-content">
	Extension needs to be updated -
	<strong class="underline">Click here</strong> to reinstall
	</div>
	</a>
	<script src="swWarning.js"></script>
	const showWarning = (): void => {
	window.parent?.postMessage("showWarning", "*");
	};

	const hideWarning = (): void => {
	window.parent?.postMessage("hideWarning", "*");
	};

	const checkServiceWorker = (): void => {
	navigator.serviceWorker
	.getRegistrations()
	.then((registrations) => {
	if (registrations?.length > 0) {
	hideWarning();
	return;
	}
	showWarning();
	})
	.catch((reason) => {
	console.warn(reason);
	});
	};

	const runServiceWorkerIntervalCheck = (): void => {
	setInterval(checkServiceWorker, 10000);
	const anchor = window.document.getElementById(
	"sw-warning-anchor"
	) as HTMLAnchorElement;
	anchor.href = `https://chrome.google.com/webstore/detail/${your_ext_name}/${chrome.runtime.id}`;
	};

	window.addEventListener("load", runServiceWorkerIntervalCheck);

	const swWarning = document.createElement("iframe");
	const BH_CLASSNAME_VISIBLE = "visible";
	const BH_CLASSNAME_TRANSFORM = "warning-transform";
	swWarning.id = "sw-warning";
	swWarning.className = "sw-warning";

	const injectSwWarning = (): void => {
	swWarning.src = chrome.runtime.getURL("sw-warning.html");
	document.body.appendChild(swWarning);
	};

	const handleMessage = (event): void => {
	if (event.origin !== `chrome-extension://${chrome.runtime.id}`) {
	return;
	}

	if (event.data === "showWarning") {
	swWarning?.classList.add(BH_CLASSNAME_VISIBLE);
	document.body.classList.add(BH_CLASSNAME_TRANSFORM);
	} else if (event.data === "hideWarning") {
	swWarning?.classList.remove(BH_CLASSNAME_VISIBLE);
	document.body.classList.remove(BH_CLASSNAME_TRANSFORM);
	}
	};
	window.addEventListener("message", handleMessage);

	window.addEventListener("load", injectSwWarning);