Used this to create a chrome extension:
Building the chrome extensions turned out to be not so simple. Communicating between the webpage and the extension was not that simple, especially when trying to integrate React also. Also I was using create-react-app, which does not give me the control I want over the build process. So I may consider using webpack to build the app, instead of create-react-app.
Decided to leave it for a while, and do a few React tutorials which would improve my skills in React, Webpack, Browserify, and Redux. Perhaps once I have complete these, I will be in a better position to build out the chrome extension.
I liked this description of webpack and why it is needed:
webpack is a module bundler that constructs a web application from given assets.
styletags. As the amount of files required to piece the application together increases, this practice can become quickly unwieldy. Especially as order is important when loading web assets. webpack solves this by bundling all those files into one or sometimes many files and loads them in the correct order as needed.
There is a staggering amount of open source code available but unfortunately there isn’t a clear, single place to download and use third party code. Whether you’re installing modules using
componentor manually downloading and extracting files; webpack can be configured to load modules seamlessly from those sources.
Now doing a tutorial on building a React App with browserify also. It has separated the React components as UI Components, and Container components. With the UI components the are only dealing with presentation, as all the data is being passed to them through props, and they update the date through callback functions to the Container Component. Using a similar them I should be able to build my Keyword Finder app better. I did sort of build it along those lines, though this just made it clearer what the actual file structure should look like.