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

Question

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

我发现这篇文章对于在扩展中注入普通的 javascript 文件非常有帮助。但这是一个已知的 javascript 文件名。

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

Answer 1

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

我使用这个样板来让它以最少的更改轻松工作。

使用此样板创建 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 app 作为内容脚本，而不是 browser_action 或 page_action。

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

这里 vue 应用程序将仅在 google.com 上注入。如果要注入所有网页，则从 content_scripts 中删除匹配项

聚苯乙烯

管理到使用模式抽象的vue 路由器并router.replace("/")在之后调用new Vue({ ..., router })