Создание расширения Chrome с применением vue.js

Вопрос структуризации кода всегда стоит очень остро.
В случае расширений chrome это тоже актуально. И использование vue.js как раз позволит вам упорядочить визуальную часть вашего расширения.

Начнем с вопроса «почему vue?»

  • Это современный JavaScript-фреймворк c отличной документацией
  • Двусторонний биндинг позволит не мучится с DOM при выводе данных
  • Вернувшись к проекту и через год вы быстро разберетесь за что отвечает каждый участок кода
  • Подключение так же просто как и подключение jQuery
  • Он минималистичен! Вы получаете все плюшки и платите за это всего +80кб.

Где применяем

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

Html, который выводит все это, очень минималистичен. Вот он:

<div class="container-fluid" id="popupTest">
    <h4>{{title}}</h4>
    <a href="#" v-on:click.stop="onClickCopyDescription()">Копировать</a>
    <textarea class="form-control" style="width:100%">{{description}}</textarea>

    <br>
    <img class="view-img" v-bind:class="{'sel-img':img==selectImg}" v-for="(img,index) in images" v-bind:src="img" v-on:click="onSelectImg(img)">

    <br>
    <a v-show="selectImg != undefined" href="#" v-on:click.stop="onClickOpenSelectImg()">Открыть в новом окне</a>
    <input class="form-control" v-bind:value="selectImg" type="text" style="width: 100%" v-show="selectImg != undefined">
</div>

И так суммируем что можно увидеть в примере:

  • Рендер данных на popup элемент
  • Получение контента со страницы
  • Копирование в буфер обмена
  • Открытие новой закладки

github.com/BorisMor/ext-chrome-vuejs

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *