diff --git a/examples/action-chatgpt/.gitignore b/examples/action-chatgpt/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/action-chatgpt/.gitignore
+++ b/examples/action-chatgpt/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/action/.gitignore b/examples/action/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/action/.gitignore
+++ b/examples/action/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/config-babel/.gitignore b/examples/config-babel/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/config-babel/.gitignore
+++ b/examples/config-babel/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/config-stylelint/.gitignore b/examples/config-stylelint/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/config-stylelint/.gitignore
+++ b/examples/config-stylelint/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-css-module/.gitignore b/examples/content-css-module/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content-css-module/.gitignore
+++ b/examples/content-css-module/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-css-module/template.spec.ts b/examples/content-css-module/template.spec.ts
new file mode 100644
index 00000000..b5ab2661
--- /dev/null
+++ b/examples/content-css-module/template.spec.ts
@@ -0,0 +1,39 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-css-module'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name content_script-box', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('body > div.content_script-box')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h1 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  await test.expect(h1).toHaveText('Change the background-color ⬇')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(51, 51, 51)')
+})
diff --git a/examples/content-extension-config/.gitignore b/examples/content-extension-config/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content-extension-config/.gitignore
+++ b/examples/content-extension-config/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-extension-config/template.spec.ts b/examples/content-extension-config/template.spec.ts
new file mode 100644
index 00000000..e5c572c2
--- /dev/null
+++ b/examples/content-extension-config/template.spec.ts
@@ -0,0 +1,72 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-extension-config'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name extension-root', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('#extension-root')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h2 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  await test
+    .expect(h2)
+    .toHaveText(
+      'This is a content script running React, TypeScript, and Tailwind.css'
+    )
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h2.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(255, 255, 255)')
+})
+
+test('should load all images successfully', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const images = page.locator('#extension-root img')
+  const imageElements = await images.all()
+
+  const results: boolean[] = []
+
+  for (const image of imageElements) {
+    const naturalWidth = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalWidth : 0
+      },
+      await image.elementHandle()
+    )
+
+    const naturalHeight = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalHeight : 0
+      },
+      await image.elementHandle()
+    )
+
+    const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0
+    results.push(loadedSuccessfully)
+  }
+
+  await test.expect(results.every((result) => result)).toBeTruthy()
+})
diff --git a/examples/content-less/.gitignore b/examples/content-less/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content-less/.gitignore
+++ b/examples/content-less/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-less/template.spec.ts b/examples/content-less/template.spec.ts
new file mode 100644
index 00000000..2ee82485
--- /dev/null
+++ b/examples/content-less/template.spec.ts
@@ -0,0 +1,39 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-less'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name content_script-box', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('body > div.content_script-box')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h1 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  await test.expect(h1).toHaveText('Change the background-color ⬇')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(51, 51, 51)')
+})
diff --git a/examples/content-main-world/.gitignore b/examples/content-main-world/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content-main-world/.gitignore
+++ b/examples/content-main-world/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-main-world/template.spec.ts b/examples/content-main-world/template.spec.ts
new file mode 100644
index 00000000..6b570619
--- /dev/null
+++ b/examples/content-main-world/template.spec.ts
@@ -0,0 +1,39 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-main-world'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name content_script-box', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('body > div.content_script-box')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h1 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  await test.expect(h1).toHaveText('Main World')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(51, 51, 51)')
+})
diff --git a/examples/content-preact/.gitignore b/examples/content-preact/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content-preact/.gitignore
+++ b/examples/content-preact/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-preact/template.spec.ts b/examples/content-preact/template.spec.ts
new file mode 100644
index 00000000..271fd789
--- /dev/null
+++ b/examples/content-preact/template.spec.ts
@@ -0,0 +1,72 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-preact'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name extension-root', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('#extension-root')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h2 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  await test
+    .expect(h2)
+    .toHaveText(
+      'This is a content script running Preact, TypeScript, and Tailwind.css.'
+    )
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h2.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(255, 255, 255)')
+})
+
+test('should load all images successfully', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const images = page.locator('#extension-root img')
+  const imageElements = await images.all()
+
+  const results: boolean[] = []
+
+  for (const image of imageElements) {
+    const naturalWidth = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalWidth : 0
+      },
+      await image.elementHandle()
+    )
+
+    const naturalHeight = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalHeight : 0
+      },
+      await image.elementHandle()
+    )
+
+    const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0
+    results.push(loadedSuccessfully)
+  }
+
+  await test.expect(results.every((result) => result)).toBeTruthy()
+})
diff --git a/examples/content-react-svgr/.gitignore b/examples/content-react-svgr/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content-react-svgr/.gitignore
+++ b/examples/content-react-svgr/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-react/.gitignore b/examples/content-react/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content-react/.gitignore
+++ b/examples/content-react/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-react/template.spec.ts b/examples/content-react/template.spec.ts
new file mode 100644
index 00000000..a7aa6406
--- /dev/null
+++ b/examples/content-react/template.spec.ts
@@ -0,0 +1,72 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-react'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name extension-root', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('#extension-root')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h2 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  await test
+    .expect(h2)
+    .toHaveText(
+      'This is a content script running React, TypeScript, and Tailwind.css'
+    )
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h2.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(255, 255, 255)')
+})
+
+test('should load all images successfully', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const images = page.locator('#extension-root img')
+  const imageElements = await images.all()
+
+  const results: boolean[] = []
+
+  for (const image of imageElements) {
+    const naturalWidth = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalWidth : 0
+      },
+      await image.elementHandle()
+    )
+
+    const naturalHeight = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalHeight : 0
+      },
+      await image.elementHandle()
+    )
+
+    const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0
+    results.push(loadedSuccessfully)
+  }
+
+  await test.expect(results.every((result) => result)).toBeTruthy()
+})
diff --git a/examples/content-sass-module/.gitignore b/examples/content-sass-module/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content-sass-module/.gitignore
+++ b/examples/content-sass-module/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-sass-module/template.spec.ts b/examples/content-sass-module/template.spec.ts
new file mode 100644
index 00000000..7fcd9357
--- /dev/null
+++ b/examples/content-sass-module/template.spec.ts
@@ -0,0 +1,39 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-sass-module'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name content_script-box', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('body > div.content_script-box')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h1 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  await test.expect(h1).toHaveText('Change the background-color ⬇')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(51, 51, 51)')
+})
diff --git a/examples/content-sass/.gitignore b/examples/content-sass/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content-sass/.gitignore
+++ b/examples/content-sass/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-sass/template.spec.ts b/examples/content-sass/template.spec.ts
new file mode 100644
index 00000000..101fc820
--- /dev/null
+++ b/examples/content-sass/template.spec.ts
@@ -0,0 +1,39 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-sass'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name content_script-box', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('body > div.content_script-box')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h1 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  await test.expect(h1).toHaveText('Change the background-color ⬇')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(51, 51, 51)')
+})
diff --git a/examples/content-shadow-dom/.gitignore b/examples/content-shadow-dom/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content-shadow-dom/.gitignore
+++ b/examples/content-shadow-dom/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-shadow-dom/template.spec.ts b/examples/content-shadow-dom/template.spec.ts
new file mode 100644
index 00000000..2a1e3b50
--- /dev/null
+++ b/examples/content-shadow-dom/template.spec.ts
@@ -0,0 +1,70 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-shadow-dom'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name extension-root', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('#extension-root')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h2 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  await test
+    .expect(h2)
+    .toHaveText('This is a content script running Tailwind.css.')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h2.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(255, 255, 255)')
+})
+
+test('should load all images successfully', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const images = page.locator('#extension-root img')
+  const imageElements = await images.all()
+
+  const results: boolean[] = []
+
+  for (const image of imageElements) {
+    const naturalWidth = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalWidth : 0
+      },
+      await image.elementHandle()
+    )
+
+    const naturalHeight = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalHeight : 0
+      },
+      await image.elementHandle()
+    )
+
+    const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0
+    results.push(loadedSuccessfully)
+  }
+
+  await test.expect(results.every((result) => result)).toBeTruthy()
+})
diff --git a/examples/content-tailwind/.gitignore b/examples/content-tailwind/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content-tailwind/.gitignore
+++ b/examples/content-tailwind/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-tailwind/template.spec.ts b/examples/content-tailwind/template.spec.ts
new file mode 100644
index 00000000..e3b0ca27
--- /dev/null
+++ b/examples/content-tailwind/template.spec.ts
@@ -0,0 +1,70 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-tailwind'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name extension-root', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('#extension-root')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h2 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  await test
+    .expect(h2)
+    .toHaveText('This is a content script running Tailwind.css.')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h2.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(255, 255, 255)')
+})
+
+test('should load all images successfully', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const images = page.locator('#extension-root img')
+  const imageElements = await images.all()
+
+  const results: boolean[] = []
+
+  for (const image of imageElements) {
+    const naturalWidth = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalWidth : 0
+      },
+      await image.elementHandle()
+    )
+
+    const naturalHeight = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalHeight : 0
+      },
+      await image.elementHandle()
+    )
+
+    const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0
+    results.push(loadedSuccessfully)
+  }
+
+  await test.expect(results.every((result) => result)).toBeTruthy()
+})
diff --git a/examples/content-typescript/.gitignore b/examples/content-typescript/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content-typescript/.gitignore
+++ b/examples/content-typescript/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-typescript/template.spec.ts b/examples/content-typescript/template.spec.ts
new file mode 100644
index 00000000..b91cb570
--- /dev/null
+++ b/examples/content-typescript/template.spec.ts
@@ -0,0 +1,39 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-typescript'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name content_script-box', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('body > div.content_script-box')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h1 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  await test.expect(h1).toHaveText('Change the background-color ⬇')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(51, 51, 51)')
+})
diff --git a/examples/content-vue/.gitignore b/examples/content-vue/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content-vue/.gitignore
+++ b/examples/content-vue/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content-vue/template.spec.ts b/examples/content-vue/template.spec.ts
new file mode 100644
index 00000000..5ddd38a5
--- /dev/null
+++ b/examples/content-vue/template.spec.ts
@@ -0,0 +1,72 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content-vue'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name extension-root', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('#extension-root')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h2 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  await test
+    .expect(h2)
+    .toHaveText(
+      'This is a content script running Vue, TypeScript, and Tailwind.css.'
+    )
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h2 = page.locator('#extension-root h2')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h2.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(255, 255, 255)')
+})
+
+test('should load all images successfully', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const images = page.locator('#extension-root img')
+  const imageElements = await images.all()
+
+  const results: boolean[] = []
+
+  for (const image of imageElements) {
+    const naturalWidth = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalWidth : 0
+      },
+      await image.elementHandle()
+    )
+
+    const naturalHeight = await page.evaluate(
+      (img) => {
+        return img ? (img as HTMLImageElement).naturalHeight : 0
+      },
+      await image.elementHandle()
+    )
+
+    const loadedSuccessfully = naturalWidth > 0 && naturalHeight > 0
+    results.push(loadedSuccessfully)
+  }
+
+  await test.expect(results.every((result) => result)).toBeTruthy()
+})
diff --git a/examples/content/.gitignore b/examples/content/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/content/.gitignore
+++ b/examples/content/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/content/template.spec.ts b/examples/content/template.spec.ts
new file mode 100644
index 00000000..164a642d
--- /dev/null
+++ b/examples/content/template.spec.ts
@@ -0,0 +1,39 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/content'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the class name content_script-box', async ({
+  page
+}) => {
+  await page.goto('https://extension.js.org/')
+  const div = page.locator('body > div.content_script-box')
+  await test.expect(div).toBeVisible()
+})
+
+test('should exist an h1 element with specified content', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  await test.expect(h1).toHaveText('Change the background-color ⬇')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('https://extension.js.org/')
+  const h1 = page.locator('body > div.content_script-box > h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(51, 51, 51)')
+})
diff --git a/examples/declarative_net_request/.gitignore b/examples/declarative_net_request/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/declarative_net_request/.gitignore
+++ b/examples/declarative_net_request/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/init/.gitignore b/examples/init/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/init/.gitignore
+++ b/examples/init/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/locales/.gitignore b/examples/locales/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/locales/.gitignore
+++ b/examples/locales/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/new-crypto/.gitignore b/examples/new-crypto/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/new-crypto/.gitignore
+++ b/examples/new-crypto/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/new-crypto/template.spec.ts b/examples/new-crypto/template.spec.ts
new file mode 100644
index 00000000..ffd4e845
--- /dev/null
+++ b/examples/new-crypto/template.spec.ts
@@ -0,0 +1,33 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/new-crypto'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the welcome message text', async ({
+  page
+}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  await test.expect(h1).toHaveText('Welcome to your Crypto Extension.')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(74, 74, 74)')
+})
diff --git a/examples/new-less/.gitignore b/examples/new-less/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/new-less/.gitignore
+++ b/examples/new-less/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/new-less/template.spec.ts b/examples/new-less/template.spec.ts
new file mode 100644
index 00000000..bd3eea49
--- /dev/null
+++ b/examples/new-less/template.spec.ts
@@ -0,0 +1,33 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/new-less'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the welcome message text', async ({
+  page
+}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  await test.expect(h1).toHaveText('Welcome to your LESS Extension')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(74, 74, 74)')
+})
diff --git a/examples/new-preact/.gitignore b/examples/new-preact/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/new-preact/.gitignore
+++ b/examples/new-preact/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/new-preact/template.spec.ts b/examples/new-preact/template.spec.ts
new file mode 100644
index 00000000..e204f768
--- /dev/null
+++ b/examples/new-preact/template.spec.ts
@@ -0,0 +1,33 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/new-preact'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the welcome message text', async ({
+  page
+}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  await test.expect(h1).toHaveText('Welcome to your Preact Extension.')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(74, 74, 74)')
+})
diff --git a/examples/new-react-router/.gitignore b/examples/new-react-router/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/new-react-router/.gitignore
+++ b/examples/new-react-router/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/new-react-router/template.spec.ts b/examples/new-react-router/template.spec.ts
new file mode 100644
index 00000000..4a2d36c8
--- /dev/null
+++ b/examples/new-react-router/template.spec.ts
@@ -0,0 +1,35 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/new-react-router'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the welcome message text', async ({
+  page
+}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  await test
+    .expect(h1)
+    .toHaveText('Welcome to your React Router DOM Extension.')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(74, 74, 74)')
+})
diff --git a/examples/new-react/.gitignore b/examples/new-react/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/new-react/.gitignore
+++ b/examples/new-react/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/new-react/template.spec.ts b/examples/new-react/template.spec.ts
new file mode 100644
index 00000000..20ad5a6b
--- /dev/null
+++ b/examples/new-react/template.spec.ts
@@ -0,0 +1,33 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/new-react'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the welcome message text', async ({
+  page
+}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  await test.expect(h1).toHaveText('Welcome to your React Extension.')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(74, 74, 74)')
+})
diff --git a/examples/new-sass/.gitignore b/examples/new-sass/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/new-sass/.gitignore
+++ b/examples/new-sass/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/new-sass/template.spec.ts b/examples/new-sass/template.spec.ts
new file mode 100644
index 00000000..ac20a6ee
--- /dev/null
+++ b/examples/new-sass/template.spec.ts
@@ -0,0 +1,33 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/new-sass'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the welcome message text', async ({
+  page
+}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  await test.expect(h1).toHaveText('Welcome to your New Extension')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(74, 74, 74)')
+})
diff --git a/examples/new-tailwind/.gitignore b/examples/new-tailwind/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/new-tailwind/.gitignore
+++ b/examples/new-tailwind/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/new-tailwind/template.spec.ts b/examples/new-tailwind/template.spec.ts
new file mode 100644
index 00000000..4ded3d4b
--- /dev/null
+++ b/examples/new-tailwind/template.spec.ts
@@ -0,0 +1,35 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/new-tailwind'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the welcome message text', async ({
+  page
+}) => {
+  await page.goto('chrome://newtab/')
+  const h2 = page.locator('h2')
+  await test
+    .expect(h2)
+    .toHaveText('This is a new tab page running React and Tailwind.css.')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('chrome://newtab/')
+  const h2 = page.locator('h2')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h2.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(255, 255, 255)')
+})
diff --git a/examples/new-typescript/.gitignore b/examples/new-typescript/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/new-typescript/.gitignore
+++ b/examples/new-typescript/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/new-typescript/template.spec.ts b/examples/new-typescript/template.spec.ts
new file mode 100644
index 00000000..856f6e91
--- /dev/null
+++ b/examples/new-typescript/template.spec.ts
@@ -0,0 +1,33 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/new-typescript'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the welcome message text', async ({
+  page
+}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  await test.expect(h1).toHaveText('Welcome to your TypeScript Extension.')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(74, 74, 74)')
+})
diff --git a/examples/new-vue/.gitignore b/examples/new-vue/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/new-vue/.gitignore
+++ b/examples/new-vue/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/new-vue/template.spec.ts b/examples/new-vue/template.spec.ts
new file mode 100644
index 00000000..752c49f3
--- /dev/null
+++ b/examples/new-vue/template.spec.ts
@@ -0,0 +1,33 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/new-vue'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the welcome message text', async ({
+  page
+}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  await test.expect(h1).toHaveText('Welcome to your Vue Extension.')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(74, 74, 74)')
+})
diff --git a/examples/new/.gitignore b/examples/new/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/new/.gitignore
+++ b/examples/new/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/new/template.spec.ts b/examples/new/template.spec.ts
new file mode 100644
index 00000000..df15f538
--- /dev/null
+++ b/examples/new/template.spec.ts
@@ -0,0 +1,33 @@
+import path from 'path'
+import {execSync} from 'child_process'
+import {extensionFixtures} from '../extension-fixtures'
+
+const exampleDir = 'examples/new'
+const pathToExtension = path.join(__dirname, `dist/chrome`)
+const test = extensionFixtures(pathToExtension, true)
+
+test.beforeAll(async () => {
+  execSync(`pnpm extension build ${exampleDir}`, {
+    cwd: path.join(__dirname, '..')
+  })
+})
+
+test('should exist an element with the welcome message text', async ({
+  page
+}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  await test.expect(h1).toHaveText('Welcome to your New Extension')
+})
+
+test('should exist a default color value', async ({page}) => {
+  await page.goto('chrome://newtab/')
+  const h1 = page.locator('h1')
+  const color = await page.evaluate(
+    (locator) => {
+      return window.getComputedStyle(locator!).getPropertyValue('color')
+    },
+    await h1.elementHandle()
+  )
+  await test.expect(color).toEqual('rgb(74, 74, 74)')
+})
diff --git a/examples/sidebar/.gitignore b/examples/sidebar/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/sidebar/.gitignore
+++ b/examples/sidebar/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/special-folders-pages/.gitignore b/examples/special-folders-pages/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/special-folders-pages/.gitignore
+++ b/examples/special-folders-pages/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/special-folders-scripts/.gitignore b/examples/special-folders-scripts/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/special-folders-scripts/.gitignore
+++ b/examples/special-folders-scripts/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/examples/storage/.gitignore b/examples/storage/.gitignore
index 78f68f9c..5e8c65b7 100644
--- a/examples/storage/.gitignore
+++ b/examples/storage/.gitignore
@@ -29,4 +29,3 @@ yarn-error.log*
 
 # extension.js
 extension-env.d.ts
-template.spec.ts
diff --git a/programs/create/lib/messages.ts b/programs/create/lib/messages.ts
index d714b9b0..c27e9cd4 100644
--- a/programs/create/lib/messages.ts
+++ b/programs/create/lib/messages.ts
@@ -289,3 +289,10 @@ export function writingDirectoryError(error: any) {
     red(error)
   )
 }
+
+export function cantSetupBuiltInTests(projectName: string, error: any) {
+  return (
+    `${red(`✖︎✖︎✖︎`)} Can't setup built-in tests for ` +
+    `${cyan(projectName)}:\n${red(error)}`
+  )
+}
\ No newline at end of file
diff --git a/programs/create/module.ts b/programs/create/module.ts
index 34ec9e1c..65f496b5 100644
--- a/programs/create/module.ts
+++ b/programs/create/module.ts
@@ -11,6 +11,7 @@ import {writeManifestJson} from './steps/write-manifest-json'
 import {generateExtensionTypes} from './steps/generate-extension-types'
 import {writeGitignore} from './steps/write-gitignore'
 import {initializeGitRepository} from './steps/initialize-git-repository'
+import {setupBuiltInTests} from './steps/setup-built-in-tests'
 
 export interface CreateOptions {
   template: string
@@ -55,6 +56,7 @@ export async function extensionCreate(
     await writeManifestJson(projectPath, projectName)
     await initializeGitRepository(projectPath, projectName)
     await writeGitignore(projectPath)
+    await setupBuiltInTests(projectPath, projectName)
 
     if (utils.isTypeScriptTemplate(template)) {
       await generateExtensionTypes(projectPath, projectName)
diff --git a/programs/create/steps/setup-built-in-tests.ts b/programs/create/steps/setup-built-in-tests.ts
new file mode 100644
index 00000000..f44ceddc
--- /dev/null
+++ b/programs/create/steps/setup-built-in-tests.ts
@@ -0,0 +1,25 @@
+//  ██████╗██████╗ ███████╗ █████╗ ████████╗███████╗
+// ██╔════╝██╔══██╗██╔════╝██╔══██╗╚══██╔══╝██╔════╝
+// ██║     ██████╔╝█████╗  ███████║   ██║   █████╗
+// ██║     ██╔══██╗██╔══╝  ██╔══██║   ██║   ██╔══╝
+// ╚██████╗██║  ██║███████╗██║  ██║   ██║   ███████╗
+//  ╚═════╝╚═╝  ╚═╝╚══════╝╚═╝  ╚═╝   ╚═╝   ╚══════╝
+
+import path from 'path'
+import fs from 'fs/promises'
+import * as messages from '../lib/messages'
+
+export async function setupBuiltInTests(
+  projectPath: string,
+  projectName: string
+) {
+  try {
+    // Remove the existing test spec templates.spec.ts
+    const testSpecPath = path.join(projectPath, 'tests', 'templates.spec.ts')
+    await fs.unlink(testSpecPath)
+  } catch (error: any) {
+    console.error(messages.cantSetupBuiltInTests(projectName, error))
+
+    process.exit(1)
+  }
+}