shaheem-khanzada / chrome-extension-react-metamask-boilerplate

This is a chrome extension boilerplate build with react and it support web 3 and metamask login so clone it and give a star and save your many gulp hours
7 stars 2 forks source link

Wallet Connect #2

Open javaspeak opened 1 year ago

javaspeak commented 1 year ago

Thanks for your example.

When running code like:

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      if (tabs && tabs[0] && tabs[0].id) {
        const currentTabId = tabs[0].id;

        chrome.scripting.executeScript({
          target: { tabId: currentTabId },
          world: 'MAIN',
          files: ['checkWindowEthereum.js'],
        });
      } else {
        console.error('Unable to determine the current tab or tabId.');
      }
    });

it is possible to get access to window.ethereum. This config allows for that:

world: 'MAIN',

In checkWindowEthereum.js I had:

console.log('window.ethereum', window.ethereum);

I was thinking that I could then send a CustomEvent with window.ethereum to the content script specified in the manifest and then inject window.ethereum into the window of the content script context.

However this is not what we want as we want the wallet to be associated with the extension url in a tab which looks like:

  chrome-extension://oahhaapnfpkfnbgeopliehfgenifngde/register.html

Unfortunately cannot get chrome.scripting.executeScript(..) to work with a tab with extension code in it. It works from within content scripts.

Do you know of a way to integrate Wallet Connect into a chrome extension so that it can pick up browser installed wallets?

I appreciate that Meta Mask has a special port provider that does not depend on window.ethereum but the other browser extension wallet providers have not copied yet as far as I know. Maybe they perceive connecting browser wallets to chrome extensions is an edge case they do not care about. Hence my motivation to get Wallet Connect working in a chrome extension.

Any new stuff you have learnt about this would be much appreciated.

Thank you for your time

JD

showbazi commented 5 months ago

Thanks for your example.

When running code like:

chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
      if (tabs && tabs[0] && tabs[0].id) {
        const currentTabId = tabs[0].id;

        chrome.scripting.executeScript({
          target: { tabId: currentTabId },
          world: 'MAIN',
          files: ['checkWindowEthereum.js'],
        });
      } else {
        console.error('Unable to determine the current tab or tabId.');
      }
    });

it is possible to get access to window.ethereum. This config allows for that:

world: 'MAIN',

In checkWindowEthereum.js I had:

console.log('window.ethereum', window.ethereum);

I was thinking that I could then send a CustomEvent with window.ethereum to the content script specified in the manifest and then inject window.ethereum into the window of the content script context.

However this is not what we want as we want the wallet to be associated with the extension url in a tab which looks like:

  chrome-extension://oahhaapnfpkfnbgeopliehfgenifngde/register.html

Unfortunately cannot get chrome.scripting.executeScript(..) to work with a tab with extension code in it. It works from within content scripts.

Do you know of a way to integrate Wallet Connect into a chrome extension so that it can pick up browser installed wallets?

I appreciate that Meta Mask has a special port provider that does not depend on window.ethereum but the other browser extension wallet providers have not copied yet as far as I know. Maybe they perceive connecting browser wallets to chrome extensions is an edge case they do not care about. Hence my motivation to get Wallet Connect working in a chrome extension.

Any new stuff you have learnt about this would be much appreciated.

Thank you for your time

JD

Actually I am trouble integrating this in my current project where we are using the react-vite-typescript because there it is throwing error such as PortStream is not a constructor etc etc................... so how are you doing it can you please help me with it