https://github.com/anastasiiahombalevska/chrome-extensions

Chrome extension with JavaScript
https://github.com/anastasiiahombalevska/chrome-extensions

Last synced: 12 days ago
JSON representation

Chrome extension with JavaScript

• Host: GitHub
• URL: https://github.com/anastasiiahombalevska/chrome-extensions
• Owner: AnastasiiaHombalevska
• Created: 2024-08-27T10:08:20.000Z (4 months ago)
• Default Branch: main
• Last Pushed: 2024-08-28T13:29:50.000Z (4 months ago)
• Last Synced: 2024-08-28T13:29:59.701Z (4 months ago)
• Language: JavaScript
• Size: 5.88 MB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Scrimba - Chrome extension leads tracker solution

Scrimba helps you improve your coding skills by building realistic projects.

## Table of contents

- [Overview](#overview)

  - [The challenge](#the-challenge)

  - [Screenshot](#screenshot)

  - [Links](#links)

  - [How to install](#how-to-install)

- [My process](#my-process)

  - [Built with](#built-with)

  - [What I learned](#what-i-learned)

  - [Continued development](#continued-development)

- [Acknowledgments](#acknowledgments)

## Overview

### The challenge

Users should be able to:

- Save leads writing them into the input element

- Save the current Chrome tab in the list

- Maintain leads even after closing the browser

- Delete all leads by double clicking on the last button

- See hover states for interactive elements

### Screenshot

![screenshot](./chrome-ext-img.png)

### Links

- Solution URL: [@GitHub](https://github.com/AnastasiiaHombalevska/chrome-extensions)

- Live Site URL: [@GitHub](https://silly-monstera-811fb6.netlify.app)

### How to install

- Clone Repo or Download Zip

- Visit chrome://extensions/ and turn on "Developer mode"

- Click "Load unpacked" button and navigate to the folder you downloaded

- That's it! 🎉

## My process

### Built with

- Semantic HTML5 markup

- CSS custom properties

- CSS Flexbox Layout

- Mobile-first workflow

- Google Chrome APIs

### What I learned

With this project I improved a lot my JS skills. The newest things I learnt are:

- How to get the active Chrome tab and store it into localStorage using JSON's methods

```js

tabBtn.addEventListener("click", function () {

  chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {

    myLeads.push(tabs[0].url);

    localStorage.setItem("myLeads", JSON.stringify(myLeads));

    render(myLeads);

  });

});

```

### Continued development

I'd like to:

- Give the ability to select which leads to remove from the list

- Improve UI

## Acknowledgments

A big thank you to [Per Harald Borgen](https://github.com/perborgen) who is a pleasure to listen to and to learn new things in a funny and interactive way 👏