Я всегда думал о том, как создаются эти крутые расширения для Chrome🤔, поэтому я искал об этом и нашел блог freecodecamp об этом. Там я понял, что расширение chrome — это просто еще одно веб-приложение, но с файлом manifest.json.

Код разделен на различные части, которые поясняются ниже. Если вы хотите увидеть весь код, ознакомьтесь с моим репозиторием на Github: Нажмите здесь.

Идея

Поэтому, когда я подумал, что мне нужно создать расширение для Chrome, я искал вариант использования, который я могу решить с помощью своего расширения для Chrome. Во время поиска я наткнулся на свой раздел закладок в Chrome, который был заполнен огромным количеством ссылок и выглядел очень загроможденным. Затем я решил, что мне нужно создать что-то для организации ссылок.

Ресурсы

Я знал, как кодировать веб-приложение, поэтому мне нужно узнать что-нибудь новое, просто постарайтесь узнать немного информации о файле manifest.json. Если вы не знаете основ HTML CSS JS, я бы порекомендовал немного узнать об этом.

  1. HTML
  2. CSS
  3. Javascript

Процедура

Прежде всего, нам нужно создать грубую идею, которую мы хотим достичь в конце. Так придумали идею и начали работать над ней.

HTML-файл

Первая процедура была простой: просто создайте поле ввода и кнопку для сохранения и удаления. Поле ввода автоматически получает текущий URL-адрес вкладки, но у вас есть право редактировать его. После выбора ссылки вы можете сохранить ее.

<div class="len">
    <input id="link"></input>
    <button id="input-btn">Save</button>
    <button id="del-btn">Delete</button>
</div>

Под этой кнопкой я добавил сегмент списка, в котором будут отображаться все мои сохраненные ссылки.

 <div class="lenl">
    <ol  class="list-group" id="list">
    </ol>
</div>

Вы, должно быть, думаете, почему этот упорядоченный список пуст, потому что элемент списка будет извлечен из локального хранилища и добавлен через наш код javascript.

Самая большая проблема, с которой я сталкивался в этом проекте до сих пор, — удалить конкретную ссылку с помощью одной кнопки перед каждой ссылкой. Если мы увидим на первый взгляд, мы почувствуем, что просто добавляем крестик с функцией удаления, передающей порядковый номер ссылки. Но это невозможно в расширениях Chrome, поскольку они не позволяют использовать функцию onclick() из-за некоторых соображений безопасности.

Чтобы решить эту проблему, нам нужно использовать прослушиватель событий, который не позволяет нам передавать какие-либо аргументы. Вот почему я создал раздел в расширении, который появляется при нажатии кнопки удаления и показывает список текущих текущих ссылок и дает вам возможность удалить одну ссылку или все ссылки.

  <div class="delbox" id="delboxs">                                          
      <div class="headdel">
        <div class="crosshead">
      <h5>Select The Link To Delete</h5><br>
    </div>
    </div>
    
      <div class="droplink">             
        <div class="dropdown">
          <select name="del-list" value="Select" id="select1">      
            <option value="ALL" selected>Delete All</option>
          </select>
        </div>
        <div class="dropdown"><button id="del-btn-fin">Delete</button></div>
      </div>
      </div>

Приведенный выше код показывает нам поле раздела удаления. Итак, это были части нашего HTML-файла.

CSS-файл

Ничего особенного в простом коде CSS до сих пор не сделано, скоро я постараюсь сделать его более привлекательным с помощью некоторых специальных кодов CSS.

До тех пор вы можете проверить файл css здесь нажмите здесь.

Файл JAVASCRIPT

Файл Javascript является душой этого проекта. Код javascript разделен на различные функции для лучшего понимания.

Сначала функция состоит в том, чтобы извлечь текущий URL-адрес вкладки и заполнить его на вкладке ввода.

chrome.tabs.query({active: true, currentWindow: true}, function(tabs){ //Get URL
     link.value=tabs[0].url
})

Далее нужно сохранить этот URL-адрес в формате массива внутри сервера, если у вас есть какой-либо сервер, но в этом проекте я прикрепляю его к локальному хранилищу chrome. Все ссылки будут храниться в формате массива внутри локального хранилища chrome.

const inputBtn = document.getElementById("input-btn")
inputBtn.addEventListener("click", function sav(){  //Calling Save URLS
    if(document.getElementById("link").value==""){
        document.getElementById('aa').className = "myclass";
    }
    else{
        save()
        document.getElementById('aa').className = "visually-hidden";           
    }
   
})

Приведенный выше код представляет собой входную кнопку или код прослушивателя событий, связанный с кнопкой сохранения. Другие вещи, чтобы показать ошибку, когда поле ввода пусто. Для этого мы используем имя класса, если URL-адрес отсутствует, он будет показан. Если URL-адрес есть, мы скрываем его и вызываем функцию сохранения URL-адреса.

function save(){                                                 
url[cin]=document.getElementById("link").value;
link.value=""
localStorage.setItem('links', JSON.stringify(url));
cin++
Show()
}

Это функция для сохранения URL-адресов в строковом формате. В последнем коде прослушивателя события в конце, если в поле ввода (его идентификатор — ссылка) есть текст, мы вызываем эту функцию. На первом этапе он сохраняет URL-адрес поля ввода в массив с номером индекса cin, который будет подробно объяснен далее. Затем мы сбрасываем поле ввода. И обновите массив локального хранилища новым массивом и обновите cin (номер индекса) на ++.

В конце мы вызываем функцию show(), которая обновит текущий список ссылок. Для добавления элемента списка мы запускаем цикл от 0 до url.length. И это условия для undefined, null. Все строковые значения объединяются в переменной с именем listitem и изменяются внутри innerHTML.

function Show(){     
    let listItems = ""
        for (let i = 0; i < url.length; i++) 
        {
            if(url[i]=="" || url[i]=="undefined" || url[i]=="null" || url[i]==null){
                continue
            }
            else{
       listItems += `
        <li class="list-group-item">
            <a target='_blank' href='${url[i]}'>
                ${url[i]}
            </a>
        </li>
    `   
        }
        }
        list.innerHTML = listItems
        addlist()
    }

Начнем с обсуждения переменных и функций, используемых в коде.

Переменные:

  • url: массив для хранения URL-адресов.
  • activetab: строка, используемая в качестве тега для хранения.
  • cin: целое число для хранения длины массива URL.
  • n: целое число, используемое в качестве счетчика.
  • openn: логическая переменная, которая используется для определения того, открыто ли окно удаления.

Функции:

  • localStorage.getItem(): функция, используемая для извлечения данных из локального хранилища.
  • JSON.parse(): функция, используемая для анализа данных JSON.
  • chrome.tabs.query(): функция, используемая для получения активной вкладки в браузере Chrome.
  • localStorage.setItem(): функция, используемая для хранения данных в локальном хранилище.
  • document.getElementById(): функция, используемая для получения элемента по его идентификатору.
  • addEventListener(): функция, используемая для присоединения прослушивателя событий к элементу.
  • continue: ключевое слово, используемое для перехода к следующей итерации цикла.
  • splice(): функция, используемая для удаления элементов из массива.

Теперь давайте обсудим код более подробно.

Код начинается с объявления массива url и инициализации переменных activetab и cin. Если для этого расширения в локальном хранилище сохранены какие-либо данные, они извлекаются с помощью функции localStorage.getItem(). Если данные найдены, они анализируются с помощью функции JSON.parse(), а URL-адреса добавляются в массив url.

Затем функция chrome.tabs.query() используется для получения URL-адреса активной вкладки, который затем добавляется в поле ввода.

Две кнопки, inputBtn и delbtn, создаются и назначаются функции document.getElementById(). Кнопка inputBtn используется для сохранения URL-адресов, а кнопка delbtn используется для удаления URL-адресов. При нажатии кнопки inputBtn вызывается функция save(). Если поле ввода пусто, отображается сообщение об ошибке. Если нет, URL-адрес сохраняется в массиве url, а функция localStorage.setItem() используется для сохранения обновленного массива.

Кнопка delbtn используется для удаления URL-адресов. При нажатии кнопки вызывается функция del(). Если поле удаления не открыто, оно отображается, а для переменной openn устанавливается значение true. Если поле удаления открыто, оно скрыто, а для переменной openn устанавливается значение false.

Функция save() используется для сохранения URL-адресов в массив url и сохранения обновленного массива в локальном хранилище. Функция Show() используется для отображения сохраненных URL-адресов на экране. Функция addlist() используется для добавления сохраненных URL-адресов в раскрывающийся список.

Кнопка dellinkbtn используется для удаления определенных URL-адресов. Когда опция выбрана из выпадающего списка, вызывается функция droplink(). Если выбрана опция ALL, функция localStorage.clear() используется для удаления всех сохраненных URL-адресов. Если указан конкретный URL

Чтобы проверить весь код, загляните в мой репозиторий на github: Нажмите здесь.

Если вы хотите узнать больше или сообщить об ошибке, напишите мне по адресу [email protected]