web-dev-qa-db-ja.com

chrome拡張機能で、コンテンツスクリプトを使用してVueページを挿入する方法

JSONビューアを実装しようとしていますchrome拡張機能。Vue（ http://treedoc.org ）ここで問題は、Vue Chrome拡張コンテンツスクリプトを挿入したページです。

私は この投稿 が拡張機能に通常のJavaScriptファイルを挿入するのに非常に役立つことを発見しました。しかし、これは既知のJavaScriptファイル名です。

私は this post とこれを発見しました vue-cli-plugin-browser-extension は、Vue=拡張オプションページとオーバーライドページの使用に役立ちますなどのエントリポイントはHTMLファイルですが、コンテンツスクリプトのエントリポイントはJavaScriptなので、JavaScriptファイルをコンテンツスクリプトに挿入するには、正確なファイル名を知る必要があります。プラグインとWebpackを使用すると、生成されたjavascriptファイルには、「override.0e5e7d0a.js」などのハッシュが付加されますが、これは事前には不明です。

javascriptvue.jsgoogle-chrome-extensioncontent-script
4
Jianwu Chen

vue-cli-plugin-browser-extensionはコンテンツスクリプトのファイル名にハッシュを含めないため、心配する必要はありません。

コンテンツスクリプトを追加するには、プラグインの componentOptions.contentScripts 、この例に示すように（vue add browser-extension 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'
            ]
          }
        }
      }
    }
  }
}
0
tony19