Improve coverage

examples/action/.gitignore

@@ -7,7 +7,7 @@ node_modules
 coverage
 
 # production
-dist
+# dist
 
 # misc
 .DS_Store

examples/action/action/scripts.js

@@ -1 +1 @@
-console.log('Hello from the browser action page!')
+console.log("Hello from the browser action page!");

examples/action/package.json

@@ -8,6 +8,5 @@
     "email": "[email protected]",
     "url": "https://cezaraugusto.com"
   },
-  "license": "MIT",
-  "type": "module"
+  "license": "MIT"
 }

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/manifest.json

@@ -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/package.json

@@ -1,13 +1,10 @@
 {
-  "private": true,
-  "name": "special-folders-scripts",
-  "description": "An Extension.js example.",
-  "version": "0.0.1",
-  "author": {
-    "name": "Cezar Augusto",
-    "email": "[email protected]",
-    "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": {}
 }

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

@@ -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/user_scripts/api-script.js

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

programs/cli/install_scripts.sh

@@ -15,32 +15,41 @@ CLI_DIR="$(dirname "$SCRIPT_DIR")"
 SOURCE_README="$ROOT_DIR/README.md"
 TARGET_README="$CLI_DIR/README.md"
 
-# Function to copy file if content is different
-copy_if_different() {
+# Function to copy and modify file if content is different
+copy_and_modify_if_different() {
     local source="$1"
     local target="$2"
 
     if [ -f "$source" ]; then
         if [ -f "$target" ]; then
             # Compare files
             if ! cmp -s "$source" "$target"; then
-                cp "$source" "$target"
-                echo "[Extension.js setup] File $(basename "$source") copied to $target"
+                # Create a temporary file
+                TMP_FILE=$(mktemp)
+                # Copy and modify the content
+                sed -e 's/width="20%"/width="15.5%"/' \
+                    -e '/\[coverage-image\].*coverage-url\]/d' \
+                    "$source" > "$TMP_FILE"
+                # Move the modified content to target
+                mv "$TMP_FILE" "$target"
+                echo "[Extension.js setup] File $(basename "$source") copied and modified to $target"
             else
                 echo "[Extension.js setup] File $(basename "$source") haven't changed. Skipping copy..."
             fi
         else
-            # Target doesn't exist, copy directly
-            cp "$source" "$target"
-            echo "[Extension.js setup] File $(basename "$source") copied to $target"
+            # Target doesn't exist, create with modifications
+            sed -e 's/width="20%"/width="15.5%"/' \
+                -e '/\[coverage-image\].*coverage-url\]/d' \
+                "$source" > "$target"
+            echo "[Extension.js setup] File $(basename "$source") copied and modified to $target"
         fi
     else
         echo "Error: Source file $source not found"
         exit 1
     fi
 }
 
-# Copy README.md
-copy_if_different "$SOURCE_README" "$TARGET_README"
+# Copy and modify README.md
+copy_and_modify_if_different "$SOURCE_README" "$TARGET_README"
 
-echo '►►► All tasks completed'
+echo '►►► All tasks completed'

programs/develop/rslib.config.ts

@@ -10,11 +10,6 @@ export default defineConfig({
         __dirname,
         './webpack/plugin-extension/feature-html/steps/ensure-hmr-for-scripts.ts'
       ),
-      // Scripts Plugin Loaders
-      'add-hmr-accept-code': path.resolve(
-        __dirname,
-        './webpack/plugin-extension/feature-scripts/steps/add-hmr-accept-code.ts'
-      ),
       'deprecated-shadow-root': path.resolve(
         __dirname,
         './webpack/plugin-extension/feature-scripts/steps/deprecated-shadow-root.ts'

programs/develop/vitest.config.ts

@@ -13,7 +13,10 @@ export default defineConfig({
     testTimeout: 120e3,
     globals: true,
     environment: 'node',
-    include: ['webpack/**/__spec__/**/*.spec.ts', 'build.spec.ts'],
+    include: [
+      'webpack/**/__spec__/**/*.spec.ts',
+       'build.spec.ts'
+    ],
     coverage: {
       provider: 'v8',
       reporter: ['text', 'json', 'html'],
@@ -23,7 +26,9 @@ export default defineConfig({
         '**/*.d.ts',
         '**/*.test.ts',
         '**/*.spec.ts',
+        '**/__spec__/**',
         '**/types/**',
+        '**/constants.ts',
         '**/messages.ts'
       ]
     }