@@ -20,7 +20,7 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v6
         with:
-          node-version: 16.17
+          node-version: 20
 
       - name: Enable corepack
         run: corepack enable yarn
 
@@ -0,0 +1,5 @@
+# studio-extension-turtlesim version history
+
+## 0.0.0
+
+- Alpha testing
@@ -0,0 +1,3 @@
+# studio-extension-turtlesim
+
+## _A Foxglove Studio Extension_
@@ -0,0 +1,21 @@
+{
+  "name": "studio-extension-turtlesim",
+  "version": "0.0.1",
+  "displayName": "turtlesim",
+  "description": "",
+  "publisher": "Foxglove Inc.",
+  "license": "MPL-2.0",
+  "main": "./dist/extension.js",
+  "scripts": {
+    "foxglove:prepublish": "fox build --mode production",
+    "build": "fox build",
+    "package": "fox build --mode production && fox package",
+    "local-install": "fox build && fox install",
+    "pretest": "fox pretest"
+  },
+  "devDependencies": {
+    "@foxglove/fox": "file:../fox",
+    "@foxglove/studio": "0.11.0",
+    "typescript": "4.3.2"
+  }
+}
@@ -10,21 +10,25 @@ import path from "path";
 export type ElectronFixtures = {
   electronApp: ElectronApplication;
   mainWindow: Page;
+  preInstalledExtensions?: string[];
 };
 
 const WEBPACK_PATH = path.resolve(__dirname, "../../desktop/.webpack");
 
 export const test = base.extend<ElectronFixtures & { electronArgs: string[] }>({
   electronArgs: [],
-  electronApp: async ({ electronArgs }, use) => {
+  preInstalledExtensions: [],
+
+  electronApp: async ({ electronArgs, preInstalledExtensions }, use) => {
     checkBuild(WEBPACK_PATH);
 
-    // Create a new user data directory for each test, which bypasses the `app.requestSingleInstanceLock()`
     const userDataDir = await mkdtemp(path.join(os.tmpdir(), "e2e-test-"));
-
-    // Create a new home directory for each test, which creates a brand new .lcihtblick-suite directory for e2e testing
     const homeDir = await mkdtemp(path.join(os.tmpdir(), "home-e2e-test-"));
 
+    for (const filename of preInstalledExtensions ?? []) {
+      preInstallExtensionInUserFolder(homeDir, filename);
+    }
+
     const app = await electron.launch({
       args: [
         WEBPACK_PATH,
@@ -54,4 +58,23 @@ function checkBuild(webpackPath: string): void {
   }
 }
 
+function preInstallExtensionInUserFolder(homeDir: string, filename: string): void {
+  const source = path.join(process.cwd(), "e2e", "fixtures", "assets", filename);
+
+  if (!fs.existsSync(source)) {
+    throw new Error(`Extension asset not found: ${source}`);
+  }
+
+  const extensionsDir = path.join(homeDir, ".lichtblick-suite", "extensions");
+  fs.mkdirSync(extensionsDir, { recursive: true });
+
+  const stats = fs.statSync(source);
+  if (stats.isDirectory()) {
+    const destDir = path.join(extensionsDir, filename);
+    fs.cpSync(source, destDir, { recursive: true });
+  } else {
+    fs.copyFileSync(source, path.join(extensionsDir, filename));
+  }
+}
+
 export { expect } from "@playwright/test";
@@ -0,0 +1,33 @@
+// SPDX-FileCopyrightText: Copyright (C) 2023-2026 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)<lichtblick@bmwgroup.com>
+// SPDX-License-Identifier: MPL-2.0
+
+import { test, expect } from "../../../fixtures/electron";
+
+const extensionSourceFolder = "lichtblick.suite-extension-turtlesim-0.0.1";
+
+/**
+ * GIVEN turtlesim extension in already on root level folder
+ * WHEN the extensions menu is opened
+ * AND searched for turtlesim
+ * THEN the turtlesim extension should appear on the extensions list
+ */
+test.use({
+  preInstalledExtensions: [extensionSourceFolder],
+});
+
+test("should install an extension (user folder)", async ({ mainWindow }) => {
+  // When
+  await mainWindow.getByTestId("DataSourceDialog").getByTestId("CloseIcon").click();
+
+  await mainWindow.getByTestId("user-button").click();
+  await mainWindow.getByRole("menuitem", { name: "Extensions" }).click();
+  const searchBar = mainWindow.getByPlaceholder("Search Extensions...");
+  await searchBar.fill("turtlesim");
+  const turtlesimExtension = mainWindow
+    .locator('[data-testid="extension-list-entry"]')
+    .filter({ hasText: "turtlesim" })
+    .filter({ hasText: "0.0.1" });
+
+  // Then
+  await expect(turtlesimExtension).toBeVisible();
+});
@@ -0,0 +1,100 @@
+// SPDX-FileCopyrightText: Copyright (C) 2023-2026 Bayerische Motoren Werke Aktiengesellschaft (BMW AG)<lichtblick@bmwgroup.com>
+// SPDX-License-Identifier: MPL-2.0
+
+import { test, expect } from "@playwright/test";
+
+import { loadFiles } from "../../fixtures/load-files";
+
+const MCAP_FILENAME = "example.mcap";
+
+/**
+ * GIVEN a .mcap file and layout are loaded
+ * AND the player time is initialized
+ * WHEN the playback timestamp is manually edited in the player input
+ * AND the new timestamp is confirmed
+ * THEN the URL time parameter should update to the new ISO timestamp
+ */
+
+test("is able to manually edit the timestamp display on the player", async ({ page }) => {
+  // Given
+  const getTimeParam = () => new URL(page.url()).searchParams.get("time");
+
+  await page.goto("/");
+  await loadFiles({ mainWindow: page, filenames: MCAP_FILENAME });
+  const urlInitialTimestamp = "2025-02-26T10:37:15.547000000Z";
+
+  // When
+  await page.evaluate((time) => {
+    const url = new URL(window.location.href);
+    url.searchParams.set("time", time);
+    window.history.replaceState({}, "", url.toString());
+  }, urlInitialTimestamp);
+  await page.waitForURL(() => getTimeParam() === urlInitialTimestamp);
+
+  // Then
+  expect(getTimeParam()).toBe(urlInitialTimestamp);
+
+  // When
+  const timestampInput = page.getByTestId("PlaybackTime-text").locator("input");
+  const newTimestamp = "2025-02-26 10:37:18.499 AM WET";
+  await timestampInput.click();
+  await timestampInput.fill(newTimestamp);
+  await timestampInput.press("Enter");
+  await timestampInput.blur();
+
+  // Then
+  const urlNewTimestamp = "2025-02-26T10:37:18.499000000Z";
+  await page.waitForURL(() => getTimeParam() === urlNewTimestamp);
+  expect(getTimeParam()).toBe(urlNewTimestamp);
+});
+
+/**
+ * GIVEN a .mcap file and layout are loaded
+ * AND the playback time display is switched to epoch format
+ * AND the player time is initialized
+ * WHEN the playback timestamp is manually edited using an epoch value
+ * AND the new timestamp is confirmed
+ * THEN the URL time parameter should update to the corresponding ISO timestamp
+ */
+
+test("is able to manually edit the timestamp display (epoch format) on the player", async ({
+  page,
+}) => {
+  // Given
+  const getTimeParam = () => new URL(page.url()).searchParams.get("time");
+
+  await page.goto("/");
+  await loadFiles({ mainWindow: page, filenames: MCAP_FILENAME });
+  const urlInitialTimestamp = "2025-02-26T10:37:15.547000000Z";
+
+  // When
+  const playerStartingTime = page.getByTestId("PlaybackTime-text").locator("div");
+  // Playback time display needs to be hovered first so clicking on it is possible
+  await playerStartingTime.hover();
+  await page.getByTestId("playback-time-display-toggle-button").click();
+  await page.getByTestId("playback-time-display-option-SEC").click();
+
+  // When
+  await page.evaluate((time) => {
+    const url = new URL(window.location.href);
+    url.searchParams.set("time", time);
+    window.history.replaceState({}, "", url.toString());
+  }, urlInitialTimestamp);
+  await page.waitForURL(() => getTimeParam() === urlInitialTimestamp);
+
+  // Then
+  expect(getTimeParam()).toBe(urlInitialTimestamp);
+
+  // When
+  const timestampInput = page.getByTestId("PlaybackTime-text").locator("input");
+  const newEpochTimestamp = "1740566238.499000000";
+  await timestampInput.click();
+  await timestampInput.fill(newEpochTimestamp);
+  await timestampInput.press("Enter");
+  await timestampInput.blur();
+
+  // Then
+  const urlNewTimestamp = "2025-02-26T10:37:18.499000000Z";
+  await page.waitForURL(() => getTimeParam() === urlNewTimestamp);
+  expect(getTimeParam()).toBe(urlNewTimestamp);
+});
@@ -79,7 +79,8 @@
     "dompurify": "3.2.4",
     "js-yaml": "4.1.1",
     "qs": "6.14.1",
-    "tar": "7.5.4"
+    "tar": "7.5.7",
+    "undici": "6.23.0"
   },
   "devDependencies": {
     "@actions/core": "1.11.1",
Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+# studio-extension-turtlesim`
	`2`	`+`
	`3`	`+## _A Foxglove Studio Extension_`