How to connect a Chrome extension made with React to Metamask and other wallets? - reactjs

I need to connect Metamask to a Chrome extension I'm doing. I'm not a crypto expert, I'm using ethers js and following some tutorials but the extension doesn't recognize that Metamask is in the browser. I run the same scripts in a normal web app (not Chrome extension) and everything works perfectly and I can interact with Metamask and all of that. I've been trying to understand why it's not working and I'm kind of lost at this point.
I've been reading the Chrome Developers documentation and it seems like there's a way to send messages with some data between two extensions. But I can't figure out how to introduce that to my project, and also the amount of data you can share seems to be limited somehow.
I've searched in Stack Overflow but I don't understand the answers to those questions. Or how to apply them to my case.
I found this but it looks that only works with MetaMask and not with other wallets: Connect to MetaMask via chrome extension

Use https://github.com/MetaMask/extension-provider.
You can do it simple! I can do it with my chrome extension + metamask easy.
This lib helps a lot.

Related

React UI does not make a request to an API on Android device but it does it in Linux

I am writing an app in React in order to make a beautiful UI for my API. When I run it in Arch Linux's Firefox it works well. However, when I run it in my Android device, it seems like the initial API call (inside the useEffect of the App.js) is not done, not in Firefox neither in Chrome.
I am serving the app in the computer and then opening it with my local IP address (not localhost, obviously) with my phone.
Does anyone know why isn't that working in the phone even though it is working in my Linux machine?
The source code (of the UI and of the API) is in my Github (https://github.com/ToniIvars/Localdrive).
Thank you in advance.
I suffer a similar problem recently, may relate to unreachable IP address or some security problem.
I recommend using the chrome remote debug tool to make everything clear, in short that's how to do that:
First, open your phone debug mode, connect it to the PC with adb debug enable
Open chrome on your phone
Open chrome on your PC, go to 'chrome://inspect#devices'
Wait for a second and you should see your device, click inspect on it
Soon you can find out what cause the problem
Here's a full tutorial: https://developer.chrome.com/docs/devtools/remote-debugging/

Webcam not working on Production, not showing permits popup

I have a project using React but the component WebCam that works perfectly in all browsers locally; but when tested in a server, doesn't show the permits pop-up to allow the use of the camera.
I don't think the code is the problem. Instead some security on the browsers. I tried to give permissions directly to the site on Chrome and I can't change it. And is not blocked, on either browser.
Some other considerations:
I haven't install any ssl certificate, is just a small testing server to play, so I wasn't thinking to install them for the moment.
could this be the problem?
The getUserMedia API requires you to serve the page over HTTPS (or on localhost). So if you haven’t set that up, that is why it’s not working in production.
See the Security section of this documentation for more details: https://developer.mozilla.org/en-US/docs/Web/API/MediaDevices/getUserMedia#security

How to get rid of site is not secure for api

I created an API in Spring for my react app. When I was ready to publish site I noticed that the app can not call the api. I went to the api link and noticed it said this site is not secure. I did create a self assigned certificate so that https would work but its giving me this issue now. Until I click trust the react app will not fetch the data. Once I click trust once it works but other people using my site wont know that. How can I fix my API so that it is trusted?
The problem is that you're creating an SSL Certificate build by yourself. Browsers only accept trusted certificates signed by companies.
You will need to buy a certificate and use it on your app. Here's a source of signed certificates: https://www.getssl.com/
I did never used the free options, but some people say it works fine too: https://www.sslforfree.com/
For better understanding of that I strongly recommend you the following video: https://www.youtube.com/watch?v=uNdYea6OCuA
Hope it helps you bro.

Force phonegap disconnect

I need to test the online and offline events written in my app. I'm testing the app through my browser so I'd like some code that simulates a disconnect from the internet in phonegap. As in forcing it to go offline then back online, client side. How can I do this?
Have you already tried use PhoneGap Emulation? There is a lot of features.
You can also test directly on device. Android logcat can receive the console.log of browser. I belive this works with xcode too.

Html scraping with JS support

I am trying to scrape a company web page for automation purposes but the embedded scripts in the page prevent me to fully replicate the request. The biggest pain is in the script generated cookies.
I thought of automating IE with Watin but I am not comfortable with this solution under a service application.
What are your advices in this situation?
Thanks in advance.
screen-scraper is another tool (java based) that aims at being easy to use.
The basic idea is as Byron said- you will have to figure out what cookies are getting set (web proxy tools like Fiddler, Charles, or browser extensions like Firebug and Chrome's dev tools will come in handy).
So, you don't necessarily have to read or even execute the javascript on the page to imitate the same requests. Just use a proxy tool to see what cookies your browser is sending to the server, and once you know what cookies the site expects to receive, set them manually in whatever script or tool you use to do your scraping and you'll be golden.
You have several options.
The easiest is to generate the cookies in your script. You will have to read the javascript code yourself and figure out what it is doing and duplicate. Fiddler is always your friend when scraping.
Htmlunit is a java web browser library with JavaScript support. It has no gui and is made for testing web applications.
Selenium will driver a browser much the same way watir does, but it has rich api support for most major languages.

Resources