[bug] Using Rainbow Chrome Extension and rainbow-kit in dev environment causes Error in invocation of runtime.sendMessage

[softwarecurator]

trafficstars

Is there an existing issue for this?

• [X] I have searched the existing issues

RainbowKit Version

1.1.3

wagmi Version

1.4.5

Current Behavior

TypeError: Error in invocation of runtime.sendMessage(optional string extensionId, any message, optional object options, optional function callback): chrome.runtime.sendMessage() called from a webpage must specify an Extension ID (string) for its first argument.

Expected Behavior

No error lol

Steps To Reproduce

  "dependencies": {
    "@headlessui/react": "^1.7.17",
    "@heroicons/react": "^2.0.18",
    "@rainbow-me/rainbowkit": "^1.1.3",
    "@rainbow-me/rainbowkit-siwe-next-auth": "^0.3.2",
    "alchemy-sdk": "^2.10.1",
    "ethers": "^5.7.2",
    "mongoose": "^8.0.0",
    "next": "^14.0.1",
    "react": "^18",
    "react-dom": "^18",
    "react-hot-toast": "^2.4.1",
    "siwe": "^2.1.4",
    "swr": "^2.2.4",
    "viem": "^1.18.0",
    "wagmi": "^1.4.5"
  },

clicking connect just throws error

Link to Minimal Reproducible Example (CodeSandbox, StackBlitz, etc.)

No response

Anything else?

No response

[magiziz]

@softwarecurator Do you have a small reproducible example ? It'll be easier for us to reproduce this issue on our end. Otherwise we'll just install the packages you've provided, but not get the same error.

[DanielSinclair]

@softwarecurator Another follow-up question! Which browser are you using? Do you have any other extensions installed?

[magiziz]

@softwarecurator Any updates ?

[magiziz]

Closing this issue for now due to inactivity. Please raise another issue if the problem still persists.

[billsbooth]

Hitting this same issue; on Chrome, Version 122.0.6261.69 (Official Build) (arm64), have latest Rainbow Wallet, Metamask, and Phantom wallets installed.

[magiziz]

@billsbooth What exactly did you do to get the same error ? Is there a reproducible example you can show us ?

[RohanNero]

I got the same error while using Chrome Version 124.0.6367.119 (Official Build) (64-bit).

Not a real solution but changing Rainbow Wallet's This can read and change site data field to When you click the extension made the error stop showing up.

[AtelyPham]

I still have this issue on Chrome v125.0.6422.113 (Official Build) (arm64).

When I click to jump to the source code, the error line is here:

I believe this error originates from the function found here: https://github.com/rainbow-me/browser-extension/blob/3d2557372813e905f0bfa3e9e69d50bc1e8c15b4/src/core/messengers/internal/tab.ts#L23-L32.

[aspiers]

I am seeing this too, on Chrome 126.0.6478.61 (Official Build) (64-bit) and Rainbow 1.5.23.

[aspiers]

https://developer.chrome.com/docs/extensions/reference/api/runtime#method-sendMessage says the function signature is:

chrome.runtime.sendMessage(
  extensionId?: string,
  message: any,
  options?: object,
  callback?: function,
)

and documents the extensionId parameter as follows:

The ID of the extension to send the message to. If omitted, the message will be sent to your own extension/app. Required if sending messages from a web page for web messaging.

So it seems very likely that the culprit is the code on line 28 which calls chrome.runtime.sendMessage:

https://github.com/rainbow-me/browser-extension/blob/3d2557372813e905f0bfa3e9e69d50bc1e8c15b4/src/core/messengers/internal/tab.ts#L28

and that at least one of the following is true:

• it's incorrectly being called without the extensionId parameter
• the containing helper function should never be called from within the webpage (e.g. from a content script)
• when called from within the webpage, tabId is supposed to be set but isn't for some reason

More details here about how the chrome.runtime API should be used for messaging can be found here: https://developer.chrome.com/docs/extensions/develop/concepts/messaging#external-webpage

[Pfed-prog]

The error is still there.

Open-source code base https://github.com/Pfed-prog/NextJsExplorer

and a link in the example https://evmexplorer.com/explore/Aerodrome%20Finance

[gtmcknight]

I get this with every react/next project i work on with Rainbow enabled.

the only thing that makes it go away is setting rainbow wallet extension to not load until you click on it. but that causes an insane bug within the wallet where it refuses to load your balances anymore.