Использование Pusher в Vue для расширения Chrome - PullRequest
Новая
       36

Использование Pusher в Vue для расширения Chrome

0 голосов
/ 08 апреля 2020

Я пытаюсь использовать Pusher внутри Chrome расширения, которое пишу в Vue.

Проблема, с которой я столкнулся, заключается в том, что Chrome отказывается загружать скрипт, используемый библиотекой Pusher's pusher- js (и я вижу ту же ошибку, если пытаюсь напрямую использовать файл Pusher JS, а не как часть библиотеки) (Очевидно, что ключ и сеанс отображаются полностью в фактической ошибке!)

pusher. js: 1128 Отказался загружать скрипт 'https://stats.pusher.com/timeline/v2/jsonp/1?session=XXX%3D&bundle=MQ%3D%3D&key=XXX ', поскольку он нарушает следующую директиву политики безопасности содержимого: "script-sr c' self '' unsafe-eval '". Обратите внимание, что 'script-sr c -elem' не был установлен явно, поэтому в качестве запасного варианта используется 'script-sr c'.

Виновна эта строка в толкателе JS:

head.insertBefore(self.script, head.firstChild);

В своем Манифесте я пробовал много разных вещей, включая, конечно, добавление https://stats.pusher.com, например:

"content_security_policy": "script-src 'self' https://stats.pusher.com https://js.pusher.com; object-src 'self'"

Но ничего не работает. Это работает, если я создаю тот же пример кода вне расширения Vue, что и «чистый Javascript» проект, но я бы предпочел использовать Vue, если смогу. Я подозреваю, что это происходит потому, что:

Во-первых: Pusher вызывает внешний скрипт из скрипта, а не напрямую

Во-вторых: я вызываю библиотеку Pusher вне файла Javascript

Это мое приложение. vue, которое подается из всплывающего окна. js: 

<template>
  <div>
    <p>Hello</p>
  </div>
</template>

<script>
import pusher from 'pusher';
export default {
  data() {
    return {
      messages: '',
    };
  },
  mounted() {
    const pusher = new Pusher('xxx', {
      cluster: 'eu',
      forceTLS: true,
    });
    this.channel = pusher.subscribe('realtime-updates');
    const channel = pusher.subscribe('realtime-updates');
    channel.bind('things', data => {
      console.log(data);
    });
  },
};
</script>

<style lang="scss" scoped>
p {
  font-size: 20px;
}
</style>

Обратите внимание, что в приведенном выше примере я пытался скопировать библиотеку Pusher Javacript в качестве локального файла. и установка пути к нему в Webpack, но я вижу точно такую ​​же ошибку, если я использую официальный NPM.

Ценю любую помощь,

Спасибо!

...