Warning
Service worker support in WebGPU is enabled by default in Chrome 124.
If you are using Chrome 123, go to chrome://flags/#enable-experimental-web-platform-features, enable the #enable-experimental-web-platform-features flag, and relaunch the browser.
This example shows how we can create a Chrome extension using WebGPU and service worker.
-
The project structure is as follows:
manifest.json: A required file that lists important information about the structure and behavior of that extension. Here we are using manifest V3.popup.ts: Script of the extension pop-up window.background.ts: Script of the service worker. An extension service worker is loaded when it is needed, and unloaded when it goes dormant.content.js: Content script that interacts with DOM.
-
Run
npm install npm run build
This will create a new directory at
./dist/. To load the extension into Chrome, go to Extensions > Manage Extensions and select Load Unpacked. Add the./dist/directory. You can now pin the extension to your toolbar and use it to chat with your favorite model!
Note: This example disables chatting using the contents of the active tab by default.
To enable it, set useContext in popup.ts to true. More info about this feature can be found
here.
However, if the web content is too large, it might run into issues. We recommend using example.html to
test this feature.