I see many tutorials on how to inject a React app as a content script OR as browser action popup for a Chrome extension, but I want to do both: I want to be able to inject certain React components as content scripts, but then also have certain other components render as the popup when you click on the extension icon. Is this even possible?
Related
I want to add a button to my React Web App that opens our PWA.
I was able to get the "Install" dialog to open by caching the "beforeinstallprompt" event and triggering it with a button but now I'm looking for a way to open the "Open with" dialog in chrome that allows the user to launch the (already installed) PWA, or open the PWA itself on the click of the button within the app but I'm unable to find any resources.
There is a way to do this, you could do the following:
<a href='https://myappurl.com' target='_blank'>Open PWA</a>
The target='_blank' is important, also the url specified in the href attribute needs to be the same as the one specified in the scope, if the scope is "." then any url within your app will open the PWA, this will work in Android with Chrome browser, I haven't tested this on iPhone.
I'm using material UI 4.9.x and it doesn't seem possible to use MUI in an iframe with the global styles.
I'm trying to use a React portal to inject the content into the iframe.
THAT part works and my MUI context menu works properly, just has the wrong styles.
I'm trying to inject the styles via CssBaseline but that gets injected into the host window not the iframe window.
I've verified this by looking at the DOM and I can see the elements created there under and not in the iframe.
How would I go about injecting this, completely, into the iframe window.
One idea I had was to change the current / global document and window objects to represent the iframe but worried that might be too hacky.
I have a chatbot running on some port. I have integrated it inside an iframe in a website. Is there any way to display an popup or modal outside of that iframe when clicking some link inside that chatbot?
There is a very cool concept in react called React Portal which allow you to render your component on any specific element even outside of your Root App.js component.
Is it possible to fire custom HTML from a mobile container in Google Tag Manager.
I'm looking to avoid updating app in app store and trying to replicate website which fires javascript code in it's tag manager container.
No, it's not possible to fire (or even create) a custom HTML tag in a mobile container because you are not technically working with HTML. If you have your mobile container created, you will notice that when you click to create a new Tag, "Custom HTML" is not available.
FineUploader is great! But I have such a problem: I use React Bootstrap as my UI framework. I need upload button, but after user selects some image file, they need to deal with the image first in a modal dialog window of React Bootstrap, perhaps rotate it, or scale it, or crop it, etc. And when user clicks "Finish" button, then the image should be uploaded to the Node.js server, and display progress bar in the modal dialog body. After the server has received all of the file, then the modal dialog should be closed.
I read through the code of FindUploader, but can't find what I need. FineUploader do have FineUploaderBasic class, with it I can pass the upload button element. But I can't turn the FineUploaderBasic object into FineUploader object, and initialize the template when the modal dialog open. I can't just make the template invisible first, and display it when the modal open. Because React Bootstrap won't add modal into the DOM before user opens the modal.
So should I define a new method to turn a FineUploaderBasic object into a FineUploader object? Or is there any other way to make it?