ihenvyr / react_chrome_extension

It's a boilerplate with a basic counter app using webext-redux library.

Hi! I'm Henry a software developer. Most of what I do revolves around Javascript and Dart, but that doesn't mean I am less open to other tech stacks. Nowadays I spend most of my time doing front-end and android app development, mostly with Flutter, React and its ecosystem.

Professional Experience

Front-end Developer, OnlineJobs | Feb / 2023  - Present

Front-end Developer, Cybranding Ltd | Dec / 2013  - Jan / 2023 (9 years)

Maintains and creates new feauters for the SaaS app using Ruby on Rails and React. Setup and manage Node.js background workers.

Web Developer, Osomnimedia Web Design Studio | Nov / 2008 - Sept / 2013 (4 years)

Develop various features and integrations for the ShopSite platform (front-end and product search optimization) and manage product banners and inventory.

Personal Projects

• Vue.js / CSS / HTML Monaka Responsive Menu
• React Loki Pricing Table Generator
• Flutter TPC Sales Management Android App
• Flutter TPC Product E-Loader Android App
• Flutter Nutrition Facts Android App
• Flutter TJ Karaoke Songbook Android App

Technical Skills

• Next.js
• Node.js
• Flutter
• Ruby on Rails
• Docker

react_chrome_extension's Issues

Running contentscript on webpack-dev-server

My current development process (using this toolkit) involves the following

1. Keep running "webpack --mode development --watch"
2. Make a change on the codebase
3. Wait for webpack to rebuild the new output
4. Go to chrome://extensions/ page
5. Pressing the refresh button on the extension
6. Refresh a live webpage to see the content script ui. (I have made it autoload after any web page loads for quick testing)

Just noticed how tiring and slow this whole process is...

So I did the following to try to run the contentscript on localhost:

1. Installed "webpack-dev-server"

2. Added the configuration below on webpack.config.js

devServer: {
    contentBase: path.join(__dirname, 'build'),
    port: 9999,
    writeToDisk: true
  }

3. Ran 'webpack-dev-server' on my console
4. Go to http://localhost:9999
5. Clicked on content.html

Too bad - the content script ui didnt load... no errors on my console either...
What could I be doing wrong?

Cannot use the string "option"

When I use a string with the word "option" the code fails to run.

This version with "optios" logs but wont work because the options page is "options.html"...

This version with "options" does not log

Why cant I see logs?

Good work here.

I am trying to get an idea of the flow of operations on this extension. So I added a bunch of console.logs throughout the js files on the root folder.

When I right click on the popup and "Inspect Popup" I only see logs on entry.popup.js and actions.js.

Would you know why the others are not logging or briefly explain the flow?
Thanks!

Choosing between dependencies and devDependencies on package.json

Any good reason why you have react on "dependencies" but redux on "devDependencies" on your package.json?
Correct me if im wrong - they could work in either places since the production build is done on your local machine anyways...

Whats included in the production crx file is determined by what you add to the "entry.vendor" tag on webpack.config.prod.js so it doesnt matter whether you included them under "dependencies" or "devDependencies".