Skip to content

README.md

Latest commit

 

History

History
141 lines (102 loc) · 3.96 KB

README.md

File metadata and controls

141 lines (102 loc) · 3.96 KB
Raw

Russiangram Chrome Extension

This document is here to help you understand the project structure and guide you through development, building, and deployment.

Project Overview

This extension uses:

  • Handlebars for templating.
  • Bootstrap for styling.
  • jQuery for DOM manipulation.
  • Precompiled templates for compatibility with Manifest V3 (no 'unsafe-eval').

Folder Structure

Here’s what the folders and files mean:

project/
├── src/               # Source files for development
│   ├── html/          # Popup HTML + Handlebars templates (.hbs files)
│   ├── css/           # Stylesheets (CSS)
│   ├── js/            # JavaScript files (core functionality) + libs
│   ├── manifest.json  # Chrome extension manifest
│
├── dist/              # Final extension files for deployment (auto-generated)
│   ├── css/           # CSS files
│   ├── js/            # JavaScript (includes precompiled templates)
│   ├── html/          # Static HTML files (e.g., popup.html)
│   ├── fonts/         # Font assets
│   ├── icon/          # Extension icons
│   └── manifest.json  # Final manifest file
│
├── build.js           # Script to build the extension
├── package.json       # Development setup (precompile Handlebars templates)
└── README.md          # This documentation

How to Work with This Project

1. Setup

To get started, you need:

  • Node.js (for development tools).

Install the necessary dependencies:

npm install

This installs the Handlebars CLI for precompiling templates.

2. Development

Make your changes in the src/ folder:

  • Update .hbs files in src/html/ for templating.
  • Modify CSS in src/css/.
  • Add or update JavaScript in src/js/.

3. Build the Extension

Whenever you’re done with changes, run this command:

npm run build

This does three things:

  1. Precompiles Handlebars templates: Converts .hbs files into tables.js.
  2. Cleans the dist/ folder: Ensures no old files are left.
  3. Copies necessary files into the dist/ folder.

After the build, your final extension is in the dist/ folder.

4. Test the Extension

  1. Open Chrome and go to chrome://extensions/.
  2. Enable Developer Mode (toggle in the top-right).
  3. Click "Load unpacked" and select the dist/ folder.

Now, your extension is loaded into Chrome for testing.

5. Deploy the Extension

When you’re ready to share or publish the extension:

  1. Zip the contents of the dist/ folder: 
    cd dist
zip -r ../chrome-extension.zip .
  2. Upload the chrome-extension.zip file to the Chrome Web Store.

Key Points to Remember

  1. Precompiled Templates:

    • Templates are precompiled during the build process to ensure compatibility with Manifest V3.
    • The .hbs files in src/html/ are converted into tables.js.

  2. Clean Build:

    • The dist/ folder contains only the files required for the extension to work.
    • No unnecessary dev files like .hbs or node_modules.

  3. Automated Process:

    • The npm run build command handles everything for you—cleaning, precompiling, and copying files.

FAQs

Q: What happens if I change a .hbs file?

Run:

npm run build

This updates the precompiled templates and copies everything to the dist/ folder.

Q: Can I skip the build step and test directly in src/?

No. Manifest V3 requires precompiled templates, so always test using the files in dist/.

Q: What’s in the dist/ folder?

The dist/ folder contains:

  • CSS files: For styling the extension.
  • JavaScript files: Includes your code and precompiled templates.
  • HTML files: Static files like popup.html.
  • Fonts and icons: Assets for your extension.
  • Manifest.json: The required file for Chrome extensions.