我正在尝试实现 JSON 查看器 chrome 扩展。我已经用 Vue ( http://treedoc.org ) 实现了查看器。现在的问题是我怎样才能用 Chrome 扩展内容脚本注入(inject) Vue 页面。
我找到了this post在扩展中注入(inject)普通的 javascript 文件非常有帮助。但这是一个已知的 javascript 文件名。
我找到了this post这个vue-cli-plugin-browser-extension将 Vue 用于扩展选项页面和覆盖页面等很有帮助，因为它们的入口点是 HTML 文件。但是内容脚本入口点是一个 javascript，要在内容脚本中注入(inject)一个 javascript 文件，您需要知道确切的文件名。使用插件和 Webpack，生成的 javascript 文件会附加诸如“override.0e5e7d0a.js”之类的散列，这是预先未知的。
最佳答案
最近我正在使用 vuejs 开发 chrome 扩展，并且需要将整个 Vue 应用程序注入(inject)特定网页(即 google.com)，但遗憾的是 vue-router 不起作用。
我用了this boilerplate让它以最少的更改轻松工作。
使用此样板创建 Vue 项目后，您需要更新 src/popup/popup.js 以在网页中注入(inject) 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 上注入(inject)。如果要注入(inject)所有网页，请从 content_scripts 中删除匹配项
附:
管理到使用模式 的 vue 路由器摘要 并调用
router.replace("/")在 new Vue({ ..., router }) 之后
关于javascript - 在 chrome 扩展中，如何使用内容脚本注入(inject) Vue 页面，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/59816151/