Add support for LESS Modules

aaa.sh

@@ -0,0 +1,9 @@
+#!/bin/bash
+
+# Set the base directory
+BASE_DIR="./examples"
+
+# Find and delete all "dist" directories inside the ./examples/* directories
+find "$BASE_DIR" -type d -name "dist" -exec rm -rf {} +
+
+echo "All 'dist' directories inside $BASE_DIR have been deleted."

examples/content-less-module/.gitignore

@@ -0,0 +1,31 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+node_modules
+
+# testing
+coverage
+
+# production
+dist
+
+# misc
+.DS_Store
+
+# local env files
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+# lock files
+yarn.lock
+package-lock.json
+
+# debug files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# extension.js
+extension-env.d.ts

examples/content-less-module/background.js

@@ -0,0 +1,21 @@
+console.log('hello from background script')
+
+chrome.runtime.onMessage.addListener((request, sender) => {
+  if (request.action === 'changeBackgroundColor') {
+    changeBackgroundColor(request.color, sender.tab.id)
+  }
+})
+
+function changeBackgroundColor(color, tabId) {
+  chrome.scripting
+    .executeScript({
+      target: {tabId},
+      function: setPageBackgroundColor,
+      args: [color]
+    })
+    .catch(console.error)
+}
+
+function setPageBackgroundColor(color) {
+  document.body.style.backgroundColor = color
+}

examples/content-less-module/content/Logo.module.less

@@ -0,0 +1,18 @@
+.logo {
+  background: white;
+  width: 90px;
+  align-self: flex-start;
+  border: 4px solid;
+  border-color: #ccc;
+  border-radius: 24px;
+  filter: grayscale(1);
+  transition:
+    filter 2s,
+    border-color 2s;
+}
+
+.logo:hover {
+  filter: grayscale(0);
+  border-color: aquamarine;
+}
+

examples/content-less-module/content/scripts.js

@@ -0,0 +1,33 @@
+import extensionJsLogo from '../images/extension_128.png'
+import './styles.less'
+import styles from './Logo.module.less'
+
+console.log('hello from content_scripts')
+
+document.body.innerHTML += `
+<div class="content_script-box">
+  <img class=${styles.logo} src=${extensionJsLogo} />
+  <h1 class="content_script-title">
+    Change the background-color ⬇
+  </h1>
+  <input type="color" class="content_script-colorPicker" id="colorPicker">
+  <p class="content_script-description">
+    Learn more about creating browser extensions at <a
+      className="underline hover:no-underline"
+      href="https://extension.js.org"
+      target="_blank"
+    >
+    https://extension.js.org
+    </a>
+  </p>
+</div>
+`
+
+document.getElementById('colorPicker').addEventListener('input', (event) => {
+  chrome.runtime
+    .sendMessage({
+      action: 'changeBackgroundColor',
+      color: event.target.value
+    })
+    .catch(console.error)
+})

examples/content-less-module/content/styles.less

@@ -0,0 +1,40 @@
+.content_script-box {
+  background: white;
+  position: fixed;
+  right: 0;
+  bottom: 0;
+  z-index: 9;
+  width: 315px;
+  height: 345px;
+  margin: 1em;
+  padding: 1em;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  gap: 1em;
+  box-shadow: 0px 0px 4px 1px #ccc;
+}
+
+.content_script-title {
+  font-size: 1.85em;
+  color: #333;
+  line-height: 1.1;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
+    'Helvetica Neue', Arial, 'Noto Sans', sans-serif;
+  font-weight: 700;
+  overflow-wrap: break-word;
+  word-wrap: break-word;
+  -ms-word-break: break-all;
+  word-break: break-word;
+}
+
+.content_script-description {
+  color: #999;
+}
+
+.content_script-colorPicker {
+  display: block;
+  width: 100%;
+  height: 50px;
+}

examples/content-less-module/manifest.json

@@ -0,0 +1,23 @@
+{
+  "manifest_version": 3,
+  "version": "0.0.1",
+  "name": "Content Scripts LESS Module",
+  "description": "An Extension.js example.",
+  "icons": {
+    "16": "images/extension_16.png",
+    "48": "images/extension_48.png",
+    "128": "images/extension_128.png"
+  },
+  "permissions": ["activeTab", "scripting"],
+  "host_permissions": ["<all_urls>"],
+  "background": {
+    "chromium:service_worker": "background.js",
+    "firefox:scripts": ["background.js"]
+  },
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["content/scripts.js"]
+    }
+  ]
+}

examples/content-less-module/package.json

@@ -0,0 +1,14 @@
+{
+  "private": true,
+  "name": "content-less-module",
+  "description": "An Extension.js example.",
+  "version": "0.0.1",
+  "author": {
+    "name": "Cezar Augusto",
+    "email": "[email protected]",
+    "url": "https://cezaraugusto.com"
+  },
+  "devDependencies": {
+    "less": "^4.2.0"
+  }
+}

examples/content-less-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-less-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)')
+})