diff --git a/create-aleo-app/template-extension/rollup.config.js b/create-aleo-app/template-extension/rollup.config.js
index fb6fcb1f1..2aa3e6ecb 100644
--- a/create-aleo-app/template-extension/rollup.config.js
+++ b/create-aleo-app/template-extension/rollup.config.js
@@ -3,7 +3,8 @@ import { importMetaAssets } from "@web/rollup-plugin-import-meta-assets";
export default {
input: {
- background: "./src/background.js",
+ service_worker: "./src/service_worker.js",
+ offscreen: "./src/offscreen.js",
worker: "./src/worker.js",
},
output: {
@@ -14,7 +15,7 @@ export default {
plugins: [
nodeResolve(),
importMetaAssets({
- exclude: "./src/background.js",
+ exclude: "./src/offscreen.js",
}),
],
};
diff --git a/create-aleo-app/template-extension/src/background.js b/create-aleo-app/template-extension/src/offscreen.js
similarity index 100%
rename from create-aleo-app/template-extension/src/background.js
rename to create-aleo-app/template-extension/src/offscreen.js
diff --git a/create-aleo-app/template-extension/src/service_worker.js b/create-aleo-app/template-extension/src/service_worker.js
new file mode 100644
index 000000000..ec2a96aa9
--- /dev/null
+++ b/create-aleo-app/template-extension/src/service_worker.js
@@ -0,0 +1,20 @@
+async function createOffscreen(path) {
+ const offscreenUrl = chrome.runtime.getURL(path);
+
+ const existingContexts = await chrome.runtime.getContexts({
+ contextTypes: ["OFFSCREEN_DOCUMENT"],
+ documentUrls: [offscreenUrl]
+ });
+
+ if (existingContexts.length > 0) {
+ return;
+ }
+
+ await chrome.offscreen.createDocument({
+ url: offscreenUrl,
+ reasons: ["WORKERS"],
+ justification: "Top-level await and Workers cannot be used in service workers, but they are necessary to use the Aleo SDK.",
+ });
+}
+
+createOffscreen("offscreen.html");
diff --git a/create-aleo-app/template-extension/static/manifest.json b/create-aleo-app/template-extension/static/manifest.json
index 97e596e4b..07aadada7 100644
--- a/create-aleo-app/template-extension/static/manifest.json
+++ b/create-aleo-app/template-extension/static/manifest.json
@@ -1,10 +1,16 @@
{
- "manifest_version": 2,
+ "manifest_version": 3,
"name": "extension-starter",
"version": "0.1.0",
"description": "Example for using Aleo in a Chrome / Firefox extension",
"background": {
- "page": "background.html"
+ "service_worker": "./js/service_worker.js",
+ "type": "module"
},
- "content_security_policy": "script-src 'self' 'wasm-eval'; object-src 'self'"
+ "permissions": [
+ "offscreen"
+ ],
+ "content_security_policy": {
+ "extension_pages": "default-src 'self' 'wasm-unsafe-eval'; connect-src https://s3-us-west-1.amazonaws.com/testnet3.parameters/shifted-powers-of-beta-16.usrs.d99bcb3"
+ }
}
diff --git a/create-aleo-app/template-extension/static/background.html b/create-aleo-app/template-extension/static/offscreen.html
similarity index 61%
rename from create-aleo-app/template-extension/static/background.html
rename to create-aleo-app/template-extension/static/offscreen.html
index f3e5a2f63..b9fbf5a7a 100644
--- a/create-aleo-app/template-extension/static/background.html
+++ b/create-aleo-app/template-extension/static/offscreen.html
@@ -4,6 +4,6 @@
-
+