CODETOUR.md

Code Tour

A quick introduction to the folders and files in this repo.

Project anatomy

The source files which you will need to build the extension are present inside the src folder. Run npm run chrome-launch or npm run firefox-launch to see the changes that you make inside your src folder live in the browser.

The project uses Webpack to bundle the project into a folder like extension in case of production build and dev in case of development build. A lot of different webpack plugins are used for the webpack bundling process which can be seen inside the config/webpack/plugins.js file. A big thanks to the Memex project for helping in setting up the boilerplate code and to Facebook's create-react-app for helping in setup the webpack config.

Source Organisation: src/

To keep things modular, the resources are divided into folders namely /background, /content_scripts, /options, /popup and /sidebar and manifest.json. We can obviously introduce more as required.

• /lib: Contains JS and CSS libraries which are not to be compiled and minified by webpack.

  The /lib folder is copied as it is to the build folder which is extension during production build and dev during development build. If you have vendor libraries like bootstrap.css, you can put it inside the lib folder. This comes handy when you have to used chrome.tabs.executeScript(), the script to be injected can be placed here.

  • /lib/css: Contains CSS files
  • /lib/js: Contains JS files

• background: Contains scripts relating to the extension background page.

  • index.js: All the contents of the background page goes inside the index.js file. Webpack bundles the index.js into background.js in the build folder. This allows the use of import and require statements inside the background page. All others scripts for background are refreneced here.

• content_scripts: Contains scripts relating to the extension content_scripts page.

  Webpack bundles the index.js into content_scripts.js in the build folder.

  • index.js: All the contents of the background page goes inside the index.js file. Webpack bundles the index.js into content.js in the build folder. This allows the use of import and require statements inside the background page.All others scripts for content_scripts are refreneced here.

• popup: Contains scripts relating to the extension popup page.

  Webpack bundles the index.js into popup.js in the build folder which is referenced inside the popup.html.

  • index.js: Main file which webpack looks for while bundling. All others scripts for popup are refreneced here.
  • template.html - Provides the base for popup.html. All scripts and CSS file tags are added dynamically using Webpack at compile time.

• options: Contains scripts relating to the extension options page.

  Webpack bundles the index.js into options.js in the build folder which is referenced inside the options.html.

  • index.js: Main file which webpack looks for while bundling. All others scripts for options are refreneced here.
  • template.html - Provides the base for options.html. All scripts and CSS file tags are added dynamically using Webpack at compile time.

• fonts: Contains CSS files for fonts used in the extension.

• images: Contains images used in the extension

Config folder :

• webpack/: Contains the webpack config file and all the files necessary for setting up the webpack config.
• env.js: Loads environment variables from .env . Reference taken from https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/env.js
• paths.js: Returns an API that provides absolute paths for different files inside this project . Reference taken from https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/config/paths.js

Other Config files

• package.json - Contains project dependencies, info about project and run commands.

• package-lock.json: npm config file (genertaed alongwith package.json). This shouldn't be modified unless you're adding new dependencies or updating them.

• .eslintrc.js: ESLint config file

• .eslintignore: Files to be ignored by ESLint.

• .babelrc: Babel config file.

• .storybook: Config to setup storybook.

Others

• .gitignore: Contains a list of files and folders to be ignored by git. More about gitignore..
• LICENSE: license file. A software license tells others what they can and can't do with your source code. The most common licenses for open source projects are MIT, Apache, GNU... licenses. The license used in this project is the MIT license.

MARKDOWNS

• README.md: Introduction to this project along with instructions to build and contribute to this project.

• CONTRIBUTING.md: Deatiled instructions on contributing to this project.

• CODETOUR.md: A tour through all the files and folders of this project.

Please feel free to make changes to the above documentation :)