Safari support

examples/data.ts

@@ -462,7 +462,7 @@ const ALL_TEMPLATES_BUT_DEFAULT = ALL_TEMPLATES.filter(
   (template) => template.name !== 'init'
 )
 
-const SUPPORTED_BROWSERS: string[] = ['chrome', 'edge', 'firefox']
+const SUPPORTED_BROWSERS: string[] = ['chrome', 'edge', 'firefox', 'safari']
 
 export {
   SUPPORTED_BROWSERS,

examples/new-env-esm/.env safari

@@ -0,0 +1 @@
+EXTENSION_PUBLIC_DESCRIPTION_TEXT="Safari Extension example"

package.json

@@ -45,4 +45,4 @@
     "turbo": "^2.3.3",
     "typescript": "5.7.2"
   }
-}
+}

programs/cli/cli.ts

@@ -96,7 +96,7 @@ extensionJs
     'what path to use for the browser profile. A boolean value of false sets the profile to the default user profile. Defaults to a fresh profile'
   )
   .option(
-    '--browser <chrome | edge | firefox>',
+    '--browser <chrome | edge | firefox | safari>',
     'specify a browser to preview your extension in production mode. Defaults to `chrome`'
   )
   .option(
@@ -155,7 +155,7 @@ extensionJs
     'what path to use for the browser profile. A boolean value of false sets the profile to the default user profile. Defaults to a fresh profile'
   )
   .option(
-    '--browser <chrome | edge | firefox>',
+    '--browser <chrome | edge | firefox | safari>',
     'specify a browser to preview your extension in production mode. Defaults to `chrome`'
   )
   .option(
@@ -207,7 +207,7 @@ extensionJs
     'what path to use for the browser profile. A boolean value of false sets the profile to the default user profile. Defaults to a fresh profile'
   )
   .option(
-    '--browser <chrome | edge | firefox>',
+    '--browser <chrome | edge | firefox | safari>',
     'specify a browser to preview your extension in production mode. Defaults to `chrome`'
   )
   .option(
@@ -251,7 +251,7 @@ extensionJs
   .usage('build [path-to-remote-extension] [options]')
   .description('Builds the extension for production')
   .option(
-    '--browser <chrome | edge | firefox>',
+    '--browser <chrome | edge | firefox | safari>',
     'specify a browser to preview your extension in production mode. Defaults to `chrome`'
   )
   .option(

programs/cli/package.json

@@ -76,4 +76,4 @@
     "tsup": "^8.3.5",
     "typescript": "5.7.2"
   }
-}
+}

programs/cli/types.ts

@@ -2,8 +2,10 @@ export type BrowsersSupported =
   | 'chrome'
   | 'edge'
   | 'firefox'
+  | 'safari'
   | 'chromium-based'
   | 'gecko-based'
+  | 'webkit-based'
   | 'all'
 
 export interface CreateOptions {

programs/cli/types/index.d.ts

@@ -10,9 +10,11 @@ declare namespace NodeJS {
     readonly EXTENSION_BROWSER:
       | 'chrome'
       | 'edge'
+      | 'safari'
       | 'firefox'
       | 'chromium-based'
       | 'gecko-based'
+      | 'webkit-based'
     readonly EXTENSION_MODE: 'development' | 'production'
   }
 }

programs/develop/commands/commands-lib/config-types.ts

@@ -6,6 +6,8 @@ export type BrowserType =
   | 'firefox'
   | 'chromium-based'
   | 'gecko-based'
+  | 'safari'
+  | 'webkit-based'
 
 export interface BrowserOptionsBase {
   open?: boolean
@@ -24,13 +26,22 @@ export interface GeckoOptions extends BrowserOptionsBase {
   geckoBinary?: string
 }
 
+export interface WebKitOptions extends BrowserOptionsBase {
+  browser: 'gecko-based'
+  webKitBinary?: string
+}
+
 export interface NonBinaryOptions extends BrowserOptionsBase {
-  browser: Exclude<BrowserType, 'chromium-based' | 'gecko-based'>
+  browser: Exclude<
+    BrowserType,
+    'chromium-based' | 'gecko-based' | 'webkit-based'
+  >
 }
 
 export type ExtendedBrowserOptions =
   | ChromiumOptions
   | GeckoOptions
+  | WebKitOptions
   | NonBinaryOptions
 
 export interface DevOptions extends BrowserOptionsBase {
@@ -39,6 +50,7 @@ export interface DevOptions extends BrowserOptionsBase {
   // Narrow down the options based on `browser`
   chromiumBinary?: ChromiumOptions['chromiumBinary']
   geckoBinary?: GeckoOptions['geckoBinary']
+  webKitBinary?: WebKitOptions['webKitBinary']
 }
 
 export interface BuildOptions {
@@ -54,29 +66,102 @@ export interface PreviewOptions extends BrowserOptionsBase {
   mode: 'production'
   chromiumBinary?: ChromiumOptions['chromiumBinary']
   geckoBinary?: GeckoOptions['geckoBinary']
+  webKitBinary?: WebKitOptions['webKitBinary']
 }
 
 export interface StartOptions extends BrowserOptionsBase {
   mode: 'production'
   polyfill?: boolean
   chromiumBinary?: ChromiumOptions['chromiumBinary']
   geckoBinary?: GeckoOptions['geckoBinary']
+  webKitBinary?: WebKitOptions['webKitBinary']
 }
 
 export interface BrowserConfig extends BrowserOptionsBase {
   browserFlags?: string[]
   preferences?: Record<string, unknown>
   chromiumBinary?: ChromiumOptions['chromiumBinary']
   geckoBinary?: GeckoOptions['geckoBinary']
+  webKitBinary?: WebKitOptions['webKitBinary']
+}
+
+export interface XCodeConfig {
+  // Based off XCode's --project-location
+  // Save the generated app and Xcode project to the file path.
+  // Defaults to: xcode
+  projectLocation?: string
+
+  // Based off XCode's --rebuild-project
+  // Rebuild the existing Safari web extension Xcode project at the
+  // file path with different options or platforms. Use this option
+  // to add iOS to your existing macOS project.
+  // Defaults to: false
+  rebuildProject?: boolean
+
+  // Based off XCode's --app-name
+  // Use the value to name the generated app and the Xcode project.
+  // Defaults to: the name of the extension in the manifest.json file.
+  appName?: string
+
+  // Based off XCode's --bundle-identifier
+  // Use the value as the bundle identifier for the generated app.
+  // This identifier is unique to your app in your developer account.
+  // A reverse-DNS-style identifier is recommended (for example, com.company.extensionName).
+  // Defaults to: org.extensionjs.[extension_name]
+  bundleIdentifier?: string
+
+  // Based off XCode's --swift
+  // Use Swift in the generated app.
+  // Defaults to: true
+  swift?: boolean
+
+  // Based off XCode's --objc
+  // Use Objective-C in the generated app.
+  // Defaults to: false
+  objc?: boolean
+
+  // Based off XCode's --ios-only
+  // Create an iOS-only project.
+  // Defaults to: false
+  iosOnly?: boolean
+
+  // Based off XCode's --macos-only
+  // Create a macOS-only project.
+  // Defaults to: true
+  macosOnly?: boolean
+
+  // Based off XCode's --copy-resources
+  // Copy the extension files into the generated project.
+  // If you don’t specify this parameter, the project references
+  // the original extension files.
+  // Defaults to: false
+  copyResources?: boolean
+
+  // Based off XCode's --no-open
+  // Don’t open the generated Xcode project when complete.
+  // Defaults to: true
+  noOpen?: boolean
+
+  // Based off XCode's --no-prompt
+  // Don’t show the confirmation prompt.
+  // Defaults to: false
+  noPrompt?: boolean
+
+  // Based off XCode's --force
+  // Overwrite the output directory, if one exists.
+  // Defaults to: false
+  force?: boolean
 }
 
 export interface FileConfig {
   browser?: {
     chrome?: BrowserConfig
     firefox?: BrowserConfig
     edge?: BrowserConfig
+    safari?: BrowserConfig & {xcode?: XCodeConfig}
     'chromium-based'?: BrowserConfig
     'gecko-based'?: BrowserConfig
+    'webkit-based'?: BrowserConfig & {xcode?: XCodeConfig}
   }
   commands?: {
     dev?: Pick<
@@ -85,6 +170,7 @@ export interface FileConfig {
       | 'profile'
       | 'chromiumBinary'
       | 'geckoBinary'
+      | 'webKitBinary'
       | 'open'
       | 'polyfill'
     > & {
@@ -94,15 +180,20 @@ export interface FileConfig {
 
     start?: Pick<
       StartOptions,
-      'browser' | 'profile' | 'chromiumBinary' | 'geckoBinary' | 'polyfill'
+      | 'browser'
+      | 'profile'
+      | 'chromiumBinary'
+      | 'geckoBinary'
+      | 'webKitBinary'
+      | 'polyfill'
     > & {
       browserFlags?: string[]
       preferences?: Record<string, unknown>
     }
 
     preview?: Pick<
       PreviewOptions,
-      'browser' | 'profile' | 'chromiumBinary' | 'geckoBinary'
+      'browser' | 'profile' | 'chromiumBinary' | 'geckoBinary' | 'webKitBinary'
     > & {
       browserFlags?: string[]
       preferences?: Record<string, unknown>

programs/develop/package.json

@@ -112,4 +112,4 @@
     "vue-style-loader": "^4.1.3",
     "vue-template-compiler": "^2.7.16"
   }
-}
+}

programs/develop/plugin-browsers/browsers-types.ts

@@ -15,4 +15,5 @@ export interface PluginOptions {
   devtools?: boolean
   chromiumBinary?: string
   geckoBinary?: string
+  webKitBinary?: string
 }

programs/develop/plugin-browsers/index.ts

@@ -4,6 +4,7 @@ import {type Compiler} from 'webpack'
 import {type PluginInterface} from './browsers-types'
 import {RunChromiumPlugin} from './run-chromium'
 import {RunFirefoxPlugin} from './run-firefox'
+import {RunSafariPlugin} from './run-safari'
 import {DevOptions} from '../commands/commands-lib/config-types'
 import {loadBrowserConfig} from '../commands/commands-lib/get-extension-config'
 import * as messages from './browsers-lib/messages'
@@ -156,6 +157,7 @@ export class BrowsersPlugin {
       this.profile || this.profile
     )
 
+    console.log('browser is --------', this.browser)
     switch (this.browser) {
       case 'chrome':
       case 'edge':
@@ -177,11 +179,20 @@ export class BrowsersPlugin {
         }).apply(compiler)
         break
 
+      case 'safari':
+      case 'webkit-based':
+        new RunSafariPlugin({
+          ...browserConfig,
+          browser: this.browser
+          // profile
+        }).apply(compiler)
+        break
+
       default: {
         new RunChromiumPlugin({
           ...browserConfig,
-          browser: 'chrome',
-          profile
+          browser: this.browser
+          // profile
         }).apply(compiler)
         break
       }