### Install Hero Playground

Source: https://github.com/ulixee/hero/blob/main/docs/overview/introduction.md

Installs the Hero playground package, which allows running Hero examples out of the box. This is the recommended way to get started with Hero.

```bash
npm i --save @ulixee/hero-playground
```

--------------------------------

### Install Hero Playground

Source: https://github.com/ulixee/hero/blob/main/README.md

Installs the Hero playground package, which provides a quick way to start a one-time use Hero instance for testing or running single scripts.

```shell
npm i --save @ulixee/hero-playground
```

--------------------------------

### Browser launch() Method

Source: https://github.com/ulixee/hero/blob/main/agent/docs/Browser.md

Launches the Browser Engine, ensuring all necessary pre-requisites are installed (specifically for Linux). This is the initial step to start browser operations.

```typescript
browser.launch(): Promise<Browser>
```

--------------------------------

### Install Real User Agents

Source: https://github.com/ulixee/hero/blob/main/real-user-agents/README.md

Installs the Real User Agents library as a dependency for your project using npm.

```shell
npm i --save @ulixee/real-user-agents
```

--------------------------------

### Start Ulixee Cloud

Source: https://github.com/ulixee/hero/blob/main/docs/overview/introduction.md

Starts the Ulixee cloud service, which is a prerequisite for using Hero. Ensure your Ulixee development environment is set up and the cloud service is running.

```bash
npx @ulixee/cloud start
```

--------------------------------

### Install Google Fonts on Ubuntu

Source: https://github.com/ulixee/hero/blob/main/double-agent/analyze/plugins-in-future/browser-fonts/README.md

This code snippet demonstrates how to install Google Fonts on an Ubuntu system. It involves navigating to the fonts directory, creating a new directory for Google Fonts, unzipping the font archive, and setting appropriate file permissions.

```bash
cd /usr/share/fonts
sudo mkdir googlefonts
cd googlefonts
sudo unzip -d . ~/Downloads/Open_Sans.zip
sudo chmod -R --reference=/usr/share/fonts/opentype /usr/share/fonts/googlefonts
```

--------------------------------

### Install Nginx and Certbot

Source: https://github.com/ulixee/hero/blob/main/docs/advanced-concepts/deployment.md

Installs Nginx for proxying and Certbot with the Nginx plugin for SSL certificate management.

```bash
sudo apt-get  install nginx
sudo apt install certbot python3-certbot-nginx
```

--------------------------------

### Install Hero Core

Source: https://github.com/ulixee/hero/blob/main/docs/overview/introduction.md

Installs the core Hero package for direct use in your projects. The functionality is the same as the playground, just without the "-playground" suffix.

```bash
npm i --save @ulixee/hero
```

--------------------------------

### Start Collect Controller

Source: https://github.com/ulixee/hero/blob/main/double-agent-stacks/README.md

Starts the 'collect-controller' server, which generates assignments for the scraper tests. The API returns assignments one at a time.

```bash
yarn start
```

--------------------------------

### Install Unblocked Agent

Source: https://github.com/ulixee/hero/blob/main/agent/README.md

Installs the Unblocked Agent package using npm. This is the first step to using the automated browser in your project.

```shell
npm i --save @ulixee/unblocked-agent
```

--------------------------------

### Install JsPath with npm

Source: https://github.com/ulixee/hero/blob/main/js-path/README.md

This command installs the JsPath library as a dependency for your project using npm.

```shell
npm i --save @ulixee/js-path
```

--------------------------------

### Install Hero Client for HTTP Server Integration

Source: https://github.com/ulixee/hero/blob/main/docs/advanced-concepts/deployment.md

Installs the '@ulixee/hero' package into a client project for connecting to a Hero Core integrated with an HTTP server. This allows the client to initiate scrapes by connecting to the server's WebSocket endpoint.

```bash
npm i --save @ulixee/hero
```

--------------------------------

### Install Chrome Browsers

Source: https://github.com/ulixee/hero/blob/main/docs/advanced-client/user-agents.md

Installs specific versions of Chrome browsers that Hero can use for User Agent rotation. These installed browsers are automatically added to the round-robin of UserAgents.

```bash
npm i --save @ulixee/chrome-104-0 @ulixee/chrome-105-0 @ulixee/chrome-106-0
```

--------------------------------

### Install Hero Core and Hero for Fullstack Deployment

Source: https://github.com/ulixee/hero/blob/main/docs/advanced-concepts/deployment.md

Installs the necessary packages for a fullstack Hero deployment, where both the client and core run in the same process. This command adds '@ulixee/hero' and '@ulixee/hero-core' as project dependencies.

```bash
npm i --save @ulixee/hero @ulixee/hero-core
```

--------------------------------

### Initialize Hero Instance

Source: https://github.com/ulixee/hero/blob/main/docs/basic-client/hero.md

Demonstrates the basic initialization of a Hero instance and navigating to a URL. This sets up a new user-browsing session.

```javascript
const Hero = require('@ulixee/hero-playground');

(async () => {
  const hero = new Hero();
  await hero.goto('https://www.google.com');
  // other actions...
  await hero.close();
})();
```

--------------------------------

### Get TimeRanges Start Time

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/time-ranges.md

Retrieves the start time for a specific time range within a TimeRanges object. The index specifies which range's start time to return.

```javascript
const hero = require('@ulixee/hero');

(async () => {
  const browser = await hero.browse();
  // Assuming 'awaitedDom' is an AwaitedDOM<HTMLVideoElement> or similar
  const timeRanges = await awaitedDom.buffered;
  const index = 0; // Example index
  const startTime = await timeRanges.start(index);
  console.log(`Start time for range ${index}: ${startTime}`);
  await browser.close();
})();
```

--------------------------------

### Create and Register a Client Plugin

Source: https://github.com/ulixee/hero/blob/main/docs/plugins/client-plugins.md

Demonstrates creating a simple client plugin that adds a 'hello' method to the Hero instance and how to register it using hero.use().

```javascript
import { ClientPlugin } from '@ulixee/hero-plugin-utils';

export default class ClientHelloPlugin extends ClientPlugin {
  static readonly id = 'client-hello-plugin';
  // static type handled by ClientPlugin base

  onHero(hero) {
    hero.hello = (name) => console.log(`Hello ${name}`));
  } 
}
```

```javascript
import hero from '@ulixee/hero';
import ClientHelloPlugin from './ClientHelloPlugin';

hero.use(ClientHelloPlugin);
```

```javascript
hero.hello('World');
```

--------------------------------

### Get Element Selection Start Index

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-input-element.md

Retrieves the start index of the selected text within an element. If no text is selected, it returns the position of the text input cursor.

```JavaScript
const start = await element.selectionStart;
console.log(start);
```

--------------------------------

### Install Hero Core and Net for HTTP Server Integration

Source: https://github.com/ulixee/hero/blob/main/docs/advanced-concepts/deployment.md

Installs '@ulixee/hero-core' and '@ulixee/net' into an existing Node.js HTTP server project to enable Hero integration. This allows Hero clients to connect to the core via WebSocket.

```bash
npm i --save @ulixee/hero-core @ulixee/net
```

--------------------------------

### Get Element Tag Name

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-meta-element.md

Returns the tag name of the element as a string. For example, 'DIV', 'SPAN', 'IMG'.

```JavaScript
const tagName = await elem.tagName;
// tagName is a string with the name of the tag for the given element.
```

--------------------------------

### Instantiate Ulixee Agent with Options

Source: https://github.com/ulixee/hero/blob/main/agent/docs/Agent.md

Shows how to create an Agent instance with specific options, including locale and plugins. This allows for customization of the browsing environment.

```javascript
const Agent = require('@ulixee/agent');

(async () => {
  const agent = new Agent({
    locale: 'en-US,en',
    plugins: [LocalePlugin], // add plugins that implement locale!
  });
})();
```

--------------------------------

### Get Element Tag Name

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-font-element.md

Returns the tag name of the element as a string. For example, 'DIV', 'SPAN', 'IMG'.

```JavaScript
const tagName = await elem.tagName;
// tagName is a string with the name of the tag for the given element.
```

--------------------------------

### Initialize Hero Instance with User Agent

Source: https://github.com/ulixee/hero/blob/main/docs/basic-client/hero.md

Shows how to create a Hero instance with a specific user agent string, allowing for custom browser and OS identification.

```javascript
const Hero = require('@ulixee/hero-playground');

(async () => {
  const hero = new Hero({
    userAgent: '~ mac 13.1 & chrome >= 112',
  });
})();
```

--------------------------------

### Get Element Tag Name

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-canvas-element.md

Returns the name of the tag for the given element as a string. For example, 'div', 'span', etc.

```javascript
const tagName = elem.tagName;
```

--------------------------------

### Get Location Search

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/location.md

Retrieves the query string portion of the URL, starting with a '?'. This property returns a Promise resolving to a string.

```javascript
const search = await location.search;
```

--------------------------------

### Adjust Starting Mouse Point with adjustStartingMousePoint

Source: https://github.com/ulixee/hero/blob/main/docs/plugins/core-plugins.md

The adjustStartingMousePoint hook is used internally by Core to correctly set the initial mouse interaction point. It receives the starting point and a helper object.

```javascript
async adjustStartingMousePoint(point, helper) {
  // Example: Adjust the starting point for mouse interactions
  point.x += 10;
  point.y += 5;
  return point;
}
```

--------------------------------

### Configure Ulixee Hero Connection

Source: https://github.com/ulixee/hero/blob/main/docs/basic-client/hero.md

Sets up the connection to the Ulixee Core, allowing for automatic booting of a local Core or connecting to an existing instance. A host can be provided as a string.

```javascript
const hero = require('ulixee/hero');

hero.launch({
  connectionToCore: 'string' // or an object with IConnectionToCoreOptions
});
```

--------------------------------

### Get Location Pathname

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/location.md

Retrieves the path portion of the URL, starting with a '/'. This property returns a Promise resolving to a string.

```javascript
const pathname = await location.pathname;
```

--------------------------------

### Launch Chrome for Network Monitoring

Source: https://github.com/ulixee/hero/blob/main/agent/mitm/SsslKeylogTests.md

This command launches a Google Chrome instance with specific configurations for network monitoring and testing. It sets a user data directory, uses a mock keychain, skips the first run, and navigates to a specified URL. Ensure the path to Google Chrome is correct for your installation.

```bash
$HOME/Library/Caches/ulixee/chrome/105.0.5195.125/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --user-data-dir=/tmp/chrome --use-mock-keychain --no-first-run "<ENTER URL HERE>"
```

--------------------------------

### Get Element Tag Name

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-li-element.md

Returns the name of the tag for the given element as a string. For example, 'div', 'span', etc.

```javascript
const tagName = elem.tagName;
```

--------------------------------

### Get Element Tag Name

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-label-element.md

Returns the name of the tag for the given element as a string. For example, 'div', 'span', etc.

```javascript
const tagName = elem.tagName;
```

--------------------------------

### Get TextTrackCue startTime

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/text-track-cue.md

Retrieves the startTime property of a TextTrackCue, which indicates the video time in seconds when the cue starts being displayed. This is a Promise that resolves to a number.

```javascript
const startTime = await TextTrackCue.startTime;
console.log(startTime);
```

--------------------------------

### Launch Ulixee Cloud Node

Source: https://github.com/ulixee/hero/blob/main/docs/advanced-concepts/deployment.md

Starts an instance of Ulixee Cloud using the CloudNode class. This requires the '@ulixee/cloud' package and listens on a specified port (defaulting to 7007). Ensure the allocated port is open on any firewalls.

```javascript
const { CloudNode } = require('@ulixee/cloud');

(async () => {
  const cloudNode = new CloudNode();
  await cloudNode.listen({ port: 7007 });
})();
```

--------------------------------

### Get URL Pathname - JavaScript

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-hyperlink-element-utils.md

Retrieves the pathname of a URL, which is the path component starting with a '/'. This property returns a promise that resolves to a string.

```JavaScript
const url = await page.goto("https://example.com/path/to/resource");
const pathname = await url.pathname;
console.log(pathname); // Output: "/path/to/resource"
```

--------------------------------

### Get Element Pathname

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-area-element.md

Retrieves the pathname of the URL associated with the element. This property returns a string starting with '/' followed by the path.

```javascript
const pathname = await elem.pathname;
```

--------------------------------

### Basic Hero Usage Example

Source: https://github.com/ulixee/hero/blob/main/README.md

Demonstrates the basic usage of the Hero library to navigate to a URL, extract the page title and the text content of the first paragraph, and then close the Hero instance.

```javascript
const Hero = require('@ulixee/hero-playground');

(async () => {
  const hero = new Hero();
  await hero.goto('https://example.org');
  const title = await hero.document.title;
  const intro = await hero.document.querySelector('p').textContent;
  await hero.close();
})();
```

--------------------------------

### Get Element Tag Name

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-u-list-element.md

Retrieves the name of the tag for the given element as a string. For example, for a `<div>` element, this would return 'DIV'.

```javascript
const tagName = await elem.tagName;
// tagName is a string with the name of the element's tag.
```

--------------------------------

### Create and Use Ulixee Agent

Source: https://github.com/ulixee/hero/blob/main/agent/docs/Agent.md

Demonstrates the basic instantiation of an Agent and navigating to a URL. The Agent class is the core component for managing browsing sessions.

```javascript
const { Agent } = require('@ulixee/unblocked-agent');

(async () => {
  const agent = new Agent();
  const page = await agent.newPage();
  await page.goto('https://example.org/');
  // ... other actions
  await agent.close();
})();
```

--------------------------------

### Activate Nginx Configuration and Restart

Source: https://github.com/ulixee/hero/blob/main/docs/advanced-concepts/deployment.md

Enables the Nginx site configuration, tests the configuration syntax, and restarts the Nginx service.

```bash
sudo ln -s /etc/nginx/sites-available/websocket /etc/nginx/sites-enabled/
sudo nginx -t
sudo systemctl restart nginx
```

--------------------------------

### Get Element Tag Name

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-style-element.md

Retrieves the name of the tag for the given element as a string. For example, for a `<div>` element, this would return 'DIV'.

```javascript
const tagName = await elem.tagName;
// tagName is a string with the name of the element's tag.
```

--------------------------------

### Get Element Tag Name

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-mod-element.md

Retrieves the name of the tag for the given element as a string. For example, for a `<div>` element, this would return 'DIV'.

```javascript
const tagName = await elem.tagName;
// tagName is a string with the name of the element's tag.
```

--------------------------------

### Create a Basic Node.js HTTP Server

Source: https://github.com/ulixee/hero/blob/main/docs/advanced-concepts/deployment.md

Creates a basic Node.js HTTP server instance. This is a foundational step if you don't have an existing HTTP server and need one to integrate Hero Core with, for example, via WebSockets.

```javascript
import * as http from 'http';

const server = new http.Server();
await new Promise(resolve => server.listen(8080, resolve));
```

--------------------------------

### Fetch GET Request

Source: https://github.com/ulixee/hero/blob/main/docs/advanced-client/frame-environment.md

Navigates to a specified origin and performs a GET request to a given URL using the main frame environment's fetch method. Returns a Promise resolving to a Response object.

```javascript
const origin = 'https://ulixee.org/';
const getUrl = 'https://ulixee.org/docs/hero';

await hero.goto(origin);
const mainFrame = hero.mainFrameEnvironment;
const response = await mainFrame.fetch(getUrl);
```

--------------------------------

### Create and Register Client/Core Plugins

Source: https://github.com/ulixee/hero/blob/main/docs/plugins/core-plugins.md

Demonstrates creating a client-side plugin and a core plugin that share an ID. It shows how to export multiple plugins from a single file and register them with Hero using `hero.use()`.

```javascript
import { ClientPlugin, CorePlugin } from '@ulixee/hero-plugin-utils';

export class ClientHelloPlugin extends ClientPlugin {
  static readonly id = 'hello-plugin';

  onHero(hero, sendToCore) {
    hero.hello = async (name) => await sendToCore('hello-plugin', name);
  }
}

export class CoreHelloPlugin extends CorePlugin {
  static readonly id = 'hello-plugin';

  onClientCommand({ page }, name) {
    `Hello ${name}`);
  }
}
```

```javascript
import hero from '@ulixee/hero';

hero.use(require.resolve('./HelloPlugin'));

await hero.hello('World');
```

--------------------------------

### Get Element Search Parameters

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-area-element.md

Retrieves the search parameters of the URL associated with the element. This property returns a string starting with '?' followed by the parameters.

```javascript
const search = await elem.search;
```

--------------------------------

### Create Basic Auth Credentials

Source: https://github.com/ulixee/hero/blob/main/docs/advanced-concepts/deployment.md

Creates a password file for basic HTTP authentication using OpenSSL.

```bash
sudo sh -c "echo -n 'username:' >> /etc/nginx/.htpasswd"
sudo sh -c "openssl passwd -apr1 >> /etc/nginx/.htpasswd"
```

--------------------------------

### Get Element Tag Name

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-video-element.md

Returns a string with the name of the tag for the given element. For example, for an HTML element, it might return 'div' or 'span'.

```javascript
const tagName = await elem.tagName;
console.log(tagName);
```

--------------------------------

### Get Element Tag Name

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-map-element.md

Retrieves the name of the tag for the given element as a string. For example, for a `<div>` element, this would return 'DIV'.

```javascript
const tagName = await elem.tagName;
// tagName is a string with the name of the element's tag.
```

--------------------------------

### Select User Agent with Hero

Source: https://github.com/ulixee/hero/blob/main/docs/advanced-client/user-agents.md

Demonstrates how to initiate a new Hero instance with a specific User Agent selector. The selector allows specifying browser version and operating system preferences. It also shows how to retrieve the emulated User Agent string and rendering engine version.

```javascript
new Hero({
  userAgent: '~ chrome >= 105 && windows >= 10'
});
const meta = await hero.meta;
console.log(meta.userAgentString); // will be Chrome >= 105 and Windows 10 or 11
// This is the underlying Chrome "executable" version that the UserAgent is emulating. 
// Will usually be same Major version and different Patch version.
console.log(meta.renderingEngineVersion); 
```

--------------------------------

### Create Local Dom Profiles

Source: https://github.com/ulixee/hero/blob/main/browser-profiler/README.md

Generates local DOM profiles.

```bash
$ yarn profile:dom-local
```

--------------------------------

### Get URL Pathname

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-anchor-element.md

Returns the path component of the URL, starting with a '/'. This represents the location of the resource on the server. Returns a Promise resolving to the pathname string.

```JavaScript
const pathname = await elem.pathname;
```

--------------------------------

### Get Node Type

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-form-element.md

Returns an unsigned short representing the type of the node, according to W3C standards. Examples include ELEMENT_NODE (1), TEXT_NODE (3), and COMMENT_NODE (8).

```javascript
const nodeType = await elem.nodeType;
console.log(nodeType);
```

--------------------------------

### Vue.js Grid Component and App Setup

Source: https://github.com/ulixee/hero/blob/main/agent/main/test/assets/spa/index.html

Defines a Vue.js grid component (`DemoGrid`) that accepts columns as a prop and fetches records from 'data.json'. It also shows how to create and mount a Vue application with this component.

```javascript
let counter = 0; // register the grid component const DemoGrid = { template: '#grid-template', props: { columns: Array, }, data() {
  return {
    records: null,
  };
},
async mounted() {
  const response = await fetch('data.json');
  const { records } = await response.json();
  this.records = records;
},
};
// Create and mount the Vue app const app = Vue.createApp({
  components: {
    DemoGrid,
  },
  data() {
    return {
      gridColumns: ["name", "power"],
    };
  },
});
app.mount('#demo');
```

--------------------------------

### Get Element Selection Start Index

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-text-area-element.md

Retrieves the index of the beginning of selected text within an element. If no text is selected, it returns the index of the character following the cursor. Setting this property mimics the behavior of setSelectionRange().

```JavaScript
const startIndex = await element.selectionStart;
console.log(startIndex);
```

--------------------------------

### Ulixee Hero: Multiple Interactions for Sequential Actions

Source: https://github.com/ulixee/hero/blob/main/agent/docs/Interactions.md

This example shows how to achieve a sequence of actions (move, then click) by using separate Interactions for each command. This approach can lead to different execution behavior compared to combining them into a single Interaction.

```javascript
page.interact(
  [{ command: 'move', mousePosition: [55, 42] }],
  [{ command: 'clickDown', mousePosition: [5, 5] }],
);
```

--------------------------------

### Get HTMLMediaElement Autoplay Property

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-media-element.md

Retrieves the autoplay status of an HTMLMediaElement. This property reflects the 'autoplay' HTML attribute, indicating if playback should start automatically when media is available. Note that browsers may ignore autoplay requests.

```JavaScript
const autoplayStatus = await hero.HTMLMediaElement.autoplay;
console.log(autoplayStatus);
```

--------------------------------

### Get Last Command ID in Tab

Source: https://github.com/ulixee/hero/blob/main/docs/advanced-client/tab.md

The tab.lastCommandId property returns a promise that resolves to the ID of the last command executed on the Hero instance. This ID can be used with waitFor* functions to specify a starting point for listening to changes.

```javascript
const lastCommandId = await tab.lastCommandId;
// lastCommandId is the identifier of the most recent command
```

--------------------------------

### Execute Sequential Commands with Shortcuts

Source: https://github.com/ulixee/hero/blob/main/docs/basic-client/interactions.md

Create interactions using simple command strings for sequential actions like moving and clicking without needing to change mouse position between commands.

```javascript
hero.interact({ move: [55, 42] }, 'click');
```

--------------------------------

### Get Element Style

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-video-element.md

The style property is used to get as well as set the inline style of an element. When getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element.

```javascript
const style = await hero.querySelector('some-selector').style;
```

--------------------------------

### Get Element Style

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-table-row-element.md

The style property is used to get as well as set the inline style of an element. When getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element.

```javascript
const style = await hero.querySelector('some-selector').style;
```

--------------------------------

### TypeScript SSL Certificate Setup

Source: https://github.com/ulixee/hero/blob/main/double-agent/docs/readme-template.md

This TypeScript code snippet, found in `collect/servers/Certs.ts`, provides instructions for setting up SSL certificates and host file entries. This is necessary for Double Agent to handle cross-domain requests and HTTPS domains during testing.

```typescript
// follow directions [here](collect/servers/Certs.ts)
```

--------------------------------

### Ulixee Hero: Sequential Move and Click Interaction

Source: https://github.com/ulixee/hero/blob/main/agent/docs/Interactions.md

This example demonstrates an Interaction with two sequential commands: first moving the mouse, then performing a 'clickDown' at a different position. This highlights how the order of commands within a single Interaction matters.

```javascript
page.interact([
  { command: 'move', mousePosition: [55, 42] },
  { command: 'clickDown', mousePosition: [5, 5] },
]);
```

--------------------------------

### Get Element Style

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-media-element.md

The style property is used to get as well as set the inline style of an element. When getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element.

```javascript
const style = await hero.querySelector('some-selector').style;
```

--------------------------------

### Get Element Style

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-iframe-element.md

The style property is used to get as well as set the inline style of an element. When getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element.

```javascript
const style = await hero.querySelector('some-selector').style;
```

--------------------------------

### Create Headed Dom Profiles on BrowserStack

Source: https://github.com/ulixee/hero/blob/main/browser-profiler/README.md

Generates headed DOM profiles using BrowserStack.

```bash
$ yarn profile:dom-browserstack
```

--------------------------------

### Basic Unblocked Agent Usage

Source: https://github.com/ulixee/hero/blob/main/agent/README.md

Demonstrates the basic usage of the Unblocked Agent. It shows how to create an agent, navigate to a page, wait for it to load, extract content using evaluate, and then close the agent.

```javascript
const { Agent } = require('@ulixee/unblocked-agent');

(async () => {
  const agent = new Agent();
  const page = await agent.newPage();
  await page.goto('https://example.org/');
  await page.waitForLoad('PaintingStable');

  const outerHTML = await page.mainFrame.outerHTML();
  const title = await page.evaluate('document.title');
  const intro = await page.evaluate(`document.querySelector('p').textContent`);

  await agent.close();
})();
```

--------------------------------

### Get Element Style

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-audio-element.md

The style property is used to get as well as set the inline style of an element. When getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element.

```javascript
const style = await hero.querySelector('some-selector').style;
```

--------------------------------

### Get Element Style

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-track-element.md

The style property is used to get as well as set the inline style of an element. When getting, it returns a CSSStyleDeclaration object that contains a list of all styles properties for that element.

```javascript
const style = await hero.querySelector('some-selector').style;
```

--------------------------------

### Get and Set Inline Style - JavaScript

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-u-list-element.md

The style property allows you to get or set the inline style of an element. When getting, it returns a CSSStyleDeclaration object containing all style properties defined in the element's inline style attribute.

```JavaScript
const style = elem.style;
// To set a style:
elem.style.color = "red";
```

--------------------------------

### Deploy and Run DoubleAgent

Source: https://github.com/ulixee/hero/blob/main/browser-profiler/README.md

Deploys and runs DoubleAgent code on a server. Requires replacing 'REMOTE' with the actual IP address.

```bash
$ REMOTE=174.138.36.46 ./deploy.sh
```

--------------------------------

### Get and Set Inline Style - JavaScript

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-table-col-element.md

The style property allows you to get or set the inline style of an element. When getting, it returns a CSSStyleDeclaration object containing all style properties defined in the element's inline style attribute.

```JavaScript
const style = elem.style;
// To set a style:
elem.style.color = "red";
```

--------------------------------

### Build Project

Source: https://github.com/ulixee/hero/blob/main/double-agent-stacks/README.md

Builds the project using yarn workspaces. This is a prerequisite step before running scraper tests.

```bash
yarn build
```

--------------------------------

### Get and Set Inline Style - JavaScript

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-style-element.md

The style property allows you to get or set the inline style of an element. When getting, it returns a CSSStyleDeclaration object containing all style properties defined in the element's inline style attribute.

```JavaScript
const style = elem.style;
// To set a style:
elem.style.color = "red";
```

--------------------------------

### Launch Chrome 100 with Unblocked Agent

Source: https://github.com/ulixee/hero/blob/main/agent/docs/BrowserEngine.md

Demonstrates how to initialize an Unblocked Agent using a specific Chrome version (Chrome 100) managed by ChromeEngine. This involves importing necessary modules and configuring the agent with the ChromeEngine instance.

```javascript
const { Agent } = require('@ulixee/unblocked-agent');
const ChromeEngine = require('@ulixee/unblocked-agent/lib/ChromeEngine');
const Chrome100 = require('@ulixee/chrome-100-0');

const agent = new Agent({
  browserEngine: ChromeEngine.fromPackageName('@ulixee/chrome-100-0'),
});

// use chrome 100
```

--------------------------------

### Get and Set Inline Style - JavaScript

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-meta-element.md

The style property allows you to get or set the inline style of an element. When getting, it returns a CSSStyleDeclaration object containing all style properties defined in the element's inline style attribute.

```JavaScript
const style = elem.style;
// To set a style:
elem.style.color = "red";
```

--------------------------------

### Enable Debug Logging in Hero

Source: https://github.com/ulixee/hero/blob/main/docs/help/troubleshooting.md

This snippet demonstrates how to enable debug logging for Hero by setting the DEBUG environment variable to 'ulx' or 'ulx:devtools'. It shows how to import Hero and navigate to a URL.

```javascript
process.env.DEBUG = "ulx";
import Hero from '@ulixee/hero';

(async () => {
  const hero = new Hero();
  await hero.goto('https://url.com');
})();
```

--------------------------------

### Get and Set Inline Style - JavaScript

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-mod-element.md

The style property allows you to get or set the inline style of an element. When getting, it returns a CSSStyleDeclaration object containing all style properties defined in the element's inline style attribute.

```JavaScript
const style = elem.style;
// To set a style:
elem.style.color = "red";
```

--------------------------------

### Run BrowserStack Profiles

Source: https://github.com/ulixee/hero/blob/main/browser-profiler/README.md

Executes BrowserStack profiles. The specific plugin to run can be configured by editing the main/scripts/runBrowserstack.ts file.

```bash
$ yarn profile:browserstack
```

--------------------------------

### Wait for and Interact with New Tab

Source: https://github.com/ulixee/hero/blob/main/docs/basic-client/hero.md

This example demonstrates how to wait for a new tab to open, likely triggered by a user interaction like clicking a link, and then performs actions within that new tab.

```javascript
const url = 'https://ulixee.org/nopost';
const { document, activeTab } = hero;

await hero.goto('http://example.com');

// ...
// <a id="newTabLink" href="/newPage" target="_blank">Link to new target</a>
// ...

await document.querySelector('#newTabLink').click();
const newTab = await hero.waitForNewTab();

await newTab.waitForPaintingStable();
```

--------------------------------

### Get and Set Inline Style - JavaScript

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-font-element.md

The style property allows you to get or set the inline style of an element. When getting, it returns a CSSStyleDeclaration object containing all style properties defined in the element's inline style attribute.

```JavaScript
const style = elem.style;
// To set a style:
elem.style.color = "red";
```

--------------------------------

### Go to URL and Wait - Hero API

Source: https://github.com/ulixee/hero/blob/main/agent/docs/Page.md

Navigates the page to a given URL, waits for the navigation to complete, and then waits for the resource to be loaded by the Man-in-the-Middle. It supports optional timeouts and referrer settings.

```javascript
page.goto(url, options)
```

--------------------------------

### Get and Set Inline Style - JavaScript

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-map-element.md

The style property allows you to get or set the inline style of an element. When getting, it returns a CSSStyleDeclaration object containing all style properties defined in the element's inline style attribute.

```JavaScript
const style = elem.style;
// To set a style:
elem.style.color = "red";
```

--------------------------------

### Connect to Local and Remote Hero Core

Source: https://github.com/ulixee/hero/blob/main/docs/advanced-client/connection-to-core.md

Demonstrates how to instantiate a local Hero Core and connect to a remote Hero Core using ConnectionToHeroCore. It shows the basic setup for interacting with Hero instances.

```javascript
const { Hero: BaseHero } = require('@ulixee/hero');
const { Hero: PlaygroundHero } = require('@ulixee/hero-playground');

(async () => {
  // starts a Hero Core and automatically connects
  const local = new PlaygroundHero();
  // dials a Remote Core
  const remote = new BaseHero({
    ConnectionToHeroCore: ConnectionToHeroCore.remote('192.168.1.1:3444'),
  });
})().catch(console.log);
```

--------------------------------

### Get and Set Inline Style - JavaScript

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-li-element.md

The style property allows you to get or set the inline style of an element. When getting, it returns a CSSStyleDeclaration object containing all style properties defined in the element's inline style attribute.

```JavaScript
const style = elem.style;
// To set a style:
elem.style.color = "red";
```

--------------------------------

### Configure Viewport Settings

Source: https://github.com/ulixee/hero/blob/main/specification/README.md

Specifies the emulated screen size, window position, and scaling factor for the browser viewport. Includes optional settings for screen dimensions and proxy configurations.

```typescript
interface IViewport {
  width: number;
  height: number;
  deviceScaleFactor?: number;
  screenWidth?: number;
  screenHeight?: number;
  positionX?: number;
  positionY?: number;
  upstreamProxyUrl?: string;
  upstreamProxyUseSystemDns?: boolean;
  upstreamProxyIpMask?: object;
  ipLookupService?: string;
  proxyIp?: string;
  publicIp?: string;
}
```

--------------------------------

### Get and Set Inline Style - JavaScript

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-label-element.md

The style property allows you to get or set the inline style of an element. When getting, it returns a CSSStyleDeclaration object containing all style properties defined in the element's inline style attribute.

```JavaScript
const style = elem.style;
// To set a style:
elem.style.color = "red";
```

--------------------------------

### Get and Set Inline Style - JavaScript

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-body-element.md

The style property allows you to get or set the inline style of an element. When getting, it returns a CSSStyleDeclaration object containing all style properties defined in the element's inline style attribute.

```JavaScript
const style = elem.style;
// To set a style:
elem.style.color = "red";
```

--------------------------------

### Create and Use a Pool of Agents

Source: https://github.com/ulixee/hero/blob/main/agent/docs/Pool.md

Demonstrates how to create a Pool with a specified maximum number of concurrent agents and then create multiple agents. The example shows that creating more agents than the limit will cause subsequent agent creations to wait for availability.

```javascript
const { Pool } = require('@ulixee/unblocked-agent');

(async () => {
  const pool = new Pool({ maxConcurrentAgents: 2 });
  const agent1 = pool.createAgent();
  const page1 = await agent1.newPage();

  const agent2 = pool.createAgent();
  const page2 = await agent2.newPage();

  const agent3 = pool.createAgent();
  const page3 = await agent3.newPage(); // hangs waiting to for availability.
})();
```

--------------------------------

### Register Plugin with Absolute File Path

Source: https://github.com/ulixee/hero/blob/main/docs/basic-client/hero.md

Illustrates registering a client plugin by providing the absolute path to a file that exports one or more plugins. Hero will dynamically require this file.

```javascript
import Hero from '@ulixee/hero-playground';

const hero = new Hero();
hero.use(require.resolve('./CustomPlugins'));
```

--------------------------------

### Set Start of Range

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/range.md

Sets the start position of the Range to a specific node and offset. This is an asynchronous operation.

```javascript
range.setStart(node: Node, offset: number): Promise<void>
```

--------------------------------

### Register Plugin with Imported Module

Source: https://github.com/ulixee/hero/blob/main/docs/basic-client/hero.md

Shows how to register a client plugin by passing an already imported plugin module directly to the `use` method.

```javascript
import Hero from '@ulixee/hero-playground';
import ExecuteJsPlugin from '@ulixee/execute-js-plugin';

const hero = new Hero();
hero.use(ExecuteJsPlugin);
```

--------------------------------

### Get HTMLTemplateElement Client Left

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-template-element.md

Get the width of the left border of the HTMLTemplateElement. Returns a Promise resolving to a number.

```javascript
const templateElement = document.createElement('template');
// ... element must be in the DOM ...
const clientLeft = await templateElement.clientLeft;
```

--------------------------------

### Register Plugin with NPM Package Name

Source: https://github.com/ulixee/hero/blob/main/docs/basic-client/hero.md

Demonstrates how to register a client plugin by providing its NPM package name as a string. Hero will attempt to dynamically require the package.

```javascript
import Hero from '@ulixee/hero-playground';

const hero = new Hero();
hero.use('@ulixee/tattle-plugin');
```

--------------------------------

### Get HTMLTemplateElement Class Name

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-template-element.md

Get the class name of the HTMLTemplateElement as a string. This property reflects the 'class' attribute.

```javascript
const templateElement = document.createElement('template');
// ... set class attribute ...
const className = await templateElement.className;
```

--------------------------------

### Configure Emulation Profile Settings

Source: https://github.com/ulixee/hero/blob/main/specification/README.md

Defines various configurations for an EmulationProfile, including user agent, browser engine, device profile, and network options like DNS over TLS and proxy settings.

```typescript
interface IEmulationProfile {
  userAgentOption?: IUserAgentOption;
  browserEngine?: IBrowserEngine;
  deviceProfile?: IDeviceProfile;
  options?: IEmulationOptions;
  customEmulatorConfig?: object;
  logger?: IBoundLog;
  dnsOverTlsProvider?: {
    host: string;
    servername: string;
  } | null;
  geolocation?: IGeolocation;
  timezoneId?: string;
  locale?: string;
  viewport?: IViewport;
  showChrome?: boolean;
  showDevtools?: boolean;
  disableIncognito?: boolean;
  disableMitm?: boolean;
  noChromeSandbox?: boolean;
}
```

--------------------------------

### Get HTMLTemplateElement Offset Width

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-template-element.md

Get the width of the HTMLTemplateElement relative to the layout. Returns a Promise resolving to a number.

```javascript
const templateElement = document.createElement('template');
// ... element must be in the DOM ...
const width = await templateElement.offsetWidth;
```

--------------------------------

### Implement IUnblockedPlugin

Source: https://github.com/ulixee/hero/blob/main/specification/README.md

Demonstrates the basic implementation of the IUnblockedPlugin interface, showing how to add functionality to the onNewPage hook.

```typescript
class MyFirstPlugin implements IUnblockedPlugin {
  async onNewPage(page) {
    // do something
  }
}
```

--------------------------------

### Get HTMLTemplateElement Offset Height

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-template-element.md

Get the height of the HTMLTemplateElement relative to the layout. Returns a Promise resolving to a number.

```javascript
const templateElement = document.createElement('template');
// ... element must be in the DOM ...
const height = await templateElement.offsetHeight;
```

--------------------------------

### Collect HTTP User Agent Hints

Source: https://github.com/ulixee/hero/blob/main/double-agent/docs/output/collect-plugins.md

This module collects User Agent hints for a browser. These hints provide additional information about the browser and its environment, aiding in device detection and optimization.

```javascript
import Hero from '@ulixee/hero';

(async () => {
  const hero = await Hero.create();
  const uaHints = await hero.http.uaHints;
  console.log(uaHints);
  await hero.close();
})();
```

--------------------------------

### Generate Emulator Data

Source: https://github.com/ulixee/hero/blob/main/browser-profiler/README.md

Generates data for the @ulixee/unblocked-browser-emulator-builder workspace. This data is used for creating browser emulators.

```bash
$ yarn workspace @ulixee/unblocked-browser-emulator-builder generate
```

--------------------------------

### Get HTMLLIElement Title

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-li-element.md

Gets the title attribute of an HTMLLIElement, which appears in a popup when the mouse hovers over the element.

```javascript
const title = await hero.get('HTMLLIElement.title');
```

--------------------------------

### Basic Hero Usage

Source: https://github.com/ulixee/hero/blob/main/docs/overview/introduction.md

Demonstrates basic usage of the Hero headless browser. It navigates to a URL, retrieves the page title and the text content of the first paragraph, and then closes the browser instance.

```javascript
const Hero = require('@ulixee/hero-playground');

(async () => {
  const hero = new Hero();
  await hero.goto('https://example.org');
  const title = await hero.document.title;
  const intro = await hero.document.querySelector('p').textContent;
  await hero.close();
})();
```

--------------------------------

### Collapse Selection to Start

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/selection.md

Collapses the selection to the start of the first range currently in the selection. This operation is asynchronous and returns a Promise.

```javascript
await selection.collapseToStart()
```

--------------------------------

### Generate User Agents to Test

Source: https://github.com/ulixee/hero/blob/main/double-agent-stacks/README.md

Generates a userAgentsToTest.json file containing user agents for DoubleAgent testing. This is part of the initial test suite setup.

```bash
yarn 2
```

--------------------------------

### Define Plugin Emulation Profile

Source: https://github.com/ulixee/hero/blob/main/specification/README.md

This snippet defines the structure for an EmulationProfile, which is a collection of settings used to coordinate multiple plugins within the Unblocked Specification. It outlines the expected properties for configuring browser emulation.

```typescript
/**
 * A collection of "hooks" and an EmulationProfile to coordinate among many plugins.
 */
interface IEmulationProfile {
  // Properties related to emulation settings would be defined here
}
```

--------------------------------

### Get HTMLTemplateElement Title

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-template-element.md

Get the text that appears in a popup box when the mouse is over the HTMLTemplateElement. Returns a Promise resolving to a string.

```javascript
const templateElement = document.createElement('template');
// ... set title attribute ...
const titleText = await templateElement.title;
```

--------------------------------

### Get HTMLTemplateElement Offset Parent

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-template-element.md

Get the element from which all offset calculations are computed for the HTMLTemplateElement. Returns a Promise resolving to a SuperElement.

```javascript
const templateElement = document.createElement('template');
// ... element must be in the DOM ...
const offsetParent = await templateElement.offsetParent;
```

--------------------------------

### Implement Custom Logger for Hero

Source: https://github.com/ulixee/hero/blob/main/docs/help/troubleshooting.md

This example shows how to create a custom logger class that adheres to the interface expected by Hero for logging. It includes methods for stats, info, warn, error, and creating child loggers, using the 'debug' module for output.

```javascript
const debug = require('debug')('MyHero');
const Logger = require('@ulixee/commons/Logger');

let logId = 0;

class CustomLogger {
  boundContext: any;
  level: string;
  constructor(module, boundContext) {
    this.boundContext = boundContext;
    this.filename = module.filename;
  }
  stats(action, data) {
    debug(`STATS ${action}`, data);
    return (logId += 1);
  }
  info(action, data) {
    debug(`INFO ${action}`, data);
    return (logId += 1);
  }
  warn(action, data) {
    debug(`WARN ${action}`, data);
    return (logId += 1);
  }
  error(action, data) {
    debug(`ERROR ${action}`, data);
    return (logId += 1);
  }
  createChild(module, boundContext) {
    const Constructor = this.constructor;
    // @ts-ignore
    return new Constructor(module, {
      ...this.boundContext,
      ...boundContext,
    });
  }
  flush() {}
}

injectLogger(module => {
  return {
    log: new CustomLogger(module),
  };
});
```

--------------------------------

### Manage New Browser Instances with onNewBrowser

Source: https://github.com/ulixee/hero/blob/main/docs/plugins/core-plugins.md

The onNewBrowser hook is called when a new browser engine instance is started. It allows modification of launch arguments for the browser process. Dependencies include the IBrowser and IBrowserUserConfig interfaces.

```javascript
async onNewBrowser(browser, userConfig) {
  // Example: Add arguments to launch Chrome
  browser.engine.launchArguments.push('--disable-gpu');
}
```

--------------------------------

### Lookup Prefix by Namespace URI (JavaScript)

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/node.md

The `lookupPrefix()` method returns the prefix for a given namespace URI, or null if none is found. The result is implementation-dependent if multiple prefixes are possible. The `namespace` argument is the namespace URI to look up.

```javascript
node.lookupPrefix(namespace)
```

--------------------------------

### Get HTMLTemplateElement Class List

Source: https://github.com/ulixee/hero/blob/main/docs/awaited-dom/html-template-element.md

Get the list of class attributes for the HTMLTemplateElement as a DOMTokenList. This allows manipulation of the element's classes.

```javascript
const templateElement = document.createElement('template');
// ... add classes ...
const classList = templateElement.classList;
```