### Installing Project Dependencies (Yarn)

Source: https://github.com/psychedelic/plug/blob/develop/README.md

Installs all necessary project dependencies listed in the package.json file using the Yarn package manager.

```shell
yarn install
```

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

### Example Manifest with Multiple Vendor Prefixes (JS)

Source: https://github.com/psychedelic/plug/blob/develop/README.md

Demonstrates using a pipe `|` within the vendor prefix (`__chrome|opera__`) to apply the same value to multiple specified browsers.

```js
{
  __chrome|opera__name: "SuperBlink"
}
```

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

### Starting Opera Dev Watch (Yarn)

Source: https://github.com/psychedelic/plug/blob/develop/README.md

Starts the development server with file watching enabled, specifically configured for the Opera browser.

```shell
yarn run dev:opera
```

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

### Starting Firefox Dev Watch (Yarn)

Source: https://github.com/psychedelic/plug/blob/develop/README.md

Starts the development server with file watching enabled, specifically configured for the Firefox browser.

```shell
yarn run dev:firefox
```

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

### Starting Chrome Dev Watch (Yarn)

Source: https://github.com/psychedelic/plug/blob/develop/README.md

Starts the development server with file watching enabled, specifically configured for the Chrome browser.

```shell
yarn run dev:chrome
```

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

### Example Manifest with Vendor Prefixes (JS)

Source: https://github.com/psychedelic/plug/blob/develop/README.md

Illustrates how to define browser-specific values in the source manifest.json using double underscore prefixes followed by the browser name and another double underscore.

```js
{
  "__chrome__name": "SuperChrome",
  "__firefox__name": "SuperFox",
  "__edge__name": "SuperEdge",
  "__opera__name": "SuperOpera"
}
```

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

### Example Element Selection using data-testid in HTML

Source: https://github.com/psychedelic/plug/blob/develop/tests/README.md

This snippet demonstrates the required pattern for UI elements within the Plug Extension to be selectable by E2E tests. Elements must include the `data-testid` attribute with a unique identifier, allowing Puppeteer to target them reliably.

```HTML
<Button data-testid="add-network-button" variant="rainbow" onClick={handleAddNetwork} />
```

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

### Building Production Extension (Yarn)

Source: https://github.com/psychedelic/plug/blob/develop/README.md

Compiles and packages the web extension for production use across all supported browsers, outputting builds into browser-specific directories.

```shell
yarn run build
```

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

### Using Message Handler in Content Script (TypeScript)

Source: https://github.com/psychedelic/plug/blob/develop/docs/DOCS.md

Demonstrates how a browser extension's content script can initialize the message handling mechanism by calling `listenMessages` and passing a controller object responsible for processing incoming requests from the web page.

```TypeScript
import { listenMessages } from 'web-message-handler';
import controllers from './controllers';

listenMessages(controllers);
```

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

### Implementing Web Page Provider Function (TypeScript)

Source: https://github.com/psychedelic/plug/blob/develop/docs/DOCS.md

Shows how a function exposed by the injected provider object (e.g., `signTransaction`) can use the `sendMessage` utility from the message handler to send a specific request method and parameters to the wallet/extension and return the resulting promise.

```TypeScript
import { sendMessage, Res } from 'web-message-handler';

export const signTransaction = (transaction: any): Promise<Res> => {
  // Custom Logic...
  return sendMessage('sign_transaction', [transaction]);
};
```

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

### Authenticate with GitHub Package Registry (npm)

Source: https://github.com/psychedelic/plug/blob/develop/README.md

This command authenticates the npm client with the GitHub Package Registry for the @psychedelic scope. It requires a personal access token with 'repo' and 'read:packages' scopes, which is used as the password during login.

```Shell
npm login --registry=https://npm.pkg.github.com --scope=@psychedelic
```

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

### Calling Provider Function from Webpage (JavaScript)

Source: https://github.com/psychedelic/plug/blob/develop/docs/DOCS.md

Illustrates how a web application interacts with the injected provider object, typically available on `window.plug` or `window.ic`, by calling a specific method like `signTransaction` and handling the asynchronous result using promises.

```JavaScript
window.plug.signTransaction('my-tx')
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.error(err);
  });
```

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

### Compiled Manifest for Chrome/Opera (JS)

Source: https://github.com/psychedelic/plug/blob/develop/README.md

Shows the resulting manifest snippet when the build target is Chrome or Opera, demonstrating how the `__chrome|opera__name` key is transformed into the standard `name` key.

```js
{
  "name": "SuperBlink"
}
```

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

### Compiled Manifest for Chrome (JS)

Source: https://github.com/psychedelic/plug/blob/develop/README.md

Shows the resulting manifest snippet when the build target is Chrome, demonstrating how the `__chrome__name` key is transformed into the standard `name` key.

```js
{
  "name": "SuperChrome"
}
```

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

### Injecting Provider Script into Webpage (TypeScript)

Source: https://github.com/psychedelic/plug/blob/develop/docs/DOCS.md

Provides a draft function used by a browser extension's content script to dynamically create a script tag and append it to the document, thereby injecting the provider script into the web page's execution context.

```TypeScript
const injectScript = (filePath: string, tag: string): void => {
  const node = documents.getElementsByTagName(tag)[0];
  const script = document.createElement("script");

  script.setAttribute("type", "text/javascript");
  script.setAttribute("src", filePath);

  node.appendChild(script);
};

// usage
injectScript(chrome.extension.getURL("provider-script.js"), "body");
```

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

### Implementing Browser Message Handler (TypeScript)

Source: https://github.com/psychedelic/plug/blob/develop/docs/DOCS.md

Defines TypeScript types for JSON RPC requests and responses and provides core functions for sending, receiving, and listening for messages between a web page and a wallet/extension using window.postMessage. It includes a promise-based approach for handling requests and responses based on message IDs.

```TypeScript
export type Error = {
  code: number,
  message: string,
  data?: any,
};

export type Req = {
  jsonrpc: '2.0',
  method: string,
  params: any[],
  id?: string | number,
};

export type Res = {
  jsonrpc: '2.0',
  result?: any,
  error?: Error,
  id: string | number,
};

type Controller = (req: Req) => null | Res;

export const sendMessage = (method: string, params: any[]): Promise<Res> => new Promise((resolve, reject) => {
  const messageId: number = createUniqueID();
  const req: Req = {
    id: messageId,
    method,
    params,
    jsonrpc: '2.0',
  };

  // Custom logic ...

  window.postMessage(req, '*');
  window.addEventListener('message', (event: { data: Res }) => {
    const { data } = event;
    if (data.id === messageId) {
      if (data.error) {
        return reject(error);
      }

      resolve(data.result);
    }
  });
});

export const sendResponse = (res: Res): void => {
  window.postMessage(res, '*');
};

export const listenMessages = (controller: Controller): void => {
  window.addEventListener('message', (event: { data: Req }) => {
    const { data } = event;
    const res = controller(data);

    if (res) {
      window.postMessage(res, '*');
    }
  });
};
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.