Nocturnal Pajama Mutants
    TypeScript icon, indicating that this package has built-in type declarations

    3.1.3 • Public • Published

    Build Status Coverage Status dependencies Status devDependencies Status NPM Version

    Real-time bidirectional event-based and Promise friendly communication in Chrome extensions/apps inspired by Socket.IO.


    Use with Webpack

    If you build your project with Webpack, you can install via npm:

    npm install

    Then you can import it in your project:

    // es6
    import { createClient, createServer, send } from ''
    // commonjs
    const { createClient, createServer, send } = require('')

    Use with <script>

    Download chrome-connect.js from unpkg(min version).

    Then reference it in your html:

    <script src="path/to/chrome-connect.js"></script>
    <!-- now you will get a global variable named chromeConnect -->
     var createClient = chromeConnect.createClient
     var createServer = chromeConnect.createServer
     var send = chromeConnect.send


    Send message from content script to background

    First, create a server in background page(or other pages like popup, options):

    import { createServer } from ''
    const server = createServer()

    Second, listen connect event on server:

    server.on('connect', client => {
      // client is a Client object

    Finally, create a client in content script:

    import { createClient } from ''
    // client is an Client object
    const client = createClient()

    For more information about the Client object please read the API below.

    Send message from background to content script

    Only different with the above steps is: when you create client in background, you must specify the tab id in createClient.

    For example, in your background:

    import { createClient } from ''
    const clientInBackground = createClient(1001) // the tab id you want to connect

    Using namespace

    Server can optional has a namespace:

    import { createServer } from ''
    const serverTweets = createServer('tweets')
    serverTweets.on('connect', client => {
      client.on('tweet', tween => {
    const serverNotification = createServer('notification')
    serverNotification.on('connect', client => {
      client.on('notice', () => {

    You can connect to different server in client:

    import { createClient } from ''
    const clientTweets = createClient({
      namespace: 'tweets'
    clientTweets.send('tweet', ' is awesome')
    const clientNotification = createClient({
      namespace: 'notification'

    Get response from server

    You can send response from server to the client. For example:

    // in server
    import { createServer } from ''
    const server = createServer()
    server.on('connect', client => {
      client.on('Do I have enough money?', (data, resolve, reject) => {
        if (data > 100) {
          resolve('Yes you do.')
        } else {
          reject('You need more money.')
    // in client
    import { createClient } from ''
    const client = createClient()
    // pass true as the last params to get response
    client.send('Do I have enough money?', 50, true).catch(msg => {
      console.log(msg) // 'You need more money.'
    client.send('Do I have enough money?', 10000, true).then(msg => {
      console.log(msg) // 'Yes you do.'

    Send one-time message

    If you want to send one-time message and don't want to create a client, you can use send method:

    import { send } from ''
      name: 'Do I have enough money?',
      data: 10000,
      needResponse: true
    }).then(msg => {
      console.log(msg) // 'Yes you do.'



    Return a Server object.

    Note: same namespace get the same Server object.

    import { createServer } from ''
    createServer() === createServer() // true
    createServer('namespace') === createServer('namespace') // true
    createServer('foo') === createServer('bar') // false


    Create from createServer method.

    Server#send(name[, data])

    Send message to all clients that connect to this server.

    Server#on(event, handler)

    Listen event. For now there is only one event: connect.

    createClient([id, options])

    Return a Client object.

    If you want to connect to content script from background, then id is necessary and must be a tab id.

    options has these property:

    • namespace: which server you want connect
    • frameId: if you are connect to content script from background, you can specify a frameId to connect only this frame.


    Create from createClient, or provided in server.on('connect') event.


    The native chrome Port object.


    If this client is connect from webpage or other extension, then this property is true.

    Client#send(name[, data, needResponse])

    Send message to server or client.

    Client#on(name, handler(data, resolve, reject))

    Receive message from server or client. Use resolve or reject method to response this message to server or client.

    Client#broadcast(name[, data])

    Note: this method only exist in server.

    Sending a message to everyone else except for the connection that starts it.


    Disconnect the connection.


    Send one-time message.

    The options has these property:

    • id: optional. If you want to connect to content script from background, then id is necessary and must be a tab id.
    • frameId: optional. See createClient([id, options]) API.
    • namespace: optional. See createClient([id, options]) API.
    • name: the message name.
    • data: the data you want send.
    • needResponse: if you need response, then set this to true




    npm i

    DownloadsWeekly Downloads






    Last publish


    • milklee