isthaison's picture
chrome extensions (#4308)
0d773d7
|
raw
history blame
2.67 kB

Chrome Extension

chrome-extension/ β”‚ β”œβ”€β”€ manifest.json         # Main configuration file for the extension β”œβ”€β”€ popup.html          # Main user interface of the extension β”œβ”€β”€ popup.js            # Script for the main interface β”œβ”€β”€ background.js       # Background script for the extension β”œβ”€β”€ content.js          # Script to interact with web pages β”œβ”€β”€ styles/ β”‚   └── popup.css       # CSS file for the popup β”œβ”€β”€ icons/ β”‚   β”œβ”€β”€ icon16.png      # 16x16 pixel icon β”‚   β”œβ”€β”€ icon48.png      # 48x48 pixel icon β”‚   └── icon128.png     # 128x128 pixel icon β”œβ”€β”€ assets/ β”‚   └── ...             # Directory for other assets (images, fonts, etc.) β”œβ”€β”€ scripts/ β”‚   β”œβ”€β”€ utils.js        # File containing utility functions β”‚   └── api.js          # File containing API call logic └── README.md           # Instructions for using and installing the extension

Installation

  1. Open chrome://extensions/.
  2. Enable Developer mode.
  3. Click Load unpacked and select the project directory.

Features

  1. Interact with web pages.
  2. Run in the background to handle logic.

Usage

  • Click the extension icon in the toolbar.
  • Follow the instructions in the interface.

Additional Notes

  • manifest.json: This file is crucial as it defines the extension's metadata, permissions, and entry points.
  • background.js: This script runs independently of any web page and can perform tasks such as listening for browser events, making network requests, and storing data.
  • content.js: This script injects code into web pages to manipulate the DOM, modify styles, or communicate with the background script.
  • popup.html/popup.js: These files create the popup that appears when the user clicks the extension icon. icons: These icons are used to represent the extension in the browser's UI. More Detailed Explanation
  • manifest.json: Specifies the extension's name, version, permissions, and other details. It also defines the entry points for the background script, content scripts, and the popup.
  • background.js: Handles tasks that need to run continuously, such as syncing data, listening for browser events, or controlling the extension's behavior.
  • content.js: Interacts directly with the web page's DOM, allowing you to modify the content, style, or behavior of the page.
  • popup.html/popup.js: Creates a user interface that allows users to interact with the extension. Other files: These files can contain additional scripts, styles, or assets that are used by the extension.