For context, I am building a React/Redux chrome extension that is a sit/stand timer. When an interval is up, the extension will pop up and give the options to stay in that posture for longer, or log that they have changed positions.
Since I cannot programmatically open the popup.html, I am thinking that I can use a content script to inject a modal into whatever tab the user is currently on.
I've been googling "Injecting React Component Into Chrome Extension" for a couple of hours now, and most of the articles are a couple of years old and have not worked for me.
If anyone has knowledge, a tutorial, or an alternative solution, that would be amazing. Thanks!
Related
I've recently updated my react app to the latest version 18, but since doing that the html in localhost disappears after a few seconds. When I go to dev tools and look at the in 'Elements', it's empty but all of the content is still on the page, I just can't interact with it (click links or buttons, etc.).
Does anyone know what is causing this as I need to know before I push my code to production, as I'm not sure if this is a development environment issue.
I'm more than happy to post screenshots of my code, but I don't even know which screenshots would be helpful/relevant. Let me know if you need any. Thanks
When I run Lighthouse for the project I am working on, I get
chrome-extension://fmkadmapgofadopljbjfkapdkoienihi/build/react_devtools_backend.js
as no1 causer of unused JS.
How is that making sense from a performance optimization perspective?
I can't control what extensions the user runs in his browser.
I also can't find anything about the React dev tools in the project.
Would highly appreciate if someone could shed some light on that issue.
I found the issue is because the file of the devTools is installed when the page is loading... and it is useless in production mode.
So go to the extension and right click on it.
Then go to the manage extensions.
Then find the "Allow this extension to read and change all your data on websites you visit" change it to "on click".
I am having an issue in Chrome only with the React DevTools. When I access my website, the React icon lights up and it acknowledges that React is in use, but the Components and Profiler tabs are not there. If I go to another website in Chrome that uses React, I can see the DevTools, so it's only my website. I've tried it on multiple computers and I still don't see those tabs. If I use Firefox React DevTools, it's works without issue. I've been digging around trying to find a solution without any luck. This issue only just began a few days ago, previously it worked just fine. The Redux-DevTools extension for Chrome does work for my website.
I didn't get a permanent solution yet but here is the workaround :
Change the chrome DevTools theme, only once it is required.
Now open devtools, you find the extension tab in DevTools.
You can again change the theme whatever you want to keep and this will fix your problem.
I'm so confused. The (github) widget works well on desktop, but something breaks on mobile browsers. I want (1) the css and (2) the this.props.date to be updated, on mobile as it is on desktop browsers. look at the (deleted from my codesandbox to save room, run from github, it is create-react-app) on desktop, and then look at it on mobile to notice these issues. I don't know specifically where in the code the mobile browsers is wrong. It is not polyfill startPad with create-react-app, I took that out. Is there another problem with create-react-app webpack I'm hitting?
codesandbox-code Edit: I deleted this when I was cleaning my github, you can see an optimized version of the calendar for use at https://codesandbox.io/s/recursing-paper-4vosh or https://github.com/NickCarducci/Wavepoint.la
glad china's calendar
Nearly three months later I reconstructed Glad's component to not use functions inside jsx, but that wasn't the problem (although I think it is better practice, right?)
(fixed, but not a clear answer) The problem was symptomatic of css designation for {inMonth} variable, which I made state and moved around... to parent component... basedate was the issue in a function isSameMonth() which somehow was getting the browsing date on Desktop, but not on mobile
(link to codesandbox Month component) anyway, here is my version of Glad's calendar, a lot easier to customize if you learned React post-2018, I guess
https://codesandbox.io/s/recursing-paper-4vosh?file=/src/components/Calendar/FullCalDrawer/MonthCalSlider.js (Tap bottom-right circle [half-way covered by 'open sandbox on mobile], Thumbprint logo to open calendar, then top left dots icon to open monthly view)... shows {inMonth} designation for in Child component's css on mobile now
This will also be on https://github.com/Wavepoint.la a day or so after this post
(I tried making it a codepen & jsbin but failed, need to move on)
I've ran into an issue with Safari on iOS 5.1.1 and Angular where I am doing paginated results. After I decide to leave the page that is hosting the app, and then come back to the page by using the browser's history back button.
The application is not initialized so as I scroll again, the pagination functionality is not triggered.
Since 5.1.1 doesn't provide a web inspector, I had to rely on console.log to print events that I want to see that it's executing. On initial load, I see everything ok, but when I am back through the back button nothing fires.
My usual ways of fixing this are not working. Here are the things I've tried:
Used manual bootstrapping of Angular app
Made the page not support caching and expire the page as soon as it's rendered.
Neither of these helped, which is why I am here asking for some suggestions. Unfortunately it's not a very easy thing to replicate through a Fiddle or a hosted HTML file so I am unable to provide one. Hoping that some of you may have experienced this before.
Thanks in advance for any help.
Answer is quite late and I hope you found a solution already but it might be useful for others.
Unfortunately I won't be able to answer why the app is not initialized (due to the lack of code) but I can give you some tools/tips to ease the debugging (assuming you have the iOS simulator).
Debuging on mobile safari can be done either :
with weinre and get the features of the web concole,
or by enabling remote debugging in Mobile Safari itself, see here
Yea, same problem here with iOS 7. It must send the DOM structure over before running any javascript. Kinda pointless...
Since the problem is with mobile safari and since it supports popstate event, you can use this event to detect when the user is back in combination with $location.path(), for example:
$(window).bind("popstate", function () {
alert(location.pathname + $location.path());
});