Day-10: "Where there is a will There is a way"

Today’s date is May 3, 2023, and guess what? I successfully resolved the issue I was facing with loading content scripts on my React application.

Yesterday, after 3:00 p.m., I came across a helpful blog that provided me with the solution I was seeking. By running bundling with index.tsx as the entry file inwebpack.config, and output at contentScript.js I was able to give a fixed path and name to manifest.json. I am sharing the link to the blog here in case it might be helpful to others.

Finally, after hours of debugging, I was able to understand how to insert content scripts intomanifest.json of the React app and manipulate the DOM of every page. I started creating a simple sidebar by trying various React hooks to ensure that they were working correctly. I used useState() to create a counter, and I fetched dummy data using the fakeapi.com API, which all worked flawlessly. Here's a glimpse of the first sidebar that I created.

I'm thrilled that I've been able to create a simple sidebar! Tomorrow, I'll design it to match the ShowwcaseXS wireframe, and I'm hopeful that everything will work out as planned. This was the part that I wasn't sure about - building a React sidebar as a Chrome extension and integrating Tailwind so I don't have to write hardcoded CSS for my Chrome extension. I'm excited to see my ShowwcaseXS design come to life!