Back to chrome extensions – tested out react-chrome-redux boilerplate

Went through the guide on the official webpack page. Am a bit more confident in how it works now. Got the live reloading to work also, which I was having troubles with yesterday. Think I will start trying to build my chrome extension again, since I have enough of an understanding of wepback now to get the build process to go as I want.

So have created the layout for the chrome extension according this repo which is explained in this video. Basically the popup, conent, and background are all written as separate React apps, and they are all compiled into the final build folder which has the structure:

  • content.js
  • event.js
  • manifest.json
  • popup.html
  • popup.js

Each of the react folders has a webpack.config inside. Inside the root folder of the application is a gulp script which exectutes the webpack in each of the folders, and put the final build files in the build folder.

Now lets try and get communication going between the content, background, and pops. Ok basically communication has to go through the background. So the content, and popup cannot communicate with each other, it has to go through the background. The content and popup states do not persist, they disappear each time, e.g. if you close a popup, or tab, all the data in it is lost. Only the background data persists.

So what these guys have done is create a wrapper that makes the background page act as a redux store. Then the popup and content pages become similiar to React UI components, and we can communicate do the background page through normal redux commands.

That means we can build the entire extension using react commands, and not have to get involved in the ‘chrome’ api’s and commands.

Basically am going to have to learn redux to get this to work. Here is another React Chrome Extension Boilerplate, and it also seems to use redux to communicate between all the components.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s