我正在尝试实现 JSON 查看器 chrome 扩展。我已经用 Vue (http://treedoc.org) 实现了查看器。现在的问题是我如何才能在 Vue 页面中注入 Chrome 扩展内容脚本。
我发现this post 对在扩展中注入普通的 javascript 文件非常有帮助。但这是一个已知的 javascript 文件名。
我发现this post 和这个vue-cli-plugin-browser-extension 有助于将 Vue 用于扩展选项页面和覆盖页面等，因为它们的入口点是 HTML 文件。但是内容脚本入口点是一个 javascript，要在内容脚本中注入一个 javascript 文件，您需要知道确切的文件名。使用插件和 Webpack，生成的 javascript 文件会附加诸如“override.0e5e7d0a.js”之类的散列，这是预先未知的。
【问题讨论】：
标签： javascript vue.js google-chrome-extension content-script
最近我正在使用 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 中删除匹配项
附言
管理使用模式abstract的vue路由器并在new Vue({ ..., router })之后调用router.replace("/")
【讨论】：
popup.html 在我们采用这种方法时未使用。您编写和导入的所有 CSS 都将放在 popup.css 中，因此您可以在内容脚本的 CSS 中提及 popup.css，正如我在答案中所示。
router.replace("/") 放入，这将是初始路由。
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'
]
}
}
}
}
}
}
【讨论】：