1

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!

user12457151
  • 853
  • 2
  • 12
  • 25
  • 1
    Put it inside an iframe, [example](https://stackoverflow.com/a/25100953), [tutorial](https://itnext.io/create-chrome-extension-with-reactjs-using-inject-page-strategy-137650de1f39). – wOxxOm Apr 14 '21 at 05:03
  • @wOxxOm, that tutorial you linked is actually something I was trying to follow. Once I ejected CRA, I couldn't get my extension to load into chrome. I think that tutorial had outdated info for earlier versions of CRA. I read through the issues on Github as well and tried to follow those but no luck :( – user12457151 Apr 14 '21 at 05:09
  • Start with the simple example I linked so you understand the underlying mechanics, then proceed with adding React. Note that the question is currently too broad and thus unanswerable, you need to add an [MCVE](/help/mcve). – wOxxOm Apr 14 '21 at 05:14
  • Hey @wOxxOm, I will be trying out the simple example tomorrow. Since I was already underway with the linked tutorial, I decided to give it another shot and was able to get the component to inject onto a page, but now I can't load up a normal extension popup. I started from scratch with the tutorial, listed the exact steps I took, and put more details about the bug in the readme in the below repo.: https://github.com/willliuwillliu/reactextensioninject – user12457151 Apr 14 '21 at 06:30
  • @user12457151 It works for me. Instead of ejecting, use craco like explained here: https://blog.logrocket.com/creating-chrome-extension-react-typescript/ – Florian Walther Jun 15 '22 at 07:31

0 Answers0