Chrome Extension

Simple Summary
A protocol defined for ICONex to message with external web page.
Abstract
This document describes a way for external web page to request and response for about icon account such as getting icx address, authority for transaction and signature.
Motivation
This protocol allows third-party developer to use ICON network through ICONex
Specification
You need to implement two part of dispatching event to ICONex and listening event from ICONex using CustomEvent. The type and payload of events is assigned to detail field in CustomEvent.
Data in detail field:
Field
Type
Description
type
string
Pre-defined type of events
payload
any
Data required for the request or response.
Dispatch Event for Request
1
const customEvent = new CustomEvent('ICONEX_RELAY_REQUEST', detail: { 
2
    type: '...',
3
    payload: {...}
4
});
5
window.dispatchEvent(customEvent);
Listen Event for Response
1
const eventHandler = event => {
2
 const { type, payload } = event.detail;
3
 switch (type) { ... }
4
}
5
window.addEventListener('ICONEX_RELAY_RESPONSE', eventHandler);
Methods
HAS_ACCOUNT
REQUEST_HAS_ACCOUNT Requests for whether iconex has any icon wallet.
RESPONSE_HAS_ACCOUNT Returns boolean-typed result.
1
const customEvent = new CustomEvent('ICONEX_RELAY_REQUEST', detail: { 
2
    type: 'REQUEST_HAS_ACCOUNT'
3
});
4
window.dispatchEvent(customEvent);
5
​
6
const eventHandler = event => {
7
 const { type, payload } = event.detail;
8
 if (type === 'RESPONSE_HAS_ACCOUNT') {
9
        console.log(payload); // true or false
10
 }
11
}
12
window.addEventListener('ICONEX_RELAY_RESPONSE', eventHandler);
HAS_ADDRESS
REQUEST_HAS_ADDRESS Requests for whether iconex has the icon wallet with specific address.
RESPONSE_HAS_ADDRESS Returns boolean-typed result.
1
const customEvent = new CustomEvent('ICONEX_RELAY_REQUEST', detail: { 
2
     type: 'REQUEST_HAS_ADDRESS',
3
     payload: 'hx19870922...'
4
});
5
window.dispatchEvent(customEvent);
6
​
7
const eventHandler = event => {
8
 const { type, payload } = detail
9
 if (type === 'RESPONSE_HAS_ADDRESS') {
10
        console.log(payload); // true or false
11
 }
12
}
13
window.addEventListener('ICONEX_RELAY_RESPONSE', eventHandler);
ADDRESS
REQUEST_ADDRESS Requests for the address to use for service.
RESPONSE_ADDRESS Returns the icx address selected by user.
1
const customEvent = new CustomEvent('ICONEX_RELAY_REQUEST', detail: { 
2
     type: 'REQUEST_ADDRESS' 
3
});
4
window.dispatchEvent(customEvent);
5
​
6
const eventHandler = event => {
7
 const { type, payload } = detail;
8
 if (type === 'RESPONSE_ADDRESS') {
9
        console.log(payload); // e.g., hx19870922...
10
 } 
11
}
12
window.addEventListener('ICONEX_RELAY_RESPONSE', eventHandler);
JSON-RPC
REQUEST_JSON-RPC Requests for calling standard ICON JSON-RPC API. (User confirmation is required in some cases.)
RESPONSE_JSON-RPC Returns the JSON-RPC response.
1
const customEvent = new CustomEvent('ICONEX_RELAY_REQUEST', detail: { 
2
     type: 'REQUEST_JSON-RPC',
3
     payload: {
4
        jsonrpc: "2.0",
5
        method: "icx_method",
6
        id: 6339,
7
        params: { 
8
            from: "hx19870922...",
9
 ...
10
 }
11
 }
12
});
13
window.dispatchEvent(customEvent);
14
​
15
const eventHandler = event => {
16
 const { type, payload } = detail;
17
 if (type === 'RESPONSE_JSON-RPC') {
18
        console.log(payload); // e.g., {"jsonrpc": "2.0", "id": 6339, "result": { ... }}
19
 }
20
}
21
window.addEventListener('ICONEX_RELAY_RESPONSE', eventHandler);
SIGNING
REQUEST_SIGNING Request for only signing tx hash. (User confirmation is always required.)
RESPONSE_SIGNING Returns signature.
1
const customEvent = new CustomEvent('ICONEX_RELAY_REQUEST', detail: { 
2
    type: 'REQUEST_SIGNING',
3
    payload: {
4
        from: 'hx19870922...',
5
        hash: '0x13979...'
6
 }
7
});
8
window.dispatchEvent(customEvent);
9
​
10
const eventHandler = event => {
11
 const { type, payload } = detail
12
 if (type === 'RESPONSE_SIGNING') {
13
        console.log(payload) // e.g., 'q/dVc3qj4En0GN+...'
14
 }
15
}
16
window.addEventListener('ICONEX_RELAY_RESPONSE', eventHandler);

BTP - Previous

Appendix

Next - ICONex Connect

iOS

Copy link

Contents

Dispatch Event for Request

Listen Event for Response

Methods