В расширении chrome, как использовать скрипт содержимого для вставки страницы Vue - PullRequest
Новая
       32

В расширении chrome, как использовать скрипт содержимого для вставки страницы Vue

4 голосов
/ 20 января 2020

Я пытаюсь реализовать расширение JSON viewer chrome. У меня уже есть Viewer, реализованный с Vue (http://treedoc.org). Теперь проблема в том, как я могу внедрить страницу Vue с помощью скрипта с расширением Chrome.

Я нашел это сообщение очень полезно для вставки обычного javascript файла в расширение. Но это с известным javascript именем файла.

Я нашел этот пост , и этот vue -cli-plugin-browser-extension полезно использовать Vue для страницы параметров расширения и страницы переопределения, et c, поскольку точкой входа для них являются HTML файлы. но точка входа скрипта контента - это javascript, чтобы внедрить файл javascript в скрипт контента, вам нужно знать точное имя файла. С помощью плагина и Webpack к сгенерированным javascript файлам добавляется ha sh, например " override.0e5e7d0a. js", который неизвестен заранее.

Ответы [ 2 ]

3 голосов
/ 22 января 2020

Недавно я разрабатывал расширение chrome с vuejs и предъявлял те же требования, что и приложение целого Vue, чтобы указать c веб-страницу, т.е. google.com, но, к сожалению, vue -router не делает ' t работа.

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

Как только вы создали Vue проект с этим шаблоном, вам нужно обновить src /popup/popup.js для добавления приложения vue на веб-страницу. 

...
const div = document.createElement("div")
document.body.insertBefore(div, document.body.firstChild);

new Vue({
   el: div,
   render: h => { return h(App); }
});

Добавление приложения vue в качестве сценариев содержимого в манифест. json вместо browser_action или page_action. 

"content_scripts": [{
    "matches": ["*://*.google.com/*"],
    "js": [
        "popup/popup.js"
    ],
    "css": ["/popup/popup.css"]
}]

Здесь vue приложение будет добавлено только на google.com. Если вы хотите внедрить все веб-страницы, удалите совпадения из content_scripts

PS

Управляемый маршрутизатор vue работает в режиме abstract и звоните router.replace("/") после new Vue({ ..., router })

0 голосов
/ 20 января 2020

vue-cli-plugin-browser-extension не включает ha sh в имени файла сценариев содержимого, поэтому не стоит беспокоиться.

Чтобы добавить сценарии содержимого, настройте плагин componentOptions.contentScripts, как показано в этом примере (генерируется из vue add browser-extension из root проекта Vue CLI): 

// vue.config.js
module.exports = {
  //...
  pluginOptions: {
    browserExtension: {
      componentOptions: {
        background: {
          entry: 'src/background.js'
        },
        contentScripts: {
          entries: {
            'content-script': [
              'src/content-scripts/content-script.js'
            ]
          }
        }
      }
    }
  }
}
...