BEPP

Appearance

Build Safari extension ​

BANNER

Bepp's Safari extension packaging feature allows you to effortlessly adapt your Chromium extensions for Safari. This capability is specifically designed for straightforward Chrome extensions. It provides a seamless transition process, enabling you to leverage your existing Chrome extensions on Safari with ease.

Important

Please note that this feature is currently in its experimental stage and is only supported on macOS.

Prerequisites ​

  • BEPP installation How to
  • macOS (mac Operating System)
  • Xcode Command Line Tools. (installation: xcode-select --install)

Info

If you don't have a macOS you can use our GitHub action

Usage ​

bash
bepp build-safari [options]
bepp build-safari [options]
js
/**
 * Build Safari extension.
 * 
 * @see https://bepp.pigeonposse.com/
 * @see https://bepp.pigeonposse.com/guide/build/safari
 */

import {safari, buildBrowser} from '@bepp/bepp'

safari.build({
    /** options **/
})

// Alternative:
buildBrowser('safari',{
    /** options **/
})
/**
 * Build Safari extension.
 * 
 * @see https://bepp.pigeonposse.com/
 * @see https://bepp.pigeonposse.com/guide/build/safari
 */

import {safari, buildBrowser} from '@bepp/bepp'

safari.build({
    /** options **/
})

// Alternative:
buildBrowser('safari',{
    /** options **/
})

Options ​

input ​

Specify the input directory for the extension.

Note

The input directory must be a directory path for a Chromium extension with Manifest 3.

The provided path should point to the directory containing the necessary files for building the extension.

  • CLI option: -i --input
  • JS key: input
  • Type: string

inputMv2 ​

Specify the input directory for extension.

Note

The input directory must be a directory path for a Chromium extension with Manifest 2.

The provided path should point to the directory containing the necessary files for building the extension.

  • CLI option: -i-2 --input-mv2
  • JS key: inputMv2
  • Type: string

WARNING

It is not recommended to use this option.

id ​

Identification for build. Used in filename build. The id option allows you to provide an identification string for the build. This identifier is used in the filename during the build process.

  • CLI option: --id
  • JS key: id
  • Type: string
  • Default: bepp

output ​

Specify the output directory where the packaged extension will be stored.

  • CLI option: -o --output
  • JS key: output
  • Type: string
  • Default: build/extensions

compress ​

Compression format for packaging Choose the compression format for packaging the extension.

  • CLI option: -c --compress
  • JS key: compress
  • Type: tar tgz gzip zip
  • Default: tgz

filename ​

Define the template for the filename of the packaged extension.

Filename placeholders

The filename can include placeholders such:

  • version takes the version number of the extension manifest.
  • id takes the id set by the id option.
  • browser takes the browser's identification name.
  • CLI option: -f --filename
  • JS key: filename
  • Type: string
  • Default: {{id}}-{{browser}}-{{version}}

appId ​

Bundle identifier for the generated app.

Customize the bundle ID used for macOS app. By default, it's set to com.bepp.{{id}}, where id represents the identification string provided during the build process.

  • CLI option: --app-id
  • Key in JavaScript: appId
  • Type: string
  • Default: com.bepp.{{id}}

appTitle ​

Title for the generated app.

Set a custom title for macOS app. By default, it's set to {{id}} (Safari extension), where id represents the identification string provided during the build process.

  • Option in CLI: --app-title
  • Key in JavaScript: appTitle
  • Type: string
  • Default: {{id}} (Safari extension)

dmgIcon ​

Custom icon for DMG (macOS)

Specify a custom icon to be used for the DMG (Disk Image) file on macOS.

  • Option in CLI: --dmg-icon
  • Key in JavaScript: dmgIcon
  • Type: string

dmgNoReadme ​

Deactivate readme file for DMG (macOS)

Disable the inclusion of the readme file in the DMG (Disk Image) file on macOS.

  • Option in CLI: --dmg-no-readme
  • Key in JavaScript: dmgNoReadme
  • Type: boolean
  • Default: false

dmgReadmePath ​

Custom readme path for DMG (macOS)

Specify a custom path for the readme file to be included in the DMG (Disk Image) file on macOS.

  • Option in CLI: --dmg-readme-path
  • Key in JavaScript: dmgReadmePath
  • Type: string

dmgReadmeFilename ​

Change readme filename for DMG (macOS)

Define a custom filename for the readme file included in the DMG (Disk Image) file on macOS.

  • Option in CLI: --dmg-readme-filename
  • Key in JavaScript: dmgReadmeFilename
  • Type: string
  • Default: README.md

onlyXcodeProject ​

Packages only the xcode project. This is useful in case you want to develop after converting from chromium to safari

  • Option in CLI: --only-xcode-project
  • Key in JavaScript: onlyXcodeProject
  • Type: boolean
  • Default: false

verbose ​

Use verbose output.

  • CLI option: -v --verbose
  • JS key: verbose
  • Type: boolean

time ​

Print execution time.

  • CLI option: -t --time
  • JS key: time
  • Type: boolean

exit ​

Force exit from process on error.

  • CLI option: -e --exit
  • JS key: exit
  • Type: boolean

Examples ​

bash
bepp build-safari \
 --input "/my/chromium/path" \
 --app-title "{{appTitle}}" \
 --id "my-extension-name"
bepp build-safari \
 --input "/my/chromium/path" \
 --app-title "{{appTitle}}" \
 --id "my-extension-name"
js
/**
 * Build Safari extension.
 * 
 * @see https://bepp.pigeonposse.com/
 * @see https://bepp.pigeonposse.com/guide/build/safari
 */
import {safari, buildBrowser} from '@bepp/bepp'

safari.build({
    input: '/my/chromium/path',
    appTitle: '{{appTitle}}',
    id: 'my-extension-name'
})

// or

buildBrowser('safari',{
    input: '/my/chromium/path',
    appTitle: '{{appTitle}}',
    id: 'my-extension-name'
})
/**
 * Build Safari extension.
 * 
 * @see https://bepp.pigeonposse.com/
 * @see https://bepp.pigeonposse.com/guide/build/safari
 */
import {safari, buildBrowser} from '@bepp/bepp'

safari.build({
    input: '/my/chromium/path',
    appTitle: '{{appTitle}}',
    id: 'my-extension-name'
})

// or

buildBrowser('safari',{
    input: '/my/chromium/path',
    appTitle: '{{appTitle}}',
    id: 'my-extension-name'
})

What does this? ​

Documentation will be available soon