Skip to content

Commit

Permalink
Visual support for custom settings
Browse files Browse the repository at this point in the history
  • Loading branch information
cezaraugusto committed Nov 13, 2024
1 parent 363d7ef commit 1858637
Show file tree
Hide file tree
Showing 22 changed files with 232 additions and 141 deletions.
2 changes: 0 additions & 2 deletions examples/content-extension-config/extension.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ module.exports = {
browsers: {
chrome: {
// open?: boolean
// userDataDir?: string
// profile?: string
// preferences?: Record<string, any>
// browserFlags?: string[]
Expand All @@ -13,7 +12,6 @@ module.exports = {
},
firefox: {
// open?: boolean
// userDataDir?: string
// profile?: string
// preferences?: Record<string, any>
// browserFlags?: string[]
Expand Down
2 changes: 1 addition & 1 deletion programs/cli/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ https://github.com/cezaraugusto/extension/assets/4672033/7263d368-99c4-434f-a60a

## Web Standards and Modern JavaScript Support

For a preview of extensions running these technologies, see documentation about [Templates](https://extension.js.org/n/getting-started/templates/).
For a preview of extensions running these technologies, see documentation about [Templates](https://extension.js.org/docs/getting-started/templates).

| <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/a9e2541a-96f0-4caa-9fc9-5fc5c3e901c8" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/b42c5330-9e2a-4045-99c3-1f7d264dfaf4" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/f19edff3-9005-4f50-b05c-fba615896a7f" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/ff64721d-d145-4213-930d-e70193f8d57e" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/15f1314a-aa65-4ce2-a3f3-cf53c4f730cf" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/c5f8a127-3c2a-4ceb-bb46-948cf2c8bd89" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/de1082fd-7cf6-4202-8c12-a5c3cd3e5b42" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/78e5fe3d-dc79-4aa2-954e-1a5973d1d9db" width="70"> | <img src="https://github.com/cezaraugusto/extension.js/assets/4672033/8807efd9-93e5-4db5-a1d2-9ac524f7ecc2" width="70"> |
| :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: | :---------------------------------------------------------------------------------------------------------------------: |
Expand Down
2 changes: 1 addition & 1 deletion programs/develop/commands/build.ts
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export async function extensionBuild(
)
})

const userExtensionConfig = loadCustomWebpackConfig(projectPath)
const userExtensionConfig = await loadCustomWebpackConfig(projectPath)
const userConfig = userExtensionConfig({
...baseConfig,
plugins: allPluginsButBrowserRunners
Expand Down
2 changes: 1 addition & 1 deletion programs/develop/commands/commands-lib/config-types.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
import {Configuration} from 'webpack'

export interface BrowserOptions {
open?: boolean
profile?: string
startingUrl?: string
browser: 'chrome' | 'edge' | 'firefox' | 'chromium-based' | 'gecko-based'
Expand All @@ -10,7 +11,6 @@ export interface BrowserOptions {

export interface DevOptions extends BrowserOptions {
mode: 'development' | 'production'
open?: boolean
polyfill?: boolean
}

Expand Down
50 changes: 25 additions & 25 deletions programs/develop/commands/commands-lib/get-extension-config.ts
Original file line number Diff line number Diff line change
@@ -1,74 +1,74 @@
import fs from 'fs'
import path from 'path'
import {Configuration} from 'webpack'
import {FileConfig} from './config-types'
import {DevOptions} from '../../commands/dev'
import {BrowserConfig, FileConfig} from './config-types'
import {DevOptions} from '../../commands/commands-lib/config-types'
import * as messages from './messages'

export function loadExtensionConfig(projectPath: string) {
export async function loadCustomWebpackConfig(projectPath: string) {
const userConfigPath = path.join(projectPath, 'extension.config.js')

if (fs.existsSync(userConfigPath)) {
if (isUsingExperimentalConfig(projectPath)) {
const userConfig: FileConfig = require(userConfigPath)
if (userConfig && userConfig != null) {
if (userConfig && typeof userConfig!.config === 'function') {
return userConfig!.config
}
if (await isUsingExperimentalConfig(projectPath)) {
const userConfig: FileConfig = (await import(userConfigPath)).default
if (userConfig && typeof userConfig.config === 'function') {
return userConfig.config
}
}
}

return (config: Configuration) => config
}

export function loadCommandConfig(
export async function loadCommandConfig(
projectPath: string,
command: 'dev' | 'build' | 'start' | 'preview'
) {
const userConfigPath = path.join(projectPath, 'extension.config.js')

if (fs.existsSync(userConfigPath)) {
if (isUsingExperimentalConfig(projectPath)) {
const userConfig: any = require(userConfigPath)
if (userConfig && userConfig != null) {
return userConfig![command]
if (await isUsingExperimentalConfig(projectPath)) {
const userConfig: FileConfig = (await import(userConfigPath)).default
if (userConfig) {
// @ts-expect-error - TS doesn't know that command is a key of FileConfig['commands']
return userConfig[command]
}
}
}

return {}
}

export function loadBrowserConfig(
export async function loadBrowserConfig(
projectPath: string,
browser: DevOptions['browser']
) {
browser: DevOptions['browser'] = 'chrome'
): Promise<BrowserConfig> {
const userConfigPath = path.join(projectPath, 'extension.config.js')

if (fs.existsSync(userConfigPath)) {
if (isUsingExperimentalConfig(projectPath)) {
const userConfig: any = require(userConfigPath)
if (userConfig && userConfig.browsers != null) {
return userConfig.browsers![browser]
if (await isUsingExperimentalConfig(projectPath)) {
const userConfig: FileConfig = (await import(userConfigPath)).default
if (userConfig && userConfig.browser && userConfig.browser[browser]) {
return userConfig.browser[browser] || {browser: 'chrome'}
}
}
}

return {}
return {
browser: 'chrome'
}
}

let userMessageDelivered = false

export function isUsingExperimentalConfig(projectPath: string) {
export async function isUsingExperimentalConfig(projectPath: string) {
const configPath = path.join(projectPath, 'extension.config.js')
if (fs.existsSync(configPath)) {
if (!userMessageDelivered) {
console.log(messages.isUsingExperimentalConfig('extension.config.js'))
userMessageDelivered = true
}
return true
} else {
return false
}
return false
}
16 changes: 8 additions & 8 deletions programs/develop/commands/preview.ts
Original file line number Diff line number Diff line change
@@ -1,9 +1,9 @@
// ██████╗ ██████╗ ███████╗██╗ ██╗█████████╗██╗ ██╗
// ██╔══██╗██╔══██╗██╔════╝██║ ██║██║██╔════╝██║ ██║
// ██████╔╝██████╔╝█████╗ ██║ ██║███████╗ ██║ █╗ ██║
// ██╔═══╝ ██╔══██╗██╔══╝ ╚██╗ ██╔╝██║██╔══╝ ██║███╗██║
// ██║ ██║ ██║███████╗ ╚████╔╝ █████████╗╚██████╔╝
// ╚═╝ ╚═╝ ╚═╝╚═════╝ ╚═══╝ ╚═╝╚══════╝ ╚══╝╚══╝
// ██████╗ ██████╗██╗ ██╗███████╗██╗ ██████╗ ██████╗
// ██╔══██╗██╔════╝██║ ██║██╔════╝██║ ██╔═══██╗██╔══██╗
// ██║ ██║█████╗ ██║ ██║█████╗ ██║ ██║ ██║██████╔╝
// ██║ ██║██╔══╝ ╚██╗ ██╔╝██╔══╝ ██║ ██║ ██║██╔═══╝
// ██████╔╝███████╗ ╚████╔╝ ███████╗███████╗╚██████╔╝██║
// ╚═════╝ ╚══════╝ ╚═══╝ ╚══════╝╚══════╝ ╚═════╝ ╚═╝

import fs from 'fs'
import path from 'path'
Expand All @@ -12,7 +12,7 @@ import {merge} from 'webpack-merge'
import webpackConfig from '../webpack/webpack-config'
import {getProjectPath} from './commands-lib/get-project-path'
import * as messages from './commands-lib/messages'
import {loadExtensionConfig} from './commands-lib/get-extension-config'
import {loadCustomWebpackConfig} from './commands-lib/get-extension-config'
import {PreviewOptions} from './commands-lib/config-types'

export async function extensionPreview(
Expand Down Expand Up @@ -48,7 +48,7 @@ export async function extensionPreview(

console.log(messages.building(browser))

const userExtensionConfig = loadExtensionConfig(projectPath)
const userExtensionConfig = await loadCustomWebpackConfig(projectPath)
const userConfig = userExtensionConfig({
...baseConfig,
plugins: onlyBrowserRunners
Expand Down
53 changes: 51 additions & 2 deletions programs/develop/plugin-browsers/browsers-lib/messages.ts
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,6 @@ function getLoggingPrefix(
browser: DevOptions['browser'],
type: 'warn' | 'info' | 'error' | 'success'
): string {
// const browserok = browser ? browser : 'unknown'
if (2 + 2 == 5) return browser
const arrow =
type === 'warn'
? brightYellow('►►►')
Expand Down Expand Up @@ -215,3 +213,54 @@ export function unexpectedMessageReceivedError(
`${red(message)}`
)
}

export function isUsingStartingUrl(browser: DevOptions['browser'], value: any) {
return (
`${getLoggingPrefix(browser, 'info')} ` +
`Using own ${magenta('starting URL')} ` +
`${underline(value)}. `
)
}

export function isUsingBrowserBinary(binary: string, binaryPath: any) {
return (
`${getLoggingPrefix(binary as DevOptions['browser'], 'info')} ` +
`Using own ${magenta(`${capitalizedBrowserName(binary as any)} browser binary`)} ` +
`${underline(binaryPath)}. `
)
}

export function isUsingProfile(
browser: DevOptions['browser'],
profilePath: any
) {
return (
`${getLoggingPrefix(browser, 'info')} ` +
`Using own ${magenta('browser profile')} ` +
`${underline(profilePath)}. `
)
}

export function isUsingPreferences(browser: DevOptions['browser']) {
return (
`${getLoggingPrefix(browser, 'info')} ` +
`Using own ${magenta('browser preferences')}. `
)
}

export function isUsingBrowserFlags(browser: DevOptions['browser']) {
return (
`${getLoggingPrefix(browser, 'info')} ` +
`Using own ${magenta('browser flags')}. `
)
}

export function isBrowserLauncherOpen(
browser: DevOptions['browser'],
isOpen: boolean
) {
return (
`${getLoggingPrefix(browser, 'info')} ` +
`Browser launcher is ${brightYellow(isOpen ? 'enabled' : 'disabled')}. `
)
}
2 changes: 1 addition & 1 deletion programs/develop/plugin-browsers/browsers-types.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@ export interface PluginInterface extends PluginOptions {
}

export interface PluginOptions {
open?: boolean
browserFlags?: string[]
userDataDir?: string
profile?: string
preferences?: Record<string, any>
startingUrl?: string
Expand Down
72 changes: 60 additions & 12 deletions programs/develop/plugin-browsers/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {RunChromiumPlugin} from './run-chromium'
import {RunFirefoxPlugin} from './run-firefox'
import {DevOptions} from '../commands/commands-lib/config-types'
import {loadBrowserConfig} from '../commands/commands-lib/get-extension-config'

import * as messages from './browsers-lib/messages'
/**
* BrowsersPlugin works by finding the binary for the browser specified in the
* options and running it with the extension loaded.
Expand All @@ -29,11 +29,11 @@ export class BrowsersPlugin {

public readonly extension: string | string[]
public readonly browser: DevOptions['browser']
public readonly browserFlags: string[]
public readonly userDataDir?: string
public readonly profile: string
public readonly preferences: Record<string, any>
public readonly startingUrl: string
public readonly open?: boolean
public readonly browserFlags?: string[]
public readonly profile?: string
public readonly preferences?: Record<string, any>
public readonly startingUrl?: string
public readonly chromiumBinary?: string
public readonly geckoBinary?: string

Expand All @@ -49,8 +49,7 @@ export class BrowsersPlugin {
options.browserFlags?.filter(
(flag) => !flag.startsWith('--load-extension=')
) || []
this.userDataDir = options.userDataDir
this.profile = options.profile || ''
this.profile = options.profile
this.preferences = options.preferences || {}
this.startingUrl = options.startingUrl || ''
this.chromiumBinary = options.chromiumBinary
Expand All @@ -74,26 +73,75 @@ export class BrowsersPlugin {
return path.resolve(__dirname, `run-${browser}-profile`)
}

apply(compiler: Compiler) {
async apply(compiler: Compiler) {
const config = {
stats: true,
extension: this.extension,
browser: this.browser,
browserFlags: this.browserFlags || [],
userDataDir: this.getProfilePath(
profile: this.getProfilePath(
compiler,
this.browser,
this.userDataDir || this.profile
this.profile || this.profile
),
preferences: this.preferences,
startingUrl: this.startingUrl,
chromiumBinary: this.chromiumBinary,
geckoBinary: this.geckoBinary
}

const customUserConfig = await loadBrowserConfig(
compiler.context,
this.browser
)
const browserConfig = {
...config,
...loadBrowserConfig(compiler.context, this.browser)
...customUserConfig
}

if (browserConfig?.chromiumBinary) {
console.log(
messages.isUsingBrowserBinary('chromium', browserConfig?.chromiumBinary)
)
}

if (typeof browserConfig?.open !== 'undefined') {
console.log(
messages.isBrowserLauncherOpen(this.browser, browserConfig?.open)
)
}

// if (process.env.EXTENSION_ENV === 'development') {
if (browserConfig?.startingUrl) {
console.log(
messages.isUsingStartingUrl(
browserConfig?.browser,
browserConfig?.startingUrl
)
)
}
if (browserConfig?.chromiumBinary) {
console.log(
messages.isUsingBrowserBinary('chromium', browserConfig?.chromiumBinary)
)
}
if (browserConfig?.geckoBinary) {
console.log(
messages.isUsingBrowserBinary('gecko', browserConfig?.geckoBinary)
)
}
if (browserConfig?.profile) {
console.log(
messages.isUsingProfile(browserConfig?.browser, browserConfig?.profile)
)
}
if (browserConfig?.preferences) {
console.log(messages.isUsingPreferences(browserConfig?.browser))
}
if (browserConfig?.browserFlags && browserConfig?.browserFlags.length > 0) {
console.log(messages.isUsingBrowserFlags(browserConfig?.browser))
}
// }

switch (this.browser) {
case 'chrome':
Expand Down
4 changes: 1 addition & 3 deletions programs/develop/plugin-browsers/run-chromium/index.ts
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ export class RunChromiumPlugin {
public readonly extension: string | string[]
public readonly browser: DevOptions['browser']
public readonly browserFlags?: string[]
public readonly userDataDir?: string
public readonly profile?: string
public readonly preferences?: Record<string, any>
public readonly startingUrl?: string
Expand All @@ -31,8 +30,7 @@ export class RunChromiumPlugin {
this.extension = options.extension
this.browser = options.browser
this.browserFlags = options.browserFlags || []
this.userDataDir = options.userDataDir
this.profile = options.profile || options.userDataDir
this.profile = options.profile
this.preferences = options.preferences
this.startingUrl = options.startingUrl
this.chromiumBinary = options.chromiumBinary
Expand Down
Loading

0 comments on commit 1858637

Please sign in to comment.