Skip to content

docs: add system browser detection documentation #337

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 1 commit into from
Mar 21, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
14 changes: 13 additions & 1 deletion packages/docs/docs/getting-started/linux.md
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ npx mycoder "Your prompt here"

MyCoder can use a browser for research. On Linux:

1. **Chromium/Chrome/Firefox**: MyCoder works with these browsers automatically
1. **System Browser Detection**: MyCoder automatically detects and uses your installed browsers (Chrome, Chromium, Firefox)
2. **Dependencies**: You may need to install additional dependencies for browser automation:
```bash
# Ubuntu/Debian
Expand All @@ -146,6 +146,18 @@ MyCoder can use a browser for research. On Linux:
libgtk-3-0 libgbm1
```
3. **Headless Mode**: By default, browser windows are hidden (use `--headless false` to show them)
4. **Browser Preferences**: You can configure which browser MyCoder should use in your configuration file:
```javascript
// mycoder.config.js
export default {
browser: {
useSystemBrowsers: true,
preferredType: 'chromium', // or 'firefox'
}
};
```

For more details on browser detection and configuration, see [System Browser Detection](../usage/browser-detection.md).

## Troubleshooting

Expand Down
14 changes: 13 additions & 1 deletion packages/docs/docs/getting-started/macos.md
Original file line number Diff line number Diff line change
Expand Up @@ -152,9 +152,21 @@ npx mycoder "Your prompt here"

MyCoder can use a browser for research. On macOS:

1. **Chrome/Safari**: MyCoder works with both browsers automatically
1. **System Browser Detection**: MyCoder automatically detects and uses your installed browsers (Chrome, Chrome Canary, Edge, Firefox, Firefox Developer Edition, Firefox Nightly)
2. **First Run**: You may see a browser window open briefly when MyCoder is first run
3. **Headless Mode**: By default, browser windows are hidden (use `--headless false` to show them)
4. **Browser Preferences**: You can configure which browser MyCoder should use in your configuration file:
```javascript
// mycoder.config.js
export default {
browser: {
useSystemBrowsers: true,
preferredType: 'chromium', // or 'firefox'
}
};
```

For more details on browser detection and configuration, see [System Browser Detection](../usage/browser-detection.md).

## Troubleshooting

Expand Down
14 changes: 13 additions & 1 deletion packages/docs/docs/getting-started/windows.md
Original file line number Diff line number Diff line change
Expand Up @@ -129,9 +129,21 @@ npx mycoder "Your prompt here"

MyCoder can use a browser for research. On Windows:

1. **Chrome/Edge**: MyCoder works with both browsers automatically
1. **System Browser Detection**: MyCoder automatically detects and uses your installed browsers (Chrome, Edge, Firefox)
2. **First Run**: You may see a browser window open briefly when MyCoder is first run
3. **Headless Mode**: By default, browser windows are hidden (use `--headless false` to show them)
4. **Browser Preferences**: You can configure which browser MyCoder should use in your configuration file:
```javascript
// mycoder.config.js
export default {
browser: {
useSystemBrowsers: true,
preferredType: 'chromium', // or 'firefox'
}
};
```

For more details on browser detection and configuration, see [System Browser Detection](../usage/browser-detection.md).

## Troubleshooting

Expand Down
132 changes: 132 additions & 0 deletions packages/docs/docs/usage/browser-detection.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,132 @@
---
sidebar_position: 7
---

# System Browser Detection

MyCoder includes a system browser detection feature that allows it to use your existing installed browsers instead of requiring Playwright's bundled browsers. This is especially useful when MyCoder is installed globally via npm.

## How It Works

When you start a browser session in MyCoder, the system will:

1. Detect available browsers on your system (Chrome, Edge, Firefox, etc.)
2. Select the most appropriate browser based on your configuration preferences
3. Launch the browser using Playwright's `executablePath` option
4. Fall back to Playwright's bundled browsers if no system browser is found

This process happens automatically and is designed to be seamless for the user.

## Supported Browsers

MyCoder can detect and use the following browsers:

### Windows
- Google Chrome
- Microsoft Edge
- Mozilla Firefox

### macOS
- Google Chrome
- Google Chrome Canary
- Microsoft Edge
- Mozilla Firefox
- Firefox Developer Edition
- Firefox Nightly

### Linux
- Google Chrome
- Chromium
- Mozilla Firefox

## Configuration Options

You can customize the browser detection behavior in your `mycoder.config.js` file:

```javascript
// mycoder.config.js
export default {
// Other settings...

// System browser detection settings
browser: {
// Whether to use system browsers or Playwright's bundled browsers
useSystemBrowsers: true,

// Preferred browser type (chromium, firefox, webkit)
preferredType: 'chromium',

// Custom browser executable path (overrides automatic detection)
// executablePath: null, // e.g., '/path/to/chrome'
},
};
```

### Configuration Options Explained

| Option | Description | Default |
|--------|-------------|---------|
| `useSystemBrowsers` | Whether to use system-installed browsers if available | `true` |
| `preferredType` | Preferred browser engine type (`chromium`, `firefox`, `webkit`) | `chromium` |
| `executablePath` | Custom browser executable path (overrides automatic detection) | `null` |

## Browser Selection Priority

When selecting a browser, MyCoder follows this priority order:

1. Custom executable path specified in `browser.executablePath` (if provided)
2. System browser matching the preferred type specified in `browser.preferredType`
3. Any available system browser
4. Playwright's bundled browsers (fallback)

## Troubleshooting

If you encounter issues with browser detection:

1. **Browser Not Found**: Ensure you have at least one supported browser installed on your system.

2. **Browser Compatibility Issues**: Some websites may work better with specific browser types. Try changing the `preferredType` setting if you encounter compatibility issues.

3. **Manual Override**: If automatic detection fails, you can manually specify the path to your browser using the `executablePath` option.

4. **Fallback to Bundled Browsers**: If you prefer to use Playwright's bundled browsers, set `useSystemBrowsers` to `false`.

## Examples

### Using Chrome as the Preferred Browser

```javascript
// mycoder.config.js
export default {
browser: {
useSystemBrowsers: true,
preferredType: 'chromium',
},
};
```

### Using Firefox as the Preferred Browser

```javascript
// mycoder.config.js
export default {
browser: {
useSystemBrowsers: true,
preferredType: 'firefox',
},
};
```

### Specifying a Custom Browser Path

```javascript
// mycoder.config.js
export default {
browser: {
useSystemBrowsers: true,
executablePath: 'C:\\Program Files\\Google\\Chrome\\Application\\chrome.exe', // Windows example
// executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome', // macOS example
// executablePath: '/usr/bin/google-chrome', // Linux example
},
};
```
25 changes: 25 additions & 0 deletions packages/docs/docs/usage/configuration.md
Original file line number Diff line number Diff line change
Expand Up @@ -87,6 +87,16 @@ export default {
| `userSession` | Use existing browser session | `true`, `false` | `false` |
| `pageFilter` | Method to process webpage content | `simple`, `none`, `readability` | `simple` |

#### System Browser Detection

MyCoder can detect and use your system-installed browsers instead of requiring Playwright's bundled browsers. This is especially useful when MyCoder is installed globally via npm.

| Option | Description | Possible Values | Default |
| ------------------------- | ------------------------------------------------ | ------------------------------ | ---------- |
| `browser.useSystemBrowsers` | Use system-installed browsers if available | `true`, `false` | `true` |
| `browser.preferredType` | Preferred browser engine type | `chromium`, `firefox`, `webkit` | `chromium` |
| `browser.executablePath` | Custom browser executable path (optional) | String path to browser executable | `null` |

Example:

```javascript
Expand All @@ -95,6 +105,14 @@ export default {
// Show browser windows and use readability for better web content parsing
headless: false,
pageFilter: 'readability',

// System browser detection settings
browser: {
useSystemBrowsers: true,
preferredType: 'firefox',
// Optionally specify a custom browser path
// executablePath: '/path/to/chrome',
},
};
```

Expand Down Expand Up @@ -174,6 +192,13 @@ export default {
headless: false,
userSession: true,
pageFilter: 'readability',

// System browser detection settings
browser: {
useSystemBrowsers: true,
preferredType: 'chromium',
// executablePath: '/path/to/custom/browser',
},

// GitHub integration
githubMode: true,
Expand Down
Loading