fxnoob · fxnoob · Aug 28, 2019 · Aug 28, 2019
diff --git a/.babelrc b/.babelrc
@@ -1,3 +1,11 @@
 {
-  "presets": [ "@babel/preset-env" , "minify" , "@babel/preset-typescript" ]
-}
+  "presets": [
+    "@babel/preset-env",
+    "@babel/preset-react"
+  ],
+  "plugins": [
+    "@babel/plugin-proposal-class-properties" ,
+    "@babel/plugin-syntax-class-properties",
+    "@babel/plugin-syntax-dynamic-import"
+  ]
+}
diff --git a/.cirrus.yml b/.cirrus.yml
diff --git a/.travis.yml b/.travis.yml
@@ -0,0 +1,10 @@
+language: node_js
+
+node_js:
+  - stable
+
+install:
+  - npm install
+
+script:
+  - npm test
diff --git a/README.md b/README.md
@@ -1,33 +1,33 @@
-# A Chrome extension boilerplate.
-
-## Basic Usage
-
-``` 
-    npm install
-    npm run build
-```
-
-## features: 
-> 1. Support for  ES7 ( with Babel and polyfill)
-> 2. popup page with reactjs and material ui framework
-> 3. Content script with reactjs and material ui framework
-> 4. Bundling (webpack)
-
-## directory structure
-> *    `src/` is root directory for a chrome extension. it includes `manifest.json` file and other static stuff.
-
-> *    `src/background.js`  is main background js  file for the chrome extension.
- 
- > *  `popup-page` is the directory which includes react js setup for popup page.
- 
- > *  `content-scripts` is the directory  directory which includes react js setup for content script.
- 
- > *  `src/utils` is the directory for utilities that can be written in es6,es7 or es8...
- 
-## How to extend ? 
-
->   *  Write chrome extension's background scripts code in `src/background.js`
-
->  * Write chrome extension's popup page codes in `popup-page` Reactjs directory system. 
- 
- >  *  Write chrome extension's content scripts codes in `content-scripts` Reactjs directory system. 
+# minimal-react-webpack-babel-setup
+
+[![Build Status](https://travis-ci.org/rwieruch/minimal-react-webpack-babel-setup.svg?branch=master)](https://travis-ci.org/rwieruch/minimal-react-webpack-babel-setup) [![Slack](https://slack-the-road-to-learn-react.wieruch.com/badge.svg)](https://slack-the-road-to-learn-react.wieruch.com/) [![Greenkeeper badge](https://badges.greenkeeper.io/rwieruch/minimal-react-webpack-babel-setup.svg)](https://greenkeeper.io/)
+
+Read how to set it up yourself: [React with Webpack Tutorial](https://www.robinwieruch.de/minimal-react-webpack-babel-setup/).
+
+[![Edit minimal-react-webpack-babel-setup](https://codesandbox.io/static/img/play-codesandbox.svg)](https://codesandbox.io/s/github/rwieruch/minimal-react-webpack-babel-setup/tree/master/?fontsize=14)
+
+## Features
+
+* React 16
+* Webpack 4
+* Babel 7
+* Hot Module Replacement
+
+## DIY Add-Ons
+
+* [ESLint](https://www.robinwieruch.de/react-eslint-webpack-babel/)
+* [SVG Icons](https://www.robinwieruch.de/react-svg-icon-components/)
+* [Fonts Support](https://www.robinwieruch.de/webpack-font/)
+* [Images Support](https://www.robinwieruch.de/webpack-images/)
+
+## Alternatives
+
+* [Advanced React Webpack Babel Setup](https://github.com/rwieruch/advanced-react-webpack-babel-setup)
+
+## Installation
+
+* `git clone git@github.com:rwieruch/minimal-react-webpack-babel-setup.git`
+* cd minimal-react-webpack-babel-setup
+* npm install
+* npm start
+* visit `http://localhost:8080/`
diff --git a/content-scripts/components/index.jsx b/content-scripts/components/index.jsx
diff --git a/option-page/App.jsx b/option-page/App.jsx
@@ -0,0 +1,8 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import Index from './components/'
+
+const Element = document.createElement("div");
+Element.setAttribute("id" , "dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf");
+document.body.appendChild(Element);
+ReactDOM.render(<Index />, document.getElementById("dfghbnjmERHJKFGHNMVBNMFBNMbmvvxnbdgf"));
diff --git a/option-page/components/index.jsx b/option-page/components/index.jsx
@@ -0,0 +1,12 @@
+import React from 'react';
+
+export default class Index extends React.Component {
+    constructor(props){
+        super(props);
+    }
+    render() {
+        return (
+            <div></div>
+        );
+    }
+}
diff --git a/option-page/option.html b/option-page/option.html
@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <style>
+        </style>
+    </head>
+    <body>
+        <div id="app"></div>
+        <script src="option.bundle.js"></script>
+    </body>
+</html>
+