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

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

I found 这个帖子 https://stackoverflow.com/questions/9515704/insert-code-into-the-page-context-using-a-content-script/9517879#9517879对于在扩展中注入普通的 javascript 文件非常有帮助。但这是已知的 javascript 文件名。

I found 这个帖子 https://medium.com/javascript-in-plain-english/how-to-make-a-chrome-extension-with-vue-js-56e50bd97972和这个vue-cli-插件-浏览器扩展 https://www.npmjs.com/package/vue-cli-plugin-browser-extension使用 Vue 进行扩展选项页面和覆盖页面等很有帮助，因为它们的入口点是 HTML 文件。但内容脚本入口点是一个javascript，要在内容脚本中注入一个javascript文件，您需要知道确切的文件名。使用插件和 Webpack，生成的 javascript 文件会附加哈希值，例如“覆盖.0e5e7d0a.js“这是事先不知道的。

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

I used 这个样板 https://github.com/Kocal/vue-web-extension以最少的改变让它轻松工作。

使用此样板创建 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并打电话router.replace("/") after new Vue({ ..., router })