Приложение VueJS для замены содержимого страницы в расширении Chrome

Я рассматриваю возможность написания расширения Chrome на VueJS, чтобы полностью изменить внешний вид определенного сайта.

Таким образом, мне нужно динамически создать элемент, смонтировать в нем свое приложение VueJS и заменить тело страницы этим отображаемым содержимым.

Я протестировал динамическое создание контейнера на простой странице без расширения Chrome, и все отлично работает:

<html>
  <body>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
    <script>
      const app = new Vue({
        data: () => ({
          count: 0
        }),

        template: '<button v-on:click="count++">Clicked {{ count }} times</button>'
      });


      const body = document.getElementsByTagName('body')[0];
      let vueContainer = document.createElement('div')
      body.replaceWith(vueContainer);
      app.$mount(vueContainer);
    </script>
  </body>
</html>

Это делает приложение VueJS полностью исправным.

Но затем, когда я создаю расширение Chrome и помещаю тот же код в свой файл script.js, он фактически заменяет содержимое страницы пустой страницей. Код VueJS интерпретируется (если я добавлю console.log("something") в метод mounted приложения VueJS, он появится).

// script.js

const app = new Vue({
  data: () => ({
    count: 0
  }),

  template: '<button v-on:click="count++">Clicked {{ count }} times</button>'
});

const body = document.getElementsByTagName('body')[0];
let vueContainer = document.createElement('div')
body.replaceWith(vueContainer);
app.$mount(vueContainer);

// manifest.json

{
  "name": "My extension",
  "description": "Blah",
  "version": "1.0",
  "manifest_version": 3,
  "content_scripts": [
    {
      "matches": ["https://www.mysite.fr/*"],
      "js": ["[email protected]", "script.js"]
    }
  ]
}

Это похоже на то, что расширение предотвращает отображение отображаемого контента.

На самом деле, при проверке DOM я получил подтверждение того, что мое приложение VueJS запущено: элемент div заменяется… но комментарием HTML вместо отображаемого содержимого:

<!---->

Любые идеи? Заранее спасибо!


javascript vue.js google-chrome-extension
person user650108    schedule 23.04.2021    source источник
comment
"[email protected]" не выглядит допустимым сценарием. Вы должны загрузить пакет vue в виде js-файла, поместить его в каталог/пакет расширения и указать фактическое правильное имя в js. Если со скриптом все в порядке, но просто имя странное, попробуйте все равно переименовать его в .js.   -  person wOxxOm    schedule 23.04.2021
comment
Спасибо за ваш комментарий wOxxOm, но это не проблема: как я уже сказал, [email protected] загружается нормально, и мое приложение VueJS выполняется, следовательно, вывод в консоли, если у меня есть console.log в смонтированном методе. Больше похоже на проблему рендеринга из-за расширения Chrome?   -  person user650108    schedule 23.04.2021
comment
Что ж, поскольку это работает во всплывающем окне, вы можете сделать то же самое, используя iframe вместо div и визуализируя Vue внутри этого iframe, пример .   -  person wOxxOm    schedule 23.04.2021
comment
Ну, это тоже не работает :( Я отредактировал свой исходный пост после подтверждения того, что приложение действительно выполняется, DOM обновляется, но вместо того, чтобы получить обработанный шаблон, он просто получает комментарий: <!---->. Следовательно, пустая страница. Это странный…   -  person user650108    schedule 23.04.2021
comment
Решение iframe использует точно такие же html + скрипты внутри iframe, что и ваше уже работающее решение, поэтому оно тоже должно работать.   -  person wOxxOm    schedule 23.04.2021

Ответы (1)


arrow_upward
0
arrow_downward

Хорошо, поэтому я решил это благодаря документу. Расширение Chrome заблокирует любые теги js в шаблонах.

Таким образом, единственным решением является передача предварительно скомпилированного шаблона.

Использование vue-cli, затем сборка приложения с использованием как скриптов, так и тегов в файлах js, а затем ссылка на него в файле manifest.json работает!

person user650108    schedule 23.04.2021