Skip to content

MADHURI-HS/web_dev

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

4 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

🔗 Link Saver Chrome Extension

📌 Overview

The Link Saver Chrome Extension is a browser-based tool built using HTML, CSS, and JavaScript that allows users to save useful links either manually or directly from the currently active browser tab.
All saved links are stored locally and persist across browser sessions.

This project demonstrates practical usage of Chrome Extension APIs and client-side storage.


🚀 Features

  • Save links by entering them manually
  • Save the URL of the currently active browser tab
  • Display saved links as clickable items
  • Persist data using browser localStorage
  • Delete all saved links with a single click
  • Simple and clean user interface

🛠️ Tech Stack

  • HTML – Structure of the extension popup
  • CSS – Styling and layout
  • JavaScript – Core logic and functionality
  • Chrome Extension API – Access active browser tabs
  • localStorage – Persistent data storage
  • Manifest Version: v3

📂 Project Structure

├── chrome.html # Popup UI
├── chrome.css # Styling
├── chrome.js # Extension logic
├── manifest.json # Chrome extension configuration
├── image.png # Extension icon

🔧 How It Works

  • Users can input a URL and save it using the SAVE INPUT button.
  • The SAVE TAB button captures the URL of the currently active browser tab using the Chrome Tabs API.
  • Saved links are displayed dynamically as clickable list items.
  • All data is stored in the browser’s localStorage to maintain persistence.
  • The DELETE ALL button clears all stored links.

▶️ How to Run the Extension

  1. Clone or download this repository:

    git clone https://github.com/your-username/link-saver-extension.git
  2. Open Google Chrome and go to: chrome://extensions/

  3. Enable Developer mode (top-right corner).

4.Click Load unpacked and select the project folder.

  1. The extension will appear in the Chrome toolbar.

🎯 Learning Outcomes

  • Understanding Chrome Extension architecture
  • Working with Chrome Tabs API
  • DOM manipulation using JavaScript
  • Using localStorage for persistent data
  • Building real-world browser utilities

👩‍💻 Author

Madhuri H S

About

No description, website, or topics provided.

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

 
 
 

Contributors