Update types for content-security-policy-parser and preact

Author: cezaraugusto

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

@@ -7,26 +7,25 @@ export function patchV2CSP(manifest: ManifestBase) {
   if (!policy) {
     return (
       "script-src 'self' 'unsafe-eval' blob: filesystem:; " +
-      "object-src 'self' blob: filesystem:; " // +
+      "object-src 'self' blob: filesystem:; "
     )
   }
 
-  const csp = parse(policy)
+  let csp = parse(policy)
   policy = ''
 
   // Modification logic remains the same
-  if (!csp['script-src']) {
-    csp['script-src'] = ["'self' 'unsafe-eval' blob: filesystem:"]
+  if (!csp.get('script-src')) {
+    csp.set('script-src', ["'self' 'unsafe-eval' blob: filesystem:"])
   }
-  if (!csp['script-src'].includes("'unsafe-eval'")) {
-    csp['script-src'].push("'unsafe-eval'")
+  if (!csp.get('script-src')?.includes("'unsafe-eval'")) {
+    csp.set('script-src', ['unsafe-eval'])
   }
 
   for (const k in csp) {
-    policy += `${k} ${csp[k].join(' ')};`
+    policy += `${k} ${csp.get(k)?.join(' ')};`
   }
 
-  // Update the CSP in the manifest
   return policy
 }
 
@@ -35,23 +34,19 @@ export function patchV3CSP(manifest: ManifestBase) {
   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'; "
     }
   }
 
-  // Parse the CSP to a manageable format
   const csp = parse(policy.extension_pages)
   let extensionPagesPolicy = ''
 
-  // Rebuild the CSP string
   for (const directive in csp) {
-    extensionPagesPolicy += `${directive} ${csp[directive].join(' ')}; `
+    extensionPagesPolicy += `${directive} ${csp.get(directive)?.join(' ')}; `
   }
 
-  // Update the manifest's CSP
   return {
     extension_pages: extensionPagesPolicy.trim()
   }

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

@@ -11,19 +11,19 @@ export function patchV2CSP(manifest: ManifestBase) {
     )
   }
 
-  const csp = parse(policy)
+  let csp = parse(policy)
   policy = ''
 
   // Modification logic remains the same
-  if (!csp['script-src']) {
-    csp['script-src'] = ["'self' 'unsafe-eval' blob: filesystem:"]
+  if (!csp.get('script-src')) {
+    csp.set('script-src', ["'self' 'unsafe-eval' blob: filesystem:"])
   }
-  if (!csp['script-src'].includes("'unsafe-eval'")) {
-    csp['script-src'].push("'unsafe-eval'")
+  if (!csp.get('script-src')?.includes("'unsafe-eval'")) {
+    csp.set('script-src', ['unsafe-eval'])
   }
 
   for (const k in csp) {
-    policy += `${k} ${csp[k].join(' ')};`
+    policy += `${k} ${csp.get(k)?.join(' ')};`
   }
 
   return policy
@@ -44,7 +44,7 @@ export function patchV3CSP(manifest: ManifestBase) {
   let extensionPagesPolicy = ''
 
   for (const directive in csp) {
-    extensionPagesPolicy += `${directive} ${csp[directive].join(' ')}; `
+    extensionPagesPolicy += `${directive} ${csp.get(directive)?.join(' ')}; `
   }
 
   return {

packages/run-firefox-addon/package.json

@@ -49,7 +49,7 @@
   "dependencies": {
     "@colors/colors": "^1.6.0",
     "browser-extension-manifest-fields": "*",
-    "content-security-policy-parser": "^0.4.1",
+    "content-security-policy-parser": "^0.6.0",
     "firefox-location": "^1.0.2",
     "firefox-profile": "^4.6.0",
     "fx-runner": "1.4.0",

packages/run-firefox-addon/steps/SetupReloadStrategy/ApplyManifestDevDefaults/patchCSP.ts

@@ -7,26 +7,25 @@ export function patchV2CSP(manifest: ManifestBase) {
   if (!policy) {
     return (
       "script-src 'self' 'unsafe-eval' blob: filesystem:; " +
-      "object-src 'self' blob: filesystem:; " // +
+      "object-src 'self' blob: filesystem:; "
     )
   }
 
-  const csp = parse(policy)
+  let csp = parse(policy)
   policy = ''
 
   // Modification logic remains the same
-  if (!csp['script-src']) {
-    csp['script-src'] = ["'self' 'unsafe-eval' blob: filesystem:"]
+  if (!csp.get('script-src')) {
+    csp.set('script-src', ["'self' 'unsafe-eval' blob: filesystem:"])
   }
-  if (!csp['script-src'].includes("'unsafe-eval'")) {
-    csp['script-src'].push("'unsafe-eval'")
+  if (!csp.get('script-src')?.includes("'unsafe-eval'")) {
+    csp.set('script-src', ['unsafe-eval'])
   }
 
   for (const k in csp) {
-    policy += `${k} ${csp[k].join(' ')};`
+    policy += `${k} ${csp.get(k)?.join(' ')};`
   }
 
-  // Update the CSP in the manifest
   return policy
 }
 
@@ -35,23 +34,19 @@ export function patchV3CSP(manifest: ManifestBase) {
   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'; "
     }
   }
 
-  // Parse the CSP to a manageable format
   const csp = parse(policy.extension_pages)
   let extensionPagesPolicy = ''
 
-  // Rebuild the CSP string
   for (const directive in csp) {
-    extensionPagesPolicy += `${directive} ${csp[directive].join(' ')}; `
+    extensionPagesPolicy += `${directive} ${csp.get(directive)?.join(' ')}; `
   }
 
-  // Update the manifest's CSP
   return {
     extension_pages: extensionPagesPolicy.trim()
   }

programs/create/package.json

@@ -34,8 +34,10 @@
     "prefers-yarn": "^1.0.1"
   },
   "devDependencies": {
+    "@preact/signals": "^1.2.3",
     "@types/cross-spawn": "^6.0.6",
     "@types/react-dom": "^18.2.18",
+    "preact": "^10.22.0",
     "tsconfig": "*",
     "tsup": "^8.0.1",
     "typescript": "5.3.3"

programs/create/templates/preact-typescript/template/content/ContentApp.tsx

@@ -7,90 +7,87 @@ import typescriptLogo from '../public/typescript.png'
 import tailwindLogo from '../public/tailwind.png'
 import chromeWindowBg from '../public/chromeWindow.png'
 
-export default class ContentApp extends Component {
-  private isdialogOpen = signal(true)
+export default function ContentApp() {
+  const isdialogOpen = signal(true)
 
-  constructor() {
-    super()
-    this.setIsDialogOpen(true)
+  const setIsDialogOpen = (bool: boolean) => {
+    isdialogOpen.value = bool
   }
 
-  setIsDialogOpen(bool: boolean) {
-    this.isdialogOpen.value = bool
+  if (!isdialogOpen) {
+    return (
+      <div className="mx-auto p-6">
+        <button
+          onClick={() => setIsDialogOpen(true)}
+          className="bg-white rounded-md p-3 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
+        >
+          🧩 Open content script hint <span aria-hidden="true">+</span>
+        </button>
+      </div>
+    )
   }
 
-  render() {
-    return this.isdialogOpen.value ? (
-      <div className="mx-auto max-w-7xl md:px-0 lg:p-6">
-        <div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
-          <div className="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
-            <div className="w-[108rem] flex-none flex justify-end">
-              <picture>
-                <img
-                  src={tailwindBg}
-                  alt=""
-                  className="w-[90rem] flex-none max-w-none hidden dark:block"
-                  decoding="async"
-                />
-              </picture>
-            </div>
-          </div>
-          <div className="mx-auto max-w-md text-center lg:py-12 lg:mx-0 lg:flex-auto lg:text-left">
-            <div className="flex items-center justify-center space-x-4 my-4 mx-auto">
-              <img
-                alt="Preact logo"
-                src={preactLogo}
-                className="relative inline-block w-12"
-              />
-              <div className="text-3xl text-white">+</div>
+  return (
+    <div className="mx-auto max-w-7xl md:px-0 lg:p-6">
+      <div className="relative isolate overflow-hidden bg-gray-900 px-6 pt-16 shadow-2xl lg:rounded-3xl md:pt-24 md:h-full sm:h-[100vh] lg:flex lg:gap-x-20 lg:px-24 lg:pt-0">
+        <div className="absolute z-20 top-0 inset-x-0 flex justify-center overflow-hidden pointer-events-none">
+          <div className="w-[108rem] flex-none flex justify-end">
+            <picture>
               <img
-                alt="TypeScript logo"
-                src={typescriptLogo}
-                className="relative inline-block w-12"
+                src={tailwindBg}
+                alt=""
+                className="w-[90rem] flex-none max-w-none hidden dark:block"
+                decoding="async"
               />
-              <div className="text-3xl text-white">+</div>
-              <img
-                alt="Tailwind logo"
-                src={tailwindLogo}
-                className="relative inline-block w-12"
-              />
-            </div>
-            <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
-              This is a content script running Preact, TypeScript, and
-              Tailwind.css.
-            </h2>
-            <p className="mt-6 text-lg leading-8 text-gray-300">
-              Learn more about creating cross-browser extensions by{' '}
-              <button
-                onClick={() => this.setIsDialogOpen(false)}
-                className="underline hover:no-underline
-                    "
-              >
-                closing this hint
-              </button>
-              .
-            </p>
+            </picture>
           </div>
-          <div className="relative mt-16 h-80 lg:mt-8">
+        </div>
+        <div className="mx-auto max-w-md text-center lg:py-12 lg:mx-0 lg:flex-auto lg:text-left">
+          <div className="flex items-center justify-center space-x-4 my-4 mx-auto">
             <img
-              className="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
-              src={chromeWindowBg}
-              alt="Chrome window screenshot"
-              width="1824"
-              height="1080"
+              alt="Preact logo"
+              src={preactLogo}
+              className="relative inline-block w-12"
+            />
+            <div className="text-3xl text-white">+</div>
+            <img
+              alt="TypeScript logo"
+              src={typescriptLogo}
+              className="relative inline-block w-12"
+            />
+            <div className="text-3xl text-white">+</div>
+            <img
+              alt="Tailwind logo"
+              src={tailwindLogo}
+              className="relative inline-block w-12"
             />
           </div>
+          <h2 className="text-3xl font-bold tracking-tight text-white sm:text-4xl">
+            This is a content script running React, TypeScript, and
+            Tailwind.css.
+          </h2>
+          <p className="mt-6 text-lg leading-8 text-gray-300">
+            Learn more about creating cross-browser extensions by{' '}
+            <button
+              onClick={() => setIsDialogOpen(false)}
+              className="underline hover:no-underline
+            "
+            >
+              closing this hint
+            </button>
+            .
+          </p>
+        </div>
+        <div className="relative mt-16 h-80 lg:mt-8">
+          <img
+            className="absolute left-0 top-0 w-[57rem] max-w-none rounded-md bg-white/5 ring-1 ring-white/10"
+            src={chromeWindowBg}
+            alt="Chrome window screenshot"
+            width="1824"
+            height="1080"
+          />
         </div>
       </div>
-    ) : (
-      <div className="mx-auto p-6">
-        <button
-          onClick={() => this.setIsDialogOpen(true)}
-          className="bg-white rounded-md p-3 text-sm font-semibold text-gray-900 shadow-sm hover:bg-gray-100 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-white"
-        >
-          🧩 Open content script hint <span aria-hidden="true">+</span>
-        </button>
-      </div>
-    )
-  }
+    </div>
+  )
 }