在插件中打开插件钱包


业务中的一个需求,需要在一个插件中打开另外一个插件并获取授权信息,具体来说,就是在自己的插件中打开 metamask 获取一些授权信息。花了不少时间来研究。记录一下
在区块链的业务逻辑中,通过网页打开metamsk是比较常见的,而在一个插件中打开另外一个插件并获取授权信息就比较少了,但是这种需求又是真实存在的,网上能找到的资料也很少。通过在上面的代码仓库, 我找到这个方法,提示metamaks中有一个js库可以connect metamask 钱包
https://stackoverflow.com/questions/69957758/connect-to-metamask-via-chrome-extension
就是这个库
https://github.com/MetaMask/extension-provider
但是在跑的时候,发现有报错:
`_stream_readable.js:529 Uncaught ReferenceError: process is not defined`
感觉可能是这个库年久失修,跑不起来了
在这个库的 issue 中找到这个回答

https://github.com/MetaMask/extension-provider/issues/29#issuecomment-1486397670

这个人提到他自己写了个demo,可以在插件中链接metamask:
https://github.com/fisand/webext-dapp-template
拉下来之后,确实可以。遂参照这个代码集成进去自己的插件,里面主要是用到了wagmi这个库:
先把这个wagmi装上
yarn add wagmi viem
然后按照仓库中的demo跑一下,发现跑不起来,报错:
Declaration or statement expected.
找了一番,发现是ts版本太低,我把ts版本升级后解决了此报错
https://github.com/wagmi-dev/abitype/issues/160#issuecomment-1619128204
再跑,还是报了这个错误:
_stream_readable.js:529 Uncaught ReferenceError: process is not defined
我看到这个报错的指向,是metamask里的 object-multiplex 用到了 stream-browserify 这个包,还是这个错误! 在demo中可以,在自己的插件中不行,非常明显是自己的环境配置有问题。 自己想想之前自己一直在metamask相关的找 Process error 的结局方案,有可能是因为 stream-browserify 导致的这个错误。所以之前才一直找不到,于是搜索关键字
Process is not defined triggered by stream-browserify
找到了这个回答
https://stackoverflow.com/questions/68542553/webpack-5process-is-not-defined-triggered-by-stream-browserify
配置好之后,依然报错。无奈,项目中用到了webpack和技术比较老,这种报错很有可能还是是因为webpack配置问题或者系统版本过老导致的,于是继续寻找这个问题的方案:
https://blog.csdn.net/shuishuixiaoping/article/details/127432265
按照这个链接配置之后, 插件终于成功运行,测试链接metamask 和 adress获取终于正常!
最后感慨一下,当时为了加快开发速度,使用旧的架构的代码环境来二次开发,后来造成的种种问题和bug,用来解决这些东西所花的时间可能已经远超过了当时二次开发节省的时间了。还要面临将来重构的种种问题,其实是得不偿失的。
参考代码