Improve coverage

Author: cezaraugusto

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": "boss@cezaraugusto.net",
     "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/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,10 @@
 {
-  "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": {}
 }

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)