# Getting Started

You can refer a third-party base about Web3.0 login to support TokenPocket Extension quickly, such as: web3-onboard (<https://github.com/blocknative/web3-onboard>)

Or follow the steps below to complete the access to TokenPocket Extension

To develop with the TokenPocket Extension, install the [TokenPocket Extension](https://extension.tokenpocket.pro/#/) in the browser on your development machine.

Once the TokenPocket Extension is installed and running (make sure to backup your Secret Recovery Phrase), you should find that the new browser tab window\.ethereum has an available object in the developer console. This is how your website interacts with TokenPocket Extension.

You can review the full API for that object [here](https://help.tokenpocket.pro/developer-en/extension-wallet/api-reference/ethereum-provider-api).

### **Web3.0 Browser Detection**&#x20;

To verify if the browser is running TokenPocket Extension, copy and paste the code snippet below in the developer console of your web browser:

```javascript
if (typeof window.ethereum.isTokenPocket !== 'undefined') {
  console.log('TokenPocket Extension is installed!');
}
```

### **Detect** TokenPocket Extension <a href="#detecting-metamask" id="detecting-metamask"></a>

If you want to differentiate TokenPocket Extension from other Ethereum compatible browsers, you can use `ethereum.isTokenPocket`.

### **Connect to** TokenPocket Extension

"Connect to" or "log in" the TokenPocket Extension actually means "accessing the user's Ethereum account".

You should only initiate connection requests in response to direct user actions, such as button clicks. You should always disable the Connect button while a connection request is pending. You should never initiate a connection request on page load.Clicking the button calls the following method:

```javascript
ethereum.request({ method: 'eth_requestAccounts' });
```

**For example:**

{% tabs %}
{% tab title="HTML" %}

```html
<button class="enableEthereumButton">Enable Ethereum</button>
```

{% endtab %}

{% tab title="JavaScript" %}

```javascript
const ethereumButton = document.querySelector('.enableEthereumButton');

ethereumButton.addEventListener('click', () => {
  //Will Start the  TokenPocket Extension extension
  ethereum.request({ method: 'eth_requestAccounts' });
});
```

{% endtab %}
{% endtabs %}

This promise-returning function resolves with an array of hex-prefixed Ethereum addresses, which can be used as general account references when sending transactions.

Over time, this method is intended to grow to include various additional parameters to help your site request everything it needs from the user during setup.

Since it returns a promise, if you're in an async function, you may log in like this:

```javascript
const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
const account = accounts[0];
// We currently only ever provide a single account,
// but the array gives us some room to grow.
```

**Example:**

{% tabs %}
{% tab title="HTML" %}

```html
<button class="enableEthereumButton">Enable Ethereum</button>
<h2>Account: <span class="showAccount"></span></h2>
```

{% endtab %}

{% tab title="JavaScript" %}

```javascript
const ethereumButton = document.querySelector('.enableEthereumButton');
const showAccount = document.querySelector('.showAccount');

ethereumButton.addEventListener('click', () => {
  getAccount();
});

async function getAccount() {
  const accounts = await ethereum.request({ method: 'eth_requestAccounts' });
  const account = accounts[0];
  showAccount.innerHTML = account;
}
```

{% endtab %}
{% endtabs %}


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://help.tokenpocket.pro/developer-en/extension-wallet/guide/getting-started.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.