То, что я узнал о Vuejs от наращивания хромированного расширения

Автор оригинала: Anthony Gore.

Я хотел поэкспериментировать со строить расширение Google Chrome с Vue.js, поэтому я решил взять Vue toomsomvc И попробуйте сделать его доступным из моей панели инструментов браузера:

Создание расширения браузера с Vue – очень похожий процесс для создания обычной веб-страницы с Vue, но есть несколько ключевых различий, которые я буду обсуждать в этой статье.

Примечание: эта статья была первоначально опубликована здесь на блоге разработчиков Vue.js на 2017/05/08.

Нет шаблонов

Одна вещь, которую мы любим о Vue – это способность использовать шаблоны либо в файле:

  

    
{{ message }}
  

Или в строке:

new Vue({
  template: `
{{ message }}
`
});

Одна небольшая проблема: Вы не можете использовать такие шаблоны в хромированных расширениях!

Но прежде чем отказаться и вернуться к jQuery, стоит понять, почему это ограничение существует и насколько Vue может помочь вам обойтись.

Расширения браузера похожи на веб-страницы только разные

Расширения браузера используют HTML, CSS и JavaScript, как обычные веб-страницы. Но есть API, которые расширения могут получить доступ к тому, что веб-страницы не могут предоставить их расширять функции закладок, инструментов DEV и других аспектов браузера.

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

Политика безопасности контента (CSP)

Никто не любит читать о политиках, поэтому я буду держать это короткое: среди прочего, CSP накладывает ограничения на тот тип кода, который может включать в себя ваше расширение:

• Встроенные скрипты отключены E.g. <кнопка>
• Содержание должно быть загружено локально I.E. Нет сценариев через CDN
• Eval Функции отключены E.g. Eval («Оповещение ((« Привет) »)

Это последнее ограничение на Eval Функция, которая влияет на нас Vue пользователей.

Примечание: Eval считается небезопасным, поскольку его можно использовать для запуска произвольного кода и сделать ваше приложение уязвимым для Скрещивание атаки Отказ

Как скомпилированы шаблоны Vue

Во время выполнения внутренний шаблон Templater Vue анализирует строку документа или шаблона и генерирует предварительный представленный JavaScript шаблон.

Выручки эффективности VUE частично связаны с его способностью делать манипуляции в JavaScript, прежде чем сделать их непосредственно на страницу.

К сожалению, Compiler шаблона опирается на Eval Функции для выполнения этой задачи компиляции, и они не допускаются под CSP.

Решение 1: Разрешить «небезопасную оценку» (не рекомендуется)

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

Решение 2: не компилируйте шаблоны во время выполнения

Мы действительно можем построить Vue App просто отлично без компилятора шаблона времени выполнения (FYI Compiler – это внутренняя библиотека, называемая Vue-Template-Compiler , который можно использовать автономный).

Если вы использовали Vue в качестве модуля ES6, то вы, возможно, уже делаете это, но, возможно, не осознавали, что это то, что вы делали!

Как обсуждалось, Compiler Template Vue используется всякий раз, когда вы используете Шаблон Строка E.g.

new Vue({
  template: `
{{ message }}
`
});

Или, когда вы подключаетесь к шаблону, используя Эль :

new Vue({
  el: '#app'
}); 

  

    
{{ message }}
  

У обоих этих сценариев Vue должен разбирать строку

Рендер функции

Рендер функции Являются ли функции JavaScript, которые можно использовать для создания шаблона. Если вы используете функцию рендеринга для создания шаблона, компилятор шаблона не требуется:

new Vue({
  render (createElement) {
    return createElement('div', this.message)
  }
}).$mount('#app');

ПРИМЕЧАНИЕ. Использование пустого узла для монтирования, чтобы не вызовет компилятор шаблона.

Но … Функции рендеринга трудно использовать

Это правда, функции рендеринга не являются интуитивным способом создания шаблонов.

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

Очевидно, что CSP не против, если вы компилируете шаблон, он делает это во время выполнения с Eval Это проблема.

Примечание. Вы можете использовать JSX, чтобы сделать ваши функции рендера, если вы так наклонены.

Один файловые компоненты к спасению

Есть еще одна причина, по которой одними файловые компоненты (SFC) являются потрясающими: они предварительно составлены и, следовательно, соответствуют CSP.

Когда вы используете Vue-loader обработать ваш .vue Файл, одна из вещей, которые он использует Vue-шаблон-компилятор Чтобы превратить шаблон вашего компонента в функцию рендера.

Так что, если у вас есть SFC с этим шаблоном:

После того, как вы построите, посмотрите в свой пакет WebPack, и вы увидите что-то вроде этого:

render: function () {
  return this.$createElement("div", {attrs: {id: "app"}}, [this.message])
}

Если все ваше приложение состоит из одного файловых компонентов Vue, не нужно будет делать какие-либо компиляции шаблона выполнения.

Только построить

Возможно, вы заметили в Vue Docts что-то о «полной сборке» и «только во время выполнения». Если вы похожи на меня, вы, вероятно, пропустили эту часть!

Создание только за выполнением является то же самое, что только для полной сборки без Vue-шаблон-компилятор Отказ Если ваши шаблоны приложений были предварительно скомпилированы, вы должны использовать эту строгу только для выполнения. Это не только соответствует лишь CSP, но это также 30% легче!

В настройке ES5 вы можете загрузить только библиотеку Vue Runtime.

Но, скорее, вы будете использовать настройку ES6 с WebPack, и вы хотите этого:

import Vue from 'vue'

Обратитесь к строению времени выполнения, а не полная сборка. К счастью, это делает это по умолчанию!

Стать старшим Vue Developer в 2020 году.

Учитесь и осваивайте, какие профессионалы знают о строительстве, тестировании и развертывании, полностью стековых Vue Apps в нашем последнем курсе.

Учить больше