我正在尝试实现JSON查看器chrome扩展。我已经使用Vue(http://treedoc.org)实现了Viewer 。现在的问题是,如何才能将带有Chrome扩展程序内容脚本的Vue页面注入。
我发现这篇文章对在扩展名中注入普通的javascript文件非常有帮助。但这是已知的javascript文件名。
我发现了这篇文章,这个vue-cli-plugin-browser-extension对于将Vue用于扩展选项页面和替代页面等非常有用,因为它们的入口点是HTML文件。但是内容脚本入口点是javascript,要在内容脚本中注入javascript文件,您需要知道确切的文件名。使用插件和Webpack,生成的javascript文件将附加哈希,例如“ override.0e5e7d0a.js ”,这是预先未知的。
最近,我正在使用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); }
});
将vue应用程序添加为manifest.json中的内容脚本,而不是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 })
本文收集自互联网,转载请注明来源。
如有侵权,请联系[email protected] 删除。
我来说两句