WIP

.eslintignore

@@ -38,4 +38,6 @@ __TESTS__
 __test__
 __tests__
 **/copyTypesFolder.js
-**/copyMarkdownFilesToCli.js
+**/copyMarkdownFilesToCli.js
+**/copyTailwindConfig.js
+**/content.tsx

packages/common-errors-plugin/steps/compilationErrorHandlers.ts

@@ -27,6 +27,7 @@ export function handleCantResolveError(
   const manifest = require(manifestPath)
   const cantResolveMsg = 'Module not found: Error:'
 
+  console.log('aaslkjadsakdjasdlsajda', error.message)
   if (error.message.includes(cantResolveMsg)) {
     const link = 'https://docs.extensioncreate.com/n/features/special-folders'
     const customMessage =

packages/eslint-config-extension-create/package.json

@@ -13,7 +13,7 @@
     "eslint-plugin-n": "^16.6.2",
     "eslint-plugin-prettier": "^5.1.3",
     "eslint-plugin-promise": "^6.1.1",
-    "typescript": "^5.3.3"
+    "typescript": "5.3.3"
   },
   "publishConfig": {
     "access": "public"

packages/html-plugin/lib/getAssetsFromHtml.ts

@@ -14,6 +14,12 @@ export default function getAssetsFromHtml(
   htmlFilePath: string,
   htmlContent?: string
 ) {
+  if (!htmlFilePath) {
+  console.log(
+    'aslkdjakldjasajkldslksajdlasjdlasjdlsajdlkasjdlaskjdsalkjdaslkdjsalkdjsakdjlasjdasdlkajldjas'
+  )    
+  process.exit(1)
+  }
   const htmlString =
     htmlContent || fs.readFileSync(htmlFilePath, {encoding: 'utf8'})
   const htmlDocument = parse5utils.parse(htmlString)

packages/html-plugin/steps/AddScriptsAndStylesToCompilation.ts

@@ -42,6 +42,7 @@ export default class AddScriptsAndStylesToCompilation {
         )
 
         if (compiler.options.mode === 'development') {
+          //
           const hmrScript = path.resolve(__dirname, 'minimum-script-file.mjs')
           fileAssets.push(hmrScript)
         }

packages/html-plugin/steps/ThrowIfRecompileIsNeeded.ts

@@ -1,4 +1,5 @@
 import path from 'path'
+import fs from 'fs'
 import type webpack from 'webpack'
 import manifestFields from 'browser-extension-manifest-fields'
 
@@ -9,6 +10,7 @@ import {
 } from '../types'
 import getAssetsFromHtml from '../lib/getAssetsFromHtml'
 import error from '../helpers/errors'
+import {manifestFieldError} from '../helpers/messages'
 
 export default class ThrowIfRecompileIsNeeded {
   public readonly manifestPath: string
@@ -41,7 +43,13 @@ export default class ThrowIfRecompileIsNeeded {
   private storeInitialHtmlAssets(htmlFields: Record<string, any>) {
     Object.entries(htmlFields).forEach(([key, resource]) => {
       const htmlFile = resource?.html as string
+
       if (htmlFile) {
+        if (!fs.existsSync(htmlFile)) {
+          console.error(manifestFieldError(key, htmlFile))
+          process.exit(1)
+        }
+
         this.initialHtmlAssets[htmlFile] = {
           js: getAssetsFromHtml(htmlFile)?.js || [],
           css: getAssetsFromHtml(htmlFile)?.css || []

packages/manifest-compat-plugin/handleRuntimeErrors/handleInsecureCSPValueError.ts

@@ -1,7 +1,7 @@
 import webpack from 'webpack'
 import parseCSP from 'content-security-policy-parser'
 import {bold, cyan, yellow, blue} from '@colors/colors'
-import {ManifestBase} from '../manifest-types'
+import {type ManifestBase} from '../manifest-types'
 
 export default function handleInsecureCSPValueError(
   manifest: ManifestBase

packages/manifest-compat-plugin/handleRuntimeErrors/handleWrongWebResourceFormatError.ts

@@ -1,6 +1,6 @@
 import webpack from 'webpack'
 import {bold, yellow} from '@colors/colors'
-import {ManifestBase} from '../manifest-types'
+import {type ManifestBase} from '../manifest-types'
 import {getManifestDocumentationURL} from '../helpers/getDocUrl'
 
 export default function handleWrongWebResourceFormatError(

packages/manifest-compat-plugin/handleRuntimeErrors/index.ts

@@ -1,7 +1,7 @@
-import webpack from 'webpack'
+import type webpack from 'webpack'
 import handleInsecureCSPValueError from './handleInsecureCSPValueError'
 import handleWrongWebResourceFormatError from './handleWrongWebResourceFormatError'
-import {ManifestBase} from '../manifest-types'
+import {type ManifestBase} from '../manifest-types'
 
 export default function handleRuntimeErrors(
   compilation: webpack.Compilation,

packages/manifest-compat-plugin/handleSchemaErrors/handleDeprecatedError.ts

@@ -1,15 +1,15 @@
-import {WebpackError, Compilation} from 'webpack'
-import {ErrorObject} from 'ajv'
+import {WebpackError, type Compilation} from 'webpack'
+import {type ErrorObject} from 'ajv'
 import {yellow, bold} from '@colors/colors'
 import {getManifestDocumentationURL} from '../helpers/getDocUrl'
 
 function deprecatedMessage(
   browser: string,
   errorData: ErrorObject<string, Record<string, any>, unknown> | undefined
 ) {
-  const schemaPath = errorData?.schemaPath as string
-  const splitSchemaPath = schemaPath.split('/')
-  const field = splitSchemaPath.slice(splitSchemaPath.length - 2).shift()
+  const schemaPath = errorData?.schemaPath
+  const splitSchemaPath = schemaPath?.split('/')
+  const field = splitSchemaPath?.slice(splitSchemaPath.length - 2).shift()
   const hintMessage = `Update your ${yellow(
     'manifest.json'
   )} file to run your extension.`

packages/manifest-compat-plugin/handleSchemaErrors/handleInvalidFieldTypeError.ts

@@ -1,5 +1,5 @@
-import {WebpackError, Compilation} from 'webpack'
-import {ErrorObject} from 'ajv'
+import {WebpackError, type Compilation} from 'webpack'
+import {type ErrorObject} from 'ajv'
 import {bold, yellow, cyan} from '@colors/colors'
 import {getManifestDocumentationURL} from '../helpers/getDocUrl'
 
@@ -8,7 +8,7 @@ export function invalidFieldType(
   browser: string
 ) {
   const field = errorData?.instancePath.replaceAll('/', '.').slice(1) || ''
-  const type = errorData?.params.type
+  const type: string = errorData?.params.type
   const namespace = yellow(field?.split('.')[0] || '')
 
   return `Field ${yellow(field)} must be of type ${cyan(type)}.

packages/manifest-compat-plugin/handleSchemaErrors/handleRequiredFieldError.ts

@@ -1,5 +1,5 @@
-import {WebpackError, Compilation} from 'webpack'
-import {ErrorObject} from 'ajv'
+import {WebpackError, type Compilation} from 'webpack'
+import {type ErrorObject} from 'ajv'
 import {yellow, bold} from '@colors/colors'
 import {getManifestDocumentationURL} from '../helpers/getDocUrl'
 

packages/manifest-compat-plugin/handleSchemaErrors/index.ts

@@ -5,7 +5,7 @@ import addCustomFormats from './lib/customValidators'
 import handleRequiredFieldError from './handleRequiredFieldError'
 import handleInvalidFieldTypeError from './handleInvalidFieldTypeError'
 import handleDeprecatedError from './handleDeprecatedError'
-import {ManifestBase} from '../manifest-types'
+import {type ManifestBase} from '../manifest-types'
 
 export default function handleSchemaErrors(
   compilation: Compilation,

packages/manifest-compat-plugin/module.ts

@@ -3,7 +3,7 @@ import {type Compiler} from 'webpack'
 import {type ManifestCompatInterface} from './types'
 import handleSchemaErrors from './handleSchemaErrors'
 import handleRuntimeErrors from './handleRuntimeErrors'
-import {ManifestBase} from './manifest-types'
+import {type ManifestBase} from './manifest-types'
 
 export default class ManifestCompatPlugin {
   private readonly options: ManifestCompatInterface

packages/resources-plugin/src/steps/ApplyCommonFileLoaders.ts

@@ -14,10 +14,10 @@ export default class ApplyCommonFileLoaders {
         const [, filename] = runtime.split('/')
         const index = filename.split('-')[1]
 
-        return `web_accessible_resources/resource-${index}/[name].[hash:8][ext]`
+        return `web_accessible_resources/resource-${index}/[name][ext]`
       }
 
-      return `${folderPath}/[name].[hash:8][ext]`
+      return `${folderPath}/[name][ext]`
     }
 
     const assetLoaders = [

packages/run-chrome-extension/extensions/manager-extension/welcome.html

@@ -24,12 +24,10 @@ <h1 style="font-size: 4.2em">
         Extension<br>
         <a href="#"><span id="extensionName"></a><br>
         created 🔥</h1>
-      <p>Enjoy creating extensions with zero configuration and no learning curve.</p>
+      <p id="extensionDescription"></p>
       <p>
         Designed with practicality and fast prototyping in mind, <a href="https://github.com/cezaraugusto/extension-create">🧩 extension-create</a> is a development tool for browser extensions, allowing developers to create cross-browser extensions with built-in support for TypeScript, auto-reload, and more.
       </p>
-      <p>To see the extension details, <a id="closeTab" href="#">close this tab</a>. Welcome!</p>
-
       <button id="learnMore">🧩 Learn more about developing cross-browser extensions</button>
     </div>
     <script src="welcome.js"></script>

packages/run-chrome-extension/extensions/manager-extension/welcome.js

@@ -16,15 +16,14 @@ async function getUserExtension() {
 async function onStartup() {
   const userExtension = await getUserExtension()
   const extensionName = document.getElementById('extensionName')
+  const extensionDescription = document.getElementById('extensionDescription')
+
   extensionName.innerText = userExtension[0].name
   extensionName.title = `• Name: ${userExtension[0].name}
-• ID: ${userExtension[0].id}
-• Manifest Version: ${userExtension[0].manifest_version}
-• Version: ${userExtension[0].version}`
+  • ID: ${userExtension[0].id}
+  • Version: ${userExtension[0].version}`
 
-  document.getElementById('closeTab').addEventListener('click', () => {
-    window.close()
-  })
+  extensionDescription.innerText = userExtension[0].description
 
   const learnMore = document.getElementById('learnMore')
   learnMore.addEventListener('click', () => {

packages/run-chrome-extension/steps/SetupReloadStrategy/ApplyManifestDevDefaults/patchCSP.ts

@@ -1,13 +1,13 @@
 import parse from 'content-security-policy-parser'
-import {ManifestBase} from '../../../manifest-types'
+import {type ManifestBase} from '../../../manifest-types'
 
 export function patchV2CSP(manifest: ManifestBase) {
   let policy: string | undefined = manifest.content_security_policy
 
   if (!policy) {
     return (
       "script-src 'self' 'unsafe-eval' blob: filesystem:; " +
-      "object-src 'self' blob: filesystem:; " //+
+      "object-src 'self' blob: filesystem:; " // +
     )
   }
 
@@ -21,13 +21,7 @@ export function patchV2CSP(manifest: ManifestBase) {
   if (!csp['script-src'].includes("'unsafe-eval'")) {
     csp['script-src'].push("'unsafe-eval'")
   }
-  // if (!csp['connect-src']) {
-  //   csp['connect-src'] = ["'self' ws:"]
-  // } else {
-  //   if (!csp['connect-src'].includes('ws:')) {
-  //     csp['connect-src'].push('ws:')
-  //   }
-  // }
+
   for (const k in csp) {
     policy += `${k} ${csp[k].join(' ')};`
   }
@@ -38,30 +32,20 @@ export function patchV2CSP(manifest: ManifestBase) {
 
 export function patchV3CSP(manifest: ManifestBase) {
   // Extract the CSP for extension_pages
-  let policy: {extension_pages: string} | undefined =
+  const policy: {extension_pages: string} | undefined =
     manifest.content_security_policy
 
   // Check if a policy exists, if not, apply a default one
   if (!policy) {
     return {
-      extension_pages: "script-src 'self'; " + "object-src 'self'; " //+ "connect-src 'self' ws:;"
+      extension_pages: "script-src 'self'; " + "object-src 'self'; " // + "connect-src 'self' ws:;"
     }
   }
 
   // Parse the CSP to a manageable format
   const csp = parse(policy.extension_pages)
   let extensionPagesPolicy = ''
 
-  // Ensure 'connect-src' is present and includes 'ws:' if not already
-  const hasConnectSrc = csp['connect-src'] && csp['connect-src'].length > 0
-  // if (hasConnectSrc) {
-  //   if (!csp['connect-src'].includes('ws:')) {
-  //     csp['connect-src'].push('ws:')
-  //   }
-  // } else {
-  //   csp['connect-src'] = ["'self'", 'ws:']
-  // }
-
   // Rebuild the CSP string
   for (const directive in csp) {
     extensionPagesPolicy += `${directive} ${csp[directive].join(' ')}; `

packages/run-edge-extension/extensions/manager-extension/welcome.js

@@ -16,15 +16,14 @@ async function getUserExtension() {
 async function onStartup() {
   const userExtension = await getUserExtension()
   const extensionName = document.getElementById('extensionName')
+  const extensionDescription = document.getElementById('extensionDescription')
   extensionName.innerText = userExtension[0].name
   extensionName.title = `• Name: ${userExtension[0].name}
 • ID: ${userExtension[0].id}
 • Manifest Version: ${userExtension[0].manifest_version}
 • Version: ${userExtension[0].version}`
 
-  document.getElementById('closeTab').addEventListener('click', () => {
-    window.close()
-  })
+  extensionDescription.innerText = userExtension[0].description
 
   const learnMore = document.getElementById('learnMore')
   learnMore.addEventListener('click', () => {

packages/run-edge-extension/steps/SetupReloadStrategy/ApplyManifestDevDefaults/patchCSP.ts

@@ -1,5 +1,5 @@
 import parse from 'content-security-policy-parser'
-import {ManifestBase} from '../../../manifest-types'
+import {type ManifestBase} from '../../../manifest-types'
 
 export function patchV2CSP(manifest: ManifestBase) {
   let policy: string | undefined = manifest.content_security_policy
@@ -31,7 +31,7 @@ export function patchV2CSP(manifest: ManifestBase) {
 
 export function patchV3CSP(manifest: ManifestBase) {
   // Extract the CSP for extension_pages
-  let policy: {extension_pages: string} | undefined =
+  const policy: {extension_pages: string} | undefined =
     manifest.content_security_policy
 
   if (!policy) {