Add WebSocket sample (#976)

* Add WebSocket sample

This sample demonstrates how to use a websocket in a service worker.

* add minimum chrome version

* Address comments

* add more detail to the readme
* make sure glitch instance is booted

* fix spelling

functional-samples/tutorial.websockets/README.md

@@ -0,0 +1,14 @@
+# Chrome extension WebSocket example
+
+This example demonstrates how to use WebSockets in a MV3 Chrome Extension. Starting with Chrome version M116, WebSocket
+activity will extend the service worker lifetime. In previous Chrome versions, the service worker will become inactive
+while waiting for messages and disconnect the WebSocket.
+
+## Running this extension
+
+1. Clone this repository.
+2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
+3. Pin the extension from the extension menu.
+4. Click the extension's action icon to start a web socket connection.
+5. Click the extension's action again to stop the web socket connection.
+6. Check the [service worker status](https://developer.chrome.com/docs/extensions/mv3/tut_debugging/#sw-status) to see when the service worker is active/inactive.

functional-samples/tutorial.websockets/manifest.json

@@ -0,0 +1,14 @@
+{
+  "name": "WebSocket Demo",
+  "description": "How to use WebSockets in your Chrome Extension.",
+  "version": "1.0",
+  "manifest_version": 3,
+  "minimum_chrome_version": "116",
+  "action": {
+    "default_icon": "icons/socket-inactive.png"
+  },
+  "background": {
+    "service_worker": "service-worker.js",
+    "type": "module"
+  }
+}

functional-samples/tutorial.websockets/service-worker.js

@@ -0,0 +1,57 @@
+const TEN_SECONDS_MS = 10 * 1000;
+let webSocket = null;
+
+// Make sure the Glitch demo server is running
+fetch('https://chrome-extension-websockets.glitch.me/', { mode: 'no-cors' });
+
+// Toggle WebSocket connection on action button click
+// Send a message every 10 seconds, the ServiceWorker will
+// be kept alive as long as messages are being sent.
+chrome.action.onClicked.addListener(async () => {
+  if (webSocket) {
+    disconnect();
+  } else {
+    connect();
+    keepAlive();
+  }
+});
+
+function connect() {
+  webSocket = new WebSocket('wss://chrome-extension-websockets.glitch.me/ws');
+
+  webSocket.onopen = (event) => {
+    chrome.action.setIcon({ path: 'icons/socket-active.png' });
+  };
+
+  webSocket.onmessage = (event) => {
+    console.log(event.data);
+  };
+
+  webSocket.onclose = (event) => {
+    chrome.action.setIcon({ path: 'icons/socket-inactive.png' });
+    console.log('websocket connection closed');
+    webSocket = null;
+  };
+}
+
+function disconnect() {
+  if (webSocket) {
+    webSocket.close();
+  }
+}
+
+function keepAlive() {
+  const keepAliveIntervalId = setInterval(
+    () => {
+      if (webSocket) {
+        console.log('ping');
+        webSocket.send('ping');
+      } else {
+        clearInterval(keepAliveIntervalId);
+      }
+    },
+    // It's important to pick an interval that's shorter than 30s, to
+    // avoid that the service worker becomes inactive.
+    TEN_SECONDS_MS
+  );
+}