Skip to content

Commit 2852c64

Browse files
Add WebSocket sample (GoogleChrome#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
1 parent e8d2613 commit 2852c64

File tree

5 files changed

+85
-0
lines changed

5 files changed

+85
-0
lines changed
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
# Chrome extension WebSocket example
2+
3+
This example demonstrates how to use WebSockets in a MV3 Chrome Extension. Starting with Chrome version M116, WebSocket
4+
activity will extend the service worker lifetime. In previous Chrome versions, the service worker will become inactive
5+
while waiting for messages and disconnect the WebSocket.
6+
7+
## Running this extension
8+
9+
1. Clone this repository.
10+
2. Load this directory in Chrome as an [unpacked extension](https://developer.chrome.com/docs/extensions/mv3/getstarted/development-basics/#load-unpacked).
11+
3. Pin the extension from the extension menu.
12+
4. Click the extension's action icon to start a web socket connection.
13+
5. Click the extension's action again to stop the web socket connection.
14+
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.
Loading
Loading
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
{
2+
"name": "WebSocket Demo",
3+
"description": "How to use WebSockets in your Chrome Extension.",
4+
"version": "1.0",
5+
"manifest_version": 3,
6+
"minimum_chrome_version": "116",
7+
"action": {
8+
"default_icon": "icons/socket-inactive.png"
9+
},
10+
"background": {
11+
"service_worker": "service-worker.js",
12+
"type": "module"
13+
}
14+
}
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,57 @@
1+
const TEN_SECONDS_MS = 10 * 1000;
2+
let webSocket = null;
3+
4+
// Make sure the Glitch demo server is running
5+
fetch('https://chrome-extension-websockets.glitch.me/', { mode: 'no-cors' });
6+
7+
// Toggle WebSocket connection on action button click
8+
// Send a message every 10 seconds, the ServiceWorker will
9+
// be kept alive as long as messages are being sent.
10+
chrome.action.onClicked.addListener(async () => {
11+
if (webSocket) {
12+
disconnect();
13+
} else {
14+
connect();
15+
keepAlive();
16+
}
17+
});
18+
19+
function connect() {
20+
webSocket = new WebSocket('wss://chrome-extension-websockets.glitch.me/ws');
21+
22+
webSocket.onopen = (event) => {
23+
chrome.action.setIcon({ path: 'icons/socket-active.png' });
24+
};
25+
26+
webSocket.onmessage = (event) => {
27+
console.log(event.data);
28+
};
29+
30+
webSocket.onclose = (event) => {
31+
chrome.action.setIcon({ path: 'icons/socket-inactive.png' });
32+
console.log('websocket connection closed');
33+
webSocket = null;
34+
};
35+
}
36+
37+
function disconnect() {
38+
if (webSocket) {
39+
webSocket.close();
40+
}
41+
}
42+
43+
function keepAlive() {
44+
const keepAliveIntervalId = setInterval(
45+
() => {
46+
if (webSocket) {
47+
console.log('ping');
48+
webSocket.send('ping');
49+
} else {
50+
clearInterval(keepAliveIntervalId);
51+
}
52+
},
53+
// It's important to pick an interval that's shorter than 30s, to
54+
// avoid that the service worker becomes inactive.
55+
TEN_SECONDS_MS
56+
);
57+
}

0 commit comments

Comments
 (0)