Day-9: Stuck in Creating React Chrome Extension

Today is  May 2nd, 2023, and my plan is to develop a Chrome extension using React. Having completed the three projects outlined in the Chrome extension documentation, as mentioned in my previous blogs, I am now eager to use React to build my ultimate product, ShowcaseXS. 

I have researched various tutorials and blogs to better understand how to create a Chrome extension in React.

Creating a simple popup Chrome extension in React is straightforward and can be done in just 4 steps. Here are the steps that I followed to create the extension:

Step -1:

Create an initial boilerplate using Create React App using the command:

Step -2:

Modify the  manifest.json file in the public folder, and replace its code with the following code.

Step -3:

Run the build command in your terminal. This will generate a build folder.

Step -4:

Finally, click "Load unpacked" and upload the build folder after turning on the developer mode at the top left in the Chrome extension dashboard. Once loaded, you will see the following card on the dashboard.

Once these steps are completed, the extension will be ready to use. Clicking on the extension will display a small popup with the React boilerplate content.

Congratulations, you have created your first React Chrome extension.

From there, you can add my own unique features to the extension and even utilize service workers to interact with Chrome API and more.

I have completed the basic Chrome extension using React, but it does not meet my requirements. I need a sidebar that can be opened and closed with a click, which cannot be achieved with a popup. This exercise was helpful in learning how to create a simple Chrome extension using React.

Through my research on Chrome extensions, I discovered that content scripts are used to manipulate the DOM on web pages. In my case, I need to insert the sidebar on all web pages as part of their DOM content. To do this, I need to include content scripts in the manifest.json file, which will enable me to manipulate all web pages that the Chrome extension opens.

This is very confusing, so when it comes to React we cannot directly insert the content script in manifest.json because the application creates Js bundles with a different name each time you run npm build. But we need to give a fixed name to the content script in manifest.json and that is a task now. I came across multiple tutorials and also a few blogs but still figuring it out. Let's see what happens next.

It is now 12:30 a.m., and I have spent several hours researching and coding, but I am still unable to achieve the desired results. I came across several blogs that suggest removing the default bundling system of Create React App and using my own webpack to create a fixed file name. However, I am still encountering errors and cannot get the desired outcome. I will keep exploring different resources and tutorials and hope to resolve the issue soon.

It is now 3:00 a.m., and I am still struggling to make progress. I have watched several YouTube tutorials on webpack configuration, but I am still unable to resolve the errors and build the desired extension. None of the blogs I have found have the solution I need. I am feeling frustrated and praying to god. I guess I have to reach out to my Twitter friends who have experience building Chrome extensions for help. Creating an application that I need using Vanilla JavaScript will be difficult and time taking, so I'm just hoping to resolve this issue and create a simple sidebar using React anyhow.

Ok bye!