The Leads Tracker Chrome extension allows you to save links in a convenient and organized manner. Easily track leads by manually inputting URLs or clicking a button to capture the current tab's link. The extension leverages JavaScript and DOM manipulation, showcasing proficiency in local storage handling and browser functionality enhancement.
- JavaScript Proficiency
- Chrome Extension Development
- Local Storage Handling
- API Integration (Chrome Tabs API)
- Version Control (Git)
- Problem-Solving and Debugging
- User Interface Design
- Project Planning and Execution
Through developing the Chrome extension for lead tracking and local storage handling, I gained valuable skills and experiences that have enhanced my capabilities as a developer:
-
JavaScript Proficiency: The project deepened my understanding of JavaScript, and I became more adept at using the language to manipulate the Document Object Model (DOM) and create interactive web applications.
-
Chrome Extension Development: I gained hands-on experience in building a functional Chrome extension from scratch. I learned how to set up the extension, define the extension's user interface, and handle user interactions effectively.
-
Local Storage Handling: The project exposed me to the concept of local storage in web development. I learned how to store data locally within the user's browser, allowing for data persistence and seamless user experiences.
-
API Integration (Chrome Tabs API): I acquired knowledge of the Chrome Tabs API and learned how to utilize it to interact with the browser's active tabs. This skill allowed me to save the current tab's URL as a lead, improving the extension's functionality.
-
Version Control (Git): Throughout the project, I utilized Git for version control, enabling me to manage code changes effectively, collaborate with others, and track the development progress.
-
Problem-Solving and Debugging: I encountered various challenges during the development process, and this project provided ample opportunities to sharpen my problem-solving and debugging skills.
-
User Interface Design: While building the extension's user interface, I honed my skills in creating clean and user-friendly designs that enhance the overall user experience.
-
Project Planning and Execution: The project required careful planning and execution to ensure that the extension met the intended functionality. This experience enhanced my project management skills and ability to meet deadlines.
- Open the extension popup by clicking on the extension icon in the browser toolbar.
- Enter a lead URL or any input into the text field.
- Click the "SAVE INPUT" button to save the entered input as a lead.
- Click the "SAVE TAB" button to save the current active tab's URL as a lead.
- All saved leads will be displayed as clickable links in the extension popup.
- To remove all saved leads, double-click the "DELETE ALL" button.
/* CSS styles for the extension popup */
/* ... (CSS styles are defined here) ... */<!-- HTML structure for the extension popup -->
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="index.css">
</head>
<body>
<input type="text" id="input-el">
<button id="input-btn">SAVE INPUT</button>
<button id="tab-btn">SAVE TAB</button>
<button id="delete-btn">DELETE ALL</button>
<ul id="ul-el"></ul>
<script src="index.js"></script>
</body>
</html>// JavaScript logic for the extension popup
// ... (JavaScript code is defined here) ...{
"manifest_version": 3,
"version": "1.0",
"name": "Leads tracker",
"action": {
"default_popup": "index.html",
"default_icon": "icon.png"
},
"permissions": [
"tabs"
]
}To use this Chrome extension, follow these steps:
-
Download the code files (
index.css,index.html,index.js, andmanifest.json) to a local directory. -
Open Google Chrome and navigate to
chrome://extensions. -
Enable Developer Mode (usually located in the top right corner).
-
Click on "Load unpacked" and select the directory where you saved the code files.
-
The extension will now be installed and available in the browser toolbar.
Contributions to improve and enhance this extension are welcome. Feel free to fork this repository, make changes, and submit a pull request.
This project is licensed under the MIT License.