├── .env ├── .eslintignore ├── src ├── content_scripts │ └── index.js ├── img │ ├── icon.png │ ├── background.png │ ├── webpack.svg │ ├── react.svg │ ├── jest.svg │ └── eslint.svg ├── lib │ ├── js │ │ └── fake_vendor.js │ └── css │ │ └── fake_vecndor.css ├── options │ ├── index.js │ ├── template.html │ ├── index.css │ ├── Options.css │ └── Options.js ├── sidebar │ ├── index.js │ ├── template.html │ ├── index.css │ ├── Sidebar.js │ └── Sidebar.css ├── popup │ ├── template.html │ ├── index.js │ ├── index.css │ ├── Popup.css │ └── Popup.js ├── background │ └── index.js ├── manifest.json └── fonts │ └── googlefonts │ ├── roboto-mono.css │ └── noto-sans.css ├── .gitignore ├── .babelrc ├── screenshots ├── app_js.png ├── dev_ext.png ├── react_1.png ├── thanks.png ├── ext_boiler.gif ├── index_js.png └── extension_structure.png ├── .storybook └── config.js ├── public └── index.html ├── scripts ├── chrome-launch.js ├── start.js ├── compress.js ├── dev.js └── build.js ├── config ├── webpack │ ├── webpackDevServer.config.js │ ├── static-files.js │ ├── plugins.js │ ├── webpack.config.js │ └── loaders.js ├── env.js └── paths.js ├── stories └── index.stories.js ├── LICENSE ├── .eslintrc.js ├── CONTRIBUTING.md ├── package.json ├── CODETOUR.md └── README.md /.env: -------------------------------------------------------------------------------- 1 | GENERATE_SOURCEMAP=false 2 | INLINE_RUNTIME_CHUNK=false -------------------------------------------------------------------------------- /.eslintignore: -------------------------------------------------------------------------------- 1 | /dist 2 | /node_modules 3 | /dev 4 | /extension -------------------------------------------------------------------------------- /src/content_scripts/index.js: -------------------------------------------------------------------------------- 1 | console.log('Content scripts has loaded'); -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | node_modules 2 | try.js 3 | old-extension 4 | dist 5 | extension 6 | dev 7 | .vscode -------------------------------------------------------------------------------- /src/img/icon.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kryptokinght/react-extension-boilerplate/HEAD/src/img/icon.png -------------------------------------------------------------------------------- /.babelrc: -------------------------------------------------------------------------------- 1 | { 2 | "presets": [ 3 | "@babel/preset-env", 4 | "@babel/preset-react" 5 | ] 6 | } -------------------------------------------------------------------------------- /screenshots/app_js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kryptokinght/react-extension-boilerplate/HEAD/screenshots/app_js.png -------------------------------------------------------------------------------- /screenshots/dev_ext.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kryptokinght/react-extension-boilerplate/HEAD/screenshots/dev_ext.png -------------------------------------------------------------------------------- /screenshots/react_1.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kryptokinght/react-extension-boilerplate/HEAD/screenshots/react_1.png -------------------------------------------------------------------------------- /screenshots/thanks.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kryptokinght/react-extension-boilerplate/HEAD/screenshots/thanks.png -------------------------------------------------------------------------------- /src/img/background.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kryptokinght/react-extension-boilerplate/HEAD/src/img/background.png -------------------------------------------------------------------------------- /screenshots/ext_boiler.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kryptokinght/react-extension-boilerplate/HEAD/screenshots/ext_boiler.gif -------------------------------------------------------------------------------- /screenshots/index_js.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kryptokinght/react-extension-boilerplate/HEAD/screenshots/index_js.png -------------------------------------------------------------------------------- /screenshots/extension_structure.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kryptokinght/react-extension-boilerplate/HEAD/screenshots/extension_structure.png -------------------------------------------------------------------------------- /src/lib/js/fake_vendor.js: -------------------------------------------------------------------------------- 1 | /* 2 | Fake vendor JS here 3 | This file is directly copied to the build folder without any compilation or minification 4 | */ -------------------------------------------------------------------------------- /src/lib/css/fake_vecndor.css: -------------------------------------------------------------------------------- 1 | /* 2 | Fake vendor CSS here 3 | This file is directly copied to the build folder without any compilation or minification 4 | */ -------------------------------------------------------------------------------- /src/options/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import Options from './Options'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | -------------------------------------------------------------------------------- /src/sidebar/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import './index.css'; 4 | import Sidebar from './Sidebar'; 5 | 6 | ReactDOM.render(, document.getElementById('root')); 7 | 8 | -------------------------------------------------------------------------------- /src/options/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Options Page 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/popup/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Popup Page 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /src/sidebar/template.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Sidebar page 8 | 9 | 10 | 11 | 12 |
13 | 14 | 15 | -------------------------------------------------------------------------------- /.storybook/config.js: -------------------------------------------------------------------------------- 1 | import { configure } from '@storybook/react'; 2 | 3 | // automatically import all files ending in *.stories.js 4 | const req = require.context('../stories', true, /.stories.js$/); 5 | function loadStories() { 6 | req.keys().forEach(filename => req(filename)); 7 | } 8 | 9 | configure(loadStories, module); 10 | -------------------------------------------------------------------------------- /src/popup/index.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import ReactDOM from 'react-dom'; 3 | import * as browser from 'webextension-polyfill'; 4 | import './index.css'; 5 | import Popup from './Popup'; 6 | 7 | browser.runtime.sendMessage({ data: 'hello' }); 8 | 9 | ReactDOM.render(, document.getElementById('root')); 10 | 11 | -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | Youtube-Repeat-Player 7 | 8 | 9 | 10 |

Popup

11 |

Options

12 |

Sidebar

13 |

Select One

14 | 15 | 16 | -------------------------------------------------------------------------------- /src/background/index.js: -------------------------------------------------------------------------------- 1 | /* eslint-disable no-undef */ 2 | console.log('Background.js file loaded'); 3 | 4 | /* const defaultUninstallURL = () => { 5 | return process.env.NODE_ENV === 'production' 6 | ? 'https://wwww.github.com/kryptokinght' 7 | : ''; 8 | }; */ 9 | 10 | browser.runtime.onMessage.addListener(function (message) { 11 | console.log(message); 12 | }); 13 | 14 | -------------------------------------------------------------------------------- /scripts/chrome-launch.js: -------------------------------------------------------------------------------- 1 | #!/usr/bin/env node 2 | 3 | const path = require('path'); 4 | const chromeLaunch = require('chrome-launch'); // eslint-disable-line import/no-extraneous-dependencies 5 | 6 | require('colors'); 7 | 8 | const url = 'https://google.com'; 9 | const dev = path.resolve(__dirname, '..', 'dev'); 10 | const args = [`--load-extension=${dev}`]; 11 | 12 | chromeLaunch(url, { args }); -------------------------------------------------------------------------------- /src/options/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /src/sidebar/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | } 10 | 11 | code { 12 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 13 | monospace; 14 | } 15 | -------------------------------------------------------------------------------- /src/popup/index.css: -------------------------------------------------------------------------------- 1 | body { 2 | margin: 0; 3 | padding: 0; 4 | font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", 5 | "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", 6 | sans-serif; 7 | -webkit-font-smoothing: antialiased; 8 | -moz-osx-font-smoothing: grayscale; 9 | background: url(/img/background.png), linear-gradient(90deg, #00331a, #002233); 10 | } 11 | 12 | code { 13 | font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", 14 | monospace; 15 | } 16 | -------------------------------------------------------------------------------- /config/webpack/webpackDevServer.config.js: -------------------------------------------------------------------------------- 1 | /* Minimal webpack-dev-server config */ 2 | 3 | const ignoredFiles = require('react-dev-utils/ignoredFiles'); 4 | const paths = require('../paths'); 5 | 6 | const host = process.env.HOST || '0.0.0.0'; 7 | 8 | module.exports = function () { 9 | return { 10 | compress: true, 11 | clientLogLevel: 'none', 12 | contentBase: paths.appPublic, 13 | watchContentBase: true, 14 | hot: true, 15 | publicPath: '/', 16 | quiet: true, 17 | watchOptions: { 18 | ignored: ignoredFiles(paths.appSrc), 19 | }, 20 | host 21 | }; 22 | }; 23 | -------------------------------------------------------------------------------- /src/sidebar/Sidebar.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import './Sidebar.css'; 3 | 4 | class Sidebar extends Component { 5 | render() { 6 | return ( 7 |
8 |
9 | 15 | Learn React 16 | 17 |

Sidebar

18 |
19 |
20 | ); 21 | } 22 | } 23 | 24 | export default Sidebar; 25 | -------------------------------------------------------------------------------- /src/options/Options.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | } 9 | 10 | .App-header { 11 | background-color: #282c34; 12 | min-height: 100vh; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | font-size: calc(10px + 2vmin); 18 | color: white; 19 | } 20 | 21 | .App-link { 22 | color: #61dafb; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/sidebar/Sidebar.css: -------------------------------------------------------------------------------- 1 | .App { 2 | text-align: center; 3 | } 4 | 5 | .App-logo { 6 | animation: App-logo-spin infinite 20s linear; 7 | height: 40vmin; 8 | } 9 | 10 | .App-header { 11 | background-color: #282c34; 12 | min-height: 100vh; 13 | display: flex; 14 | flex-direction: column; 15 | align-items: center; 16 | justify-content: center; 17 | font-size: calc(10px + 2vmin); 18 | color: white; 19 | } 20 | 21 | .App-link { 22 | color: #61dafb; 23 | } 24 | 25 | @keyframes App-logo-spin { 26 | from { 27 | transform: rotate(0deg); 28 | } 29 | to { 30 | transform: rotate(360deg); 31 | } 32 | } 33 | -------------------------------------------------------------------------------- /src/options/Options.js: -------------------------------------------------------------------------------- 1 | import React, { Component } from 'react'; 2 | import '@polymer/paper-button/paper-button.js'; 3 | 4 | import './Options.css'; 5 | 6 | class Options extends Component { 7 | render() { 8 | return ( 9 |
10 |
11 | 17 | Learn React 18 | 19 |

Options

20 | toggles 21 |
22 |
23 | ); 24 | } 25 | } 26 | 27 | export default Options; 28 | -------------------------------------------------------------------------------- /scripts/start.js: -------------------------------------------------------------------------------- 1 | /* Minimal start.js file */ 2 | 3 | process.env.BABEL_ENV = 'development'; 4 | process.env.NODE_ENV = 'development'; 5 | 6 | const chalk = require('chalk'); 7 | const webpack = require('webpack'); 8 | const WebpackDevServer = require('webpack-dev-server'); 9 | 10 | const webpackConfigFactory = require('../config/webpack/webpack.config'); 11 | const createDevServerConfig = require('../config/webpack/webpackDevServer.config'); 12 | 13 | 14 | const webpackConfig = webpackConfigFactory('development'); 15 | 16 | const compiler = webpack(webpackConfig); 17 | const serverConfig = createDevServerConfig(); 18 | const devServer = new WebpackDevServer(compiler, serverConfig); 19 | devServer.listen(3000, 'localhost', (err) => { 20 | if (err) { 21 | return console.log(err); 22 | } 23 | console.log(chalk.cyan('Starting the development server...\n')); 24 | console.log(chalk.cyan('Open in localhost:3000')); 25 | }); -------------------------------------------------------------------------------- /scripts/compress.js: -------------------------------------------------------------------------------- 1 | const fs = require('fs'); 2 | const ChromeExtension = require('crx'); 3 | /* eslint import/no-unresolved: 0 */ 4 | const argv = require('minimist')(process.argv.slice(2)); 5 | const name = require('../src/manifest.json').name; 6 | 7 | 8 | const keyPath = argv.key || 'key.pem'; 9 | const existsKey = fs.existsSync(keyPath); 10 | const crx = new ChromeExtension({ 11 | appId: argv['app-id'], 12 | codebase: argv.codebase, 13 | privateKey: existsKey ? fs.readFileSync(keyPath) : null 14 | }); 15 | 16 | crx.load('extension') 17 | .then(() => crx.loadContents()) 18 | .then((archiveBuffer) => { 19 | fs.writeFile(`${name}.zip`, archiveBuffer); 20 | 21 | if (!argv.codebase || !existsKey) return; 22 | crx.pack(archiveBuffer).then((crxBuffer) => { 23 | const updateXML = crx.generateUpdateXML(); 24 | 25 | fs.writeFile('update.xml', updateXML); 26 | fs.writeFile(`${name}.crx`, crxBuffer); 27 | }); 28 | }); -------------------------------------------------------------------------------- /src/img/webpack.svg: -------------------------------------------------------------------------------- 1 | 2 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 16 | 17 | 18 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | 30 | 31 | 32 | 33 | 34 | -------------------------------------------------------------------------------- /stories/index.stories.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | 3 | import { storiesOf } from '@storybook/react'; 4 | import { action } from '@storybook/addon-actions'; 5 | import { linkTo } from '@storybook/addon-links'; 6 | 7 | import { Button, Welcome } from '@storybook/react/demo'; 8 | import Popup from '../src/popup/Popup'; 9 | import Sidebar from '../src/sidebar/Sidebar'; 10 | import Options from '../src/options/Options'; 11 | 12 | storiesOf('Welcome', module).add('to Storybook', () => ); 13 | 14 | storiesOf('Button', module) 15 | .add('with text', () => ) 16 | .add('with some emoji', () => ( 17 | 22 | )); 23 | 24 | storiesOf('Popup', module).add('Default', () => ); 25 | storiesOf('Sidebar', module).add('Default', () => ); 26 | storiesOf('Options', module).add('Default', () => ); 27 | -------------------------------------------------------------------------------- /src/popup/Popup.css: -------------------------------------------------------------------------------- 1 | .popup { 2 | text-align: center; 3 | width: 800px; 4 | } 5 | 6 | .popup-greet { 7 | color: #80FFAB; 8 | display: flex; 9 | flex-direction: column; 10 | align-items: center; 11 | justify-content: center; 12 | font-size: 2em; 13 | font-style: italic; 14 | letter-spacing: 0.1em; 15 | font-family: "Noto Sans", sans-serif; 16 | margin-top: 2em; 17 | padding: 0 0.8em 0.1em 0.8em; 18 | } 19 | 20 | .brand { 21 | font-family: 'Roboto Mono', monospace; 22 | letter-spacing: 0em; 23 | font-style: normal; 24 | font-weight: 600; 25 | } 26 | 27 | .stack-head { 28 | color: #ffffff; 29 | font-family: 'Roboto Mono', monospace; 30 | /* font-weight: 700; */ 31 | font-size: 2em; 32 | } 33 | 34 | .tech-logos { 35 | padding: 0 2em 2em 2em; 36 | } 37 | 38 | .logo { 39 | height: 40px; 40 | padding-right: 1.8em; 41 | } 42 | 43 | .contrib-msg { 44 | color: #ffffff; 45 | font-family: 'Roboto Mono', monospace; 46 | /* font-weight: 700; */ 47 | font-size: 1.5em; 48 | margin: 2em 2em 3em 2em; 49 | } 50 | 51 | .contrib-msg a { 52 | color: #0055ff; 53 | font-weight: bold; 54 | } 55 | 56 | -------------------------------------------------------------------------------- /src/popup/Popup.js: -------------------------------------------------------------------------------- 1 | import React from 'react'; 2 | import './Popup.css'; 3 | 4 | const TechStackLogos = () => { 5 | return ( 6 |
7 | ReactJS logo 8 | Webpack logo 9 | ESLint logo 10 | Jest logo 11 |
12 | ); 13 | }; 14 | 15 | const Popup = () => { 16 | return ( 17 |
18 |

Thanks for using Modern extension Boilerplate

19 |

Made using :

20 | 21 |

We would love some of your help in making this boilerplate even better.
React Extension Boilerplate

22 |
23 | ); 24 | }; 25 | 26 | 27 | export default Popup; 28 | -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | 2 | MIT License 3 | 4 | Copyright (c) 2019 Minanshu Singh 5 | 6 | Permission is hereby granted, free of charge, to any person obtaining a copy 7 | of this software and associated documentation files (the "Software"), to deal 8 | in the Software without restriction, including without limitation the rights 9 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 10 | copies of the Software, and to permit persons to whom the Software is 11 | furnished to do so, subject to the following conditions: 12 | 13 | The above copyright notice and this permission notice shall be included in all 14 | copies or substantial portions of the Software. 15 | 16 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 17 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 18 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 19 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 20 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 21 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 22 | SOFTWARE. -------------------------------------------------------------------------------- /src/manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": "1.0", 3 | "manifest_version": 2, 4 | "name": "React Boilerplate Extension", 5 | "description": "Modern React boilerplate for Firefox and Chrome extensions.", 6 | "content_scripts": [ 7 | { 8 | "matches": [ 9 | "" 10 | ], 11 | "js": [ 12 | "lib/js/browser-polyfill.js", 13 | "content.js" 14 | ] 15 | } 16 | ], 17 | "background": { 18 | "scripts": [ 19 | "lib/js/browser-polyfill.js", 20 | "background.js" 21 | ] 22 | }, 23 | "browser_action": { 24 | "default_icon": "img/icon.png", 25 | "default_popup": "popup.html" 26 | }, 27 | "permissions": [ 28 | "http://myapi.com", 29 | "storage", 30 | "unlimitedStorage" 31 | ], 32 | "icons": { 33 | "128": "img/icon.png" 34 | }, 35 | "web_accessible_resources": [ 36 | "sidebar.html" 37 | ], 38 | "sidebar_action": { 39 | "default_icon": "img/icon.png", 40 | "default_title" : "Sidebar", 41 | "default_panel": "sidebar.html" 42 | }, 43 | "options_ui": { 44 | "page": "./options.html", 45 | "open_in_tab": true 46 | } 47 | } 48 | -------------------------------------------------------------------------------- /.eslintrc.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | env: { 3 | browser: true, 4 | commonjs: true, 5 | es6: true, 6 | node: true, 7 | jest: true 8 | }, 9 | extends: 'eslint:recommended', 10 | parser: 'babel-eslint', 11 | parserOptions: { 12 | sourceType: 'module', 13 | ecmaVersion: 2018, 14 | ecmaFeatures: { 15 | jsx: true, 16 | }, 17 | }, 18 | plugins: ['react'], 19 | rules: { 20 | "no-console": "off", 21 | "no-underscore-dangle": "off", 22 | "no-plusplus": "off", 23 | "no-continue": "off", 24 | "camelcase": "off", 25 | "no-empty": "off", 26 | "no-param-reassign": "off", 27 | "func-names": [ 28 | "error", 29 | "never" 30 | ], 31 | "prefer-destructuring": [ 32 | "error", 33 | { 34 | "object": false, 35 | "array": false 36 | } 37 | ], 38 | indent: ['error', 2, { SwitchCase: 1 }], 39 | 'linebreak-style': ['error', 'unix'], 40 | quotes: ['error', 'single', { allowTemplateLiterals: true }], 41 | semi: ['error', 'always'], 42 | 'react/jsx-uses-vars': 1, 43 | 'react/jsx-uses-react': 1, 44 | 'spaced-comment': ['error', 'always', { exceptions: ['-', '+'] }], 45 | }, 46 | }; -------------------------------------------------------------------------------- /src/img/react.svg: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /config/webpack/static-files.js: -------------------------------------------------------------------------------- 1 | 2 | function transformManifestVersion(content) { 3 | const manifest = JSON.parse(content.toString()); 4 | manifest.version = process.env.npm_package_version; 5 | return Buffer.from(JSON.stringify(manifest)); 6 | } 7 | 8 | /* Copied as it is to the `to` destination via CopyWebpackPlugin */ 9 | const copyPatterns = [ 10 | { 11 | from: 'src/manifest.json', 12 | to: '.', 13 | transform: transformManifestVersion, 14 | }, 15 | { from: 'src/img', to: 'img' }, 16 | { 17 | from: 'src/lib', 18 | to: 'lib/', 19 | }, 20 | { 21 | from: 'node_modules/webextension-polyfill/dist/browser-polyfill.js', 22 | to: 'lib/js/', 23 | }, 24 | { 25 | from: 'node_modules/@webcomponents/webcomponentsjs/webcomponents-bundle.js', 26 | to: 'lib/js/', 27 | }, 28 | { 29 | 'from': 'node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js', 30 | 'to': 'lib/js/' 31 | }, 32 | { 33 | from: 'src/fonts/*/*', 34 | to: 'fonts/googlefonts/[name].[ext]', 35 | }, 36 | /* { 37 | from: 38 | 'node_modules/material-design-icons/iconfont/*.{eot,ttf,woff,woff2,css}', 39 | to: 'fonts/material-icons/[name].[ext]', 40 | toType: 'template', 41 | }, */ 42 | ]; 43 | 44 | /* These are included into the HTML pages generated by HTMLWebpackPlugin*/ 45 | const htmlAssets = [ 46 | 'fonts/googlefonts/roboto-mono.css', 47 | 'lib/js/browser-polyfill.js', 48 | 'lib/js/webcomponents-bundle.js', 49 | 'lib/js/custom-elements-es5-adapter.js', 50 | ]; 51 | 52 | module.exports = { 53 | copyPatterns, 54 | htmlAssets 55 | }; -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | # Thank You 2 | 3 | We are grateful that you considered contributing to React Extension Boilerplate. Please follow the below guidelines for contribution. 4 | 5 | Follow the golden rule 6 | 7 | > Code, Document, Raise Issues and Review like you have to explain everything to a new developer without saying a word. 8 | 9 | ## First Time 10 | 11 | The first thing to do always is to run the program and note how it works. One of the best ways to do this is to launch the application and go through the files that it launches in the sequential manner. 12 | 13 | Also take a note of the coding style and dependencies that the project follows. 14 | 15 | ## Choosing issues 16 | 17 | It is recommended to go through the issues tab once you have ran the program once and look for easy issues. 18 | 19 | If an issue is not assigned; follow through the comments, ask queries about it and then start working on it. 20 | 21 | ## Creating issues 22 | 23 | If you face any reproducable problem while launching the boilerplate or any feature you think should be there, file an issue in the github repository. 24 | 25 | It is expected that you will follow the below guidelines while creating issues: 26 | 27 | https://wiredcraft.com/blog/how-we-write-our-github-issues 28 | 29 | ## Sending a PR 30 | 31 | While sending a PR, always remember not to send one from your master branch; it'll lead to commit issues and mismatch. 32 | 33 | It is highly recommended to follow the below guidelines while writing commits and sending PRs: 34 | 35 | - https://blog.github.com/2015-01-21-how-to-write-the-perfect-pull-request/ 36 | - https://code.likeagirl.io/useful-tips-for-writing-better-git-commit-messages-808770609503 37 | 38 | ## Communication 39 | 40 | Please join the [gitter channel](https://gitter.im/react-boilerplate-extension/community) for communication regarding the project. No personal communication will be entertained :) 41 | -------------------------------------------------------------------------------- /config/env.js: -------------------------------------------------------------------------------- 1 | 'use strict'; 2 | 3 | const fs = require('fs'); 4 | const path = require('path'); 5 | const paths = require('./paths'); 6 | 7 | // Make sure that including paths.js after env.js will read .env variables. 8 | delete require.cache[require.resolve('./paths')]; 9 | 10 | const NODE_ENV = process.env.NODE_ENV; 11 | if (!NODE_ENV) { 12 | throw new Error( 13 | 'The NODE_ENV environment variable is required but was not specified.' 14 | ); 15 | } 16 | 17 | // https://github.com/bkeepers/dotenv#what-other-env-files-can-i-use 18 | var dotenvFiles = [ 19 | `${paths.dotenv}.${NODE_ENV}.local`, 20 | `${paths.dotenv}.${NODE_ENV}`, 21 | // Don't include `.env.local` for `test` environment 22 | // since normally you expect tests to produce the same 23 | // results for everyone 24 | NODE_ENV !== 'test' && `${paths.dotenv}.local`, 25 | paths.dotenv, 26 | ].filter(Boolean); 27 | 28 | // Load environment variables from .env* files. Suppress warnings using silent 29 | // if this file is missing. dotenv will never modify any environment variables 30 | // that have already been set. Variable expansion is supported in .env files. 31 | // https://github.com/motdotla/dotenv 32 | // https://github.com/motdotla/dotenv-expand 33 | dotenvFiles.forEach(dotenvFile => { 34 | if (fs.existsSync(dotenvFile)) { 35 | require('dotenv-expand')( 36 | require('dotenv').config({ 37 | path: dotenvFile, 38 | }) 39 | ); 40 | } 41 | }); 42 | 43 | // We support resolving modules according to `NODE_PATH`. 44 | // This lets you use absolute paths in imports inside large monorepos: 45 | // https://github.com/facebook/create-react-app/issues/253. 46 | // It works similar to `NODE_PATH` in Node itself: 47 | // https://nodejs.org/api/modules.html#modules_loading_from_the_global_folders 48 | // Note that unlike in Node, only *relative* paths from `NODE_PATH` are honored. 49 | // Otherwise, we risk importing Node.js core modules into an app instead of Webpack shims. 50 | // https://github.com/facebook/create-react-app/issues/1023#issuecomment-265344421 51 | // We also resolve them to make sure all tools using them work consistently. 52 | const appDirectory = fs.realpathSync(process.cwd()); 53 | process.env.NODE_PATH = (process.env.NODE_PATH || '') 54 | .split(path.delimiter) 55 | .filter(folder => folder && !path.isAbsolute(folder)) 56 | .map(folder => path.resolve(appDirectory, folder)) 57 | .join(path.delimiter); 58 | -------------------------------------------------------------------------------- /src/fonts/googlefonts/roboto-mono.css: -------------------------------------------------------------------------------- 1 | /* cyrillic-ext */ 2 | @font-face { 3 | font-family: 'Roboto Mono'; 4 | font-style: normal; 5 | font-weight: 400; 6 | src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhGq3-OXg.woff2) format('woff2'); 7 | unicode-range: U+0460-052F, U+1C80-1C88, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; 8 | } 9 | /* cyrillic */ 10 | @font-face { 11 | font-family: 'Roboto Mono'; 12 | font-style: normal; 13 | font-weight: 400; 14 | src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhPq3-OXg.woff2) format('woff2'); 15 | unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; 16 | } 17 | /* greek-ext */ 18 | @font-face { 19 | font-family: 'Roboto Mono'; 20 | font-style: normal; 21 | font-weight: 400; 22 | src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhHq3-OXg.woff2) format('woff2'); 23 | unicode-range: U+1F00-1FFF; 24 | } 25 | /* greek */ 26 | @font-face { 27 | font-family: 'Roboto Mono'; 28 | font-style: normal; 29 | font-weight: 400; 30 | src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhIq3-OXg.woff2) format('woff2'); 31 | unicode-range: U+0370-03FF; 32 | } 33 | /* vietnamese */ 34 | @font-face { 35 | font-family: 'Roboto Mono'; 36 | font-style: normal; 37 | font-weight: 400; 38 | src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhEq3-OXg.woff2) format('woff2'); 39 | unicode-range: U+0102-0103, U+0110-0111, U+1EA0-1EF9, U+20AB; 40 | } 41 | /* latin-ext */ 42 | @font-face { 43 | font-family: 'Roboto Mono'; 44 | font-style: normal; 45 | font-weight: 400; 46 | src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhFq3-OXg.woff2) format('woff2'); 47 | unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF, U+2113, U+2C60-2C7F, U+A720-A7FF; 48 | } 49 | /* latin */ 50 | @font-face { 51 | font-family: 'Roboto Mono'; 52 | font-style: normal; 53 | font-weight: 400; 54 | src: local('Roboto Mono'), local('RobotoMono-Regular'), url(https://fonts.gstatic.com/s/robotomono/v5/L0x5DF4xlVMF-BfR8bXMIjhLq38.woff2) format('woff2'); 55 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; 56 | } -------------------------------------------------------------------------------- /scripts/dev.js: -------------------------------------------------------------------------------- 1 | /* Minimal start.js file */ 2 | 3 | process.env.BABEL_ENV = 'development'; 4 | process.env.NODE_ENV = 'development'; 5 | 6 | const Ora = require('ora'); 7 | const execa = require('execa'); 8 | const chalk = require('chalk'); 9 | const webpack = require('webpack'); 10 | const argv = require('yargs').argv; 11 | const formatWebpackMessages = require('react-dev-utils/formatWebpackMessages'); 12 | const printBuildError = require('react-dev-utils/printBuildError'); 13 | 14 | require('colors'); 15 | 16 | let browserRunning = false; 17 | 18 | const webpackConfigFactory = require('../config/webpack/webpack.config'); 19 | 20 | console.log('\n-----------------------------------------------------\n'.yellow.bold); 21 | 22 | // generate webpack config from webpack config factory 23 | const webpackConfig = webpackConfigFactory('development'); 24 | 25 | let spinner = new Ora({ 26 | text: 'Bundling files and assets using Webpack'.blue, 27 | stream: process.stdout 28 | }); 29 | spinner.start(); 30 | 31 | const compiler = webpack(webpackConfig); 32 | /* try { */ 33 | compiler.watch({}, (err, stats) => { 34 | spinner.succeed(); 35 | let messages; 36 | if (err) { 37 | if (!err.message) { 38 | throw new Error(err); 39 | } 40 | messages = formatWebpackMessages({ 41 | errors: [err.message], 42 | warnings: [], 43 | }); 44 | } 45 | else { 46 | messages = formatWebpackMessages( 47 | stats.toJson({ all: false, warnings: true, errors: true }) 48 | ); 49 | } 50 | 51 | if (messages.errors.length) { 52 | // Only keep the first error. Others are often indicative 53 | // of the same problem, but confuse the reader with noise. 54 | if (messages.errors.length > 1) { 55 | messages.errors.length = 1; 56 | } 57 | console.log(chalk.red('Failed to compile.\n')); 58 | // process.exit(1); 59 | } 60 | if ( 61 | process.env.CI && 62 | (typeof process.env.CI !== 'string' || 63 | process.env.CI.toLowerCase() !== 'false') && 64 | messages.warnings.length 65 | ) { 66 | console.log( 67 | chalk.yellow( 68 | '\nTreating warnings as errors because process.env.CI = true.\n' + 69 | 'Most CI servers set it automatically.\n' 70 | ) 71 | ); 72 | // throw new Error(messages.warnings.join('\n\n')); 73 | process.exit(1); 74 | } 75 | 76 | 77 | 78 | // choose browser to display 79 | if (argv.browser === 'chrome' && !browserRunning) { 80 | browserRunning = true; 81 | spinner = new Ora({ 82 | text: 'Opening the extension in a new Chrome instance'.blue, 83 | stream: process.stdout 84 | }); 85 | spinner.start(); 86 | execa('node', ['scripts/chrome-launch.js']).stdout.pipe(process.stdout); 87 | } 88 | else if (argv.browser === 'firefox' && !browserRunning) { 89 | browserRunning = true; 90 | spinner = new Ora({ 91 | text: 'Opening the extension in a new Firefox instance'.blue, 92 | stream: process.stdout 93 | }); 94 | spinner.start(); 95 | execa('web-ext', ['run', '--source-dir', 'dev', '--pref', 'startup.homepage_welcome_url=https://www.youtube.com']); 96 | } 97 | 98 | }); 99 | /* } catch (err) { 100 | console.log(chalk.red('Failed to compile.\n')); 101 | console.log(err.message); 102 | printBuildError(err); 103 | process.exit(1); 104 | } */ 105 | 106 | 107 | 108 | 109 | -------------------------------------------------------------------------------- /config/paths.js: -------------------------------------------------------------------------------- 1 | const path = require('path'); 2 | const fs = require('fs'); 3 | const url = require('url'); 4 | 5 | require('colors'); 6 | 7 | const appDirectory = fs.realpathSync(process.cwd()); 8 | console.log(`appDirectory: ${appDirectory}`.yellow); 9 | const resolveApp = relativePath => path.resolve(appDirectory, relativePath); 10 | console.log(resolveApp('.env').yellow); 11 | 12 | const envPublicUrl = process.env.PUBLIC_URL; 13 | 14 | function ensureSlash(inputPath, needsSlash) { 15 | const hasSlash = inputPath.endsWith('/'); 16 | if (hasSlash && !needsSlash) { 17 | return inputPath.substr(0, inputPath.length - 1); 18 | } else if (!hasSlash && needsSlash) { 19 | return `${inputPath}/`; 20 | } else { 21 | return inputPath; 22 | } 23 | } 24 | 25 | const getPublicUrl = appPackageJson => 26 | envPublicUrl || require(appPackageJson).homepage; 27 | 28 | // We use `PUBLIC_URL` environment variable or "homepage" field to infer 29 | // "public path" at which the app is served. 30 | // Webpack needs to know it to put the right