-
Notifications
You must be signed in to change notification settings - Fork 2.9k
Open
Description
Chrome Extension: Web3 Trade Helper - Folder Structure
Project Structure
web3-trade-helper/
│
├── manifest.json
├── popup/
│ ├── popup.html
│ ├── popup.js
│ └── popup.css
├── scripts/
│ └── gpt.js
└── assets/
└── icon.png
File Descriptions and Purposes
Root Directory Files
manifest.json
- The core configuration file for the Chrome extension
- Defines extension metadata, permissions, and resource locations
- Controls how the extension integrates with Chrome
- Should be placed in the root directory as Chrome requires it
Popup Directory (/popup
)
popup.html
- The main HTML file for the extension's popup interface
- Opens when users click the extension icon in Chrome
- Contains the structure for the user interface
- Located in
/popup
for better organization
popup.js
- JavaScript file that handles popup interactivity
- Controls popup behavior and user interactions
- Communicates with other extension components
- Placed alongside
popup.html
in/popup
directory
popup.css
- Styles the popup interface
- Contains all CSS for the popup UI components
- Ensures consistent visual appearance
- Kept with other popup-related files in
/popup
Scripts Directory (/scripts
)
gpt.js
- Contains GPT integration logic
- Handles API communication and responses
- Manages trade-related calculations and suggestions
- Placed in
/scripts
for better code organization
Assets Directory (/assets
)
icon.png
- Extension icon displayed in Chrome's toolbar
- Should be a square image (recommended 128x128 pixels)
- Used in the Chrome Web Store and browser UI
- Stored in
/assets
directory for better resource management
Implementation Steps
- Create the main project directory
web3-trade-helper
- Set up all subdirectories (
popup
,scripts
,assets
) - Create each file in its designated location
- Configure
manifest.json
to properly reference all files - Add placeholder content for
icon.png
Best Practices
- Keep the folder structure organized and modular
- Use relative paths in manifest.json
- Follow Chrome extension security guidelines
- Maintain clear separation of concerns between files
- Document any dependencies in manifest.json
Metadata
Metadata
Assignees
Labels
No labels