Improve coverage

Author: cezaraugusto

examples/new/newtab/scripts.js

@@ -1 +1 @@
-console.log('Hello from the new tab page!')
+console.log('Hello from the new tab page')

examples/special-folders-scripts/content/scripts.js

@@ -0,0 +1,83 @@
+import logo from '../images/logo.svg'
+
+let unmount
+
+if (import.meta.webpackHot) {
+  import.meta.webpackHot?.accept()
+  import.meta.webpackHot?.dispose(() => unmount?.())
+}
+
+console.log('hello from content_scripts')
+
+if (document.readyState === 'complete') {
+  unmount = initial() || (() => {})
+} else {
+  document.addEventListener('readystatechange', () => {
+    if (document.readyState === 'complete') unmount = initial() || (() => {})
+  })
+}
+
+function initial() {
+  const rootDiv = document.createElement('div')
+  rootDiv.id = 'extension-root'
+  document.body.appendChild(rootDiv)
+
+  // Injecting content_scripts inside a shadow dom
+  // prevents conflicts with the host page's styles.
+  // This way, styles from the extension won't leak into the host page.
+  const shadowRoot = rootDiv.attachShadow({mode: 'open'})
+
+  const styleElement = document.createElement('style')
+  shadowRoot.appendChild(styleElement)
+  fetchCSS().then((response) => (styleElement.textContent = response))
+
+  if (import.meta.webpackHot) {
+    import.meta.webpackHot?.accept('./styles.css', () => {
+      fetchCSS().then((response) => (styleElement.textContent = response))
+    })
+  }
+
+  // Create container div
+  const contentDiv = document.createElement('div')
+  contentDiv.className = 'content_script'
+
+  // Create and append logo image
+  const img = document.createElement('img')
+  img.className = 'content_logo'
+  img.src = logo
+  contentDiv.appendChild(img)
+
+  // Create and append title
+  const title = document.createElement('h1')
+  title.className = 'content_title'
+  title.textContent = 'Welcome to your Special Folders (Scripts) Extension'
+  contentDiv.appendChild(title)
+
+  // Create and append description paragraph
+  const desc = document.createElement('p')
+  desc.className = 'content_description'
+  desc.innerHTML = 'Learn more about creating cross-browser extensions at '
+
+  const link = document.createElement('a')
+
+  link.href = 'https://extension.js.org'
+  link.target = '_blank'
+  link.textContent = 'https://extension.js.org'
+
+  desc.appendChild(link)
+  contentDiv.appendChild(desc)
+
+  // Append the content div to shadow root
+  shadowRoot.appendChild(contentDiv)
+
+  return () => {
+    rootDiv.remove()
+  }
+}
+
+async function fetchCSS() {
+  const cssUrl = new URL('./styles.css', import.meta.url)
+  const response = await fetch(cssUrl)
+  const text = await response.text()
+  return response.ok ? text : Promise.reject(text)
+}

examples/special-folders-scripts/content/styles.css

@@ -0,0 +1,41 @@
+.content_script {
+  color: #c9c9c9;
+  background-color: #0a0c10;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 9;
+  width: 315px;
+  margin: 1rem;
+  padding: 2rem 1rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1em;
+  border-radius: 6px;
+  z-index: 9999;
+}
+
+.content_logo {
+  width: 72px;
+}
+
+.content_title {
+  font-size: 1.85em;
+  line-height: 1.1;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  font-weight: 700;
+  margin: 0;
+}
+
+.content_description {
+  font-size: small;
+  margin: 0;
+}
+
+.content_description a {
+  text-decoration: none;
+  border-bottom: 2px solid #c9c9c9;
+  color: #e5e7eb;
+  margin: 0;
+}

examples/special-folders-scripts/images/logo.svg

@@ -7,11 +7,20 @@
   "icons": {
     "48": "images/extension_48.png"
   },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content/scripts.js"]
+    }
+  ],
   "background": {
     "chromium:service_worker": "background.js",
     "firefox:scripts": ["background.js"]
   },
   "permissions": ["scripting", "webNavigation", "storage"],
   "host_permissions": ["https://extension.js.org/*"],
-  "action": {}
+  "action": {},
+  "user_scripts": {
+    "api_script": "user_scripts/api-script.js"
+  }
 }

examples/special-folders-scripts/manifest.json

@@ -1,13 +1,12 @@
 {
-  "private": true,
-  "name": "special-folders-scripts",
-  "description": "An Extension.js example.",
-  "version": "0.0.1",
-  "author": {
-    "name": "Cezar Augusto",
-    "email": "boss@cezaraugusto.net",
-    "url": "https://cezaraugusto.com"
+  "name": "scripts-plugin-test",
+  "version": "1.0.0",
+  "description": "Test fixture for ScriptsPlugin",
+  "scripts": {
+    "build": "extension.js build",
+    "dev": "extension.js dev"
   },
-  "license": "MIT",
-  "type": "module"
+  "devDependencies": {
+    "@extension.js/webpack-plugin": "workspace:*"
+  }
 }

examples/special-folders-scripts/package.json

@@ -1,2 +1,9 @@
+// Included script with HMR
+if (module.hot) {
+  module.hot.accept()
+}
+
+console.log('Included script loaded')
+
 const text = `Your browser extension injected this script`
 alert(text)

examples/special-folders-scripts/scripts/content-script.js

@@ -0,0 +1,6 @@
+// User script with HMR
+if (module.hot) {
+  module.hot.accept()
+}
+
+console.log('User script loaded')

examples/special-folders-scripts/user_scripts/api-script.js

@@ -0,0 +1,78 @@
+import {describe, it, expect, vi, beforeEach, afterEach} from 'vitest'
+import {AddScripts} from '../steps/add-scripts'
+import {type Compiler} from '@rspack/core'
+import * as fs from 'fs'
+import * as path from 'path'
+
+// Mock fs module
+vi.mock('fs', () => ({
+  readFileSync: vi.fn(),
+  existsSync: vi.fn()
+}))
+
+// Mock path module
+vi.mock('path', () => ({
+  join: vi.fn(),
+  dirname: vi.fn()
+}))
+
+describe('AddScripts', () => {
+  const mockManifestPath = '/path/to/manifest.json'
+  const mockManifest = {
+    content_scripts: [
+      {
+        matches: ['<all_urls>'],
+        js: ['content.js']
+      }
+    ],
+    background: {
+      service_worker: 'background.js'
+    }
+  }
+
+  beforeEach(() => {
+    vi.clearAllMocks()
+    // Mock process.exit to prevent test termination
+    vi.spyOn(process, 'exit').mockImplementation((code) => {
+      throw new Error(`process.exit called with code ${code}`)
+    })
+    vi.mocked(fs.existsSync).mockReturnValue(true)
+    vi.mocked(fs.readFileSync).mockReturnValue(JSON.stringify(mockManifest))
+    vi.mocked(path.dirname).mockReturnValue('/path/to')
+    vi.mocked(path.join).mockImplementation((...args) => args.join('/'))
+  })
+
+  afterEach(() => {
+    vi.restoreAllMocks()
+  })
+
+  it('should process content scripts from manifest', () => {
+    const compiler = {
+      options: {
+        entry: {}
+      }
+    } as unknown as Compiler
+
+    const addScripts = new AddScripts({manifestPath: mockManifestPath})
+    addScripts.apply(compiler)
+
+    expect(fs.existsSync).toHaveBeenCalledWith(mockManifestPath)
+    expect(fs.readFileSync).toHaveBeenCalledWith(mockManifestPath, 'utf8')
+    expect(compiler.options.entry).toHaveProperty('content_scripts/content-0')
+  })
+
+  it('should process background service worker', () => {
+    const compiler = {
+      options: {
+        entry: {}
+      }
+    } as unknown as Compiler
+
+    const addScripts = new AddScripts({manifestPath: mockManifestPath})
+    addScripts.apply(compiler)
+
+    expect(fs.existsSync).toHaveBeenCalledWith(mockManifestPath)
+    expect(fs.readFileSync).toHaveBeenCalledWith(mockManifestPath, 'utf8')
+    expect(compiler.options.entry).toHaveProperty('background/service_worker')
+  })
+})