在chrome扩展中，如何使用内容脚本注入一个Vue页面

Question

我正在尝试实施 JSON 查看器 chrome 扩展。我已经使用 Vue (http://treedoc.org) 实现了查看器。现在的问题是如何使用 Chrome 扩展内容脚本注入 Vue 页面。

我发现 this post 对在扩展中注入正常的 javascript 文件很有帮助。但这是一个已知的 javascript 文件名。

我发现 this post and this vue-cli-plugin-browser-extension 有助于将 Vue 用于扩展选项页面和覆盖页面等，因为它们的入口点是 HTML 文件。但是内容脚本入口点是一个javascript，要在内容脚本中注入一个javascript文件，你需要知道确切的文件名。使用插件和 Webpack，生成的 javascript 文件会附加哈希值，例如“override.0e5e7d0a.js”，这是事先不知道的。

Answer 1

vue-cli-plugin-browser-extension内容脚本的文件名中不包含散列，因此无需担心。

要添加内容脚本，请配置插件的 componentOptions.contentScripts，如本例所示（从 Vue CLI 项目的根目录 vue add browser-extension 生成）：

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

Answer 2

最近我正在使用 vuejs 开发 chrome 扩展，并且有相同的要求需要将整个 Vue 应用程序注入特定网页，即 google.com，但遗憾的是 vue-router 不起作用。

我使用 this boilerplate 让它以最少的改动轻松工作。

使用此样板文件创建 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); }
});

在 manifest.json 中添加 vue 应用程序作为内容脚本，而不是 browser_action 或 page_action。

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

此处 vue 应用程序将仅在 google.com 上注入。如果您想注入所有网页，请从 content_scripts

中删除匹配项

P.S.

管理 vue 路由器使用模式 abstract 并在 new Vue({ ..., router })

之后调用 router.replace("/")

在chrome扩展中，如何使用内容脚本注入一个Vue页面

In chrome extension, how to use content script to inject a Vue page

javascript

google-chrome-extension

content-script

vue.js