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

Jianwu Chen

我正在尝试实现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 ”,这是预先未知的。

Javascript Hupp Technologies

最近,我正在使用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] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

如何从Chrome扩展程序后台脚本访问页面变量

来自分类Dev

如何自动测试Chrome扩展程序中的内容脚本?

来自分类Dev

在Chrome扩展程序中停止内容脚本

来自分类Dev

如何使用Chrome扩展内容脚本中的Dropbox API?

来自分类Dev

从Chrome扩展程序中的内容脚本传递消息

来自分类Dev

将按钮注入网站(Chrome扩展程序内容脚本)

来自分类Dev

如何确定脚本是否已经从Chrome扩展程序注入到文档中

来自分类Dev

Chrome扩展程序:如何全局捕获/处理内容脚本错误?

来自分类Dev

Chrome扩展程序后台页面和内容脚本同步

来自分类Dev

Chrome扩展程序中内容脚本和背景页面之间消息传递的安全性

来自分类Dev

Chrome扩展程序:检查内容脚本是否已注入

来自分类Dev

Chrome扩展程序的内容脚本未注入特定网站

来自分类Dev

Chrome扩展程序注入脚本获取错误

来自分类Dev

动态地注入内容脚本 - Chrome扩展程序

来自分类Dev

是否可以在查看源页面上的Chrome扩展程序中运行内容脚本?

来自分类Dev

如何选择何时启动Chrome扩展程序的内容脚本?

来自分类Dev

从Chrome扩展程序中的内容脚本传递消息

来自分类Dev

Chrome扩展程序后台页面以编程方式注入的内容脚本多次注入

来自分类Dev

Chrome扩展程序:内容脚本注入时如何解决“不允许加载本地资源”错误

来自分类Dev

Chrome扩展程序不显示内容脚本中的数据

来自分类Dev

使用背景页面和内容脚本的Chrome扩展程序

来自分类Dev

Chrome扩展程序内容脚本中的Polymer元素

来自分类Dev

无法在Chrome扩展程序中从后台页面向内容脚本发送消息

来自分类Dev

Chrome扩展程序中内容脚本和背景页面之间消息传递的安全性

来自分类Dev

Chrome扩展程序的内容脚本未注入特定网站

来自分类Dev

Chrome扩展程序注入脚本获取错误

来自分类Dev

无法通过Chrome扩展程序中的内容脚本使onclick在注入的按钮上起作用

来自分类Dev

如何取消Chrome扩展程序内容脚本中的事件绑定?

来自分类Dev

从注入的脚本中获取Chrome扩展程序调用函数

Related 相关文章

  1. 1

    如何从Chrome扩展程序后台脚本访问页面变量

  2. 2

    如何自动测试Chrome扩展程序中的内容脚本?

  3. 3

    在Chrome扩展程序中停止内容脚本

  4. 4

    如何使用Chrome扩展内容脚本中的Dropbox API?

  5. 5

    从Chrome扩展程序中的内容脚本传递消息

  6. 6

    将按钮注入网站(Chrome扩展程序内容脚本)

  7. 7

    如何确定脚本是否已经从Chrome扩展程序注入到文档中

  8. 8

    Chrome扩展程序:如何全局捕获/处理内容脚本错误?

  9. 9

    Chrome扩展程序后台页面和内容脚本同步

  10. 10

    Chrome扩展程序中内容脚本和背景页面之间消息传递的安全性

  11. 11

    Chrome扩展程序:检查内容脚本是否已注入

  12. 12

    Chrome扩展程序的内容脚本未注入特定网站

  13. 13

    Chrome扩展程序注入脚本获取错误

  14. 14

    动态地注入内容脚本 - Chrome扩展程序

  15. 15

    是否可以在查看源页面上的Chrome扩展程序中运行内容脚本?

  16. 16

    如何选择何时启动Chrome扩展程序的内容脚本?

  17. 17

    从Chrome扩展程序中的内容脚本传递消息

  18. 18

    Chrome扩展程序后台页面以编程方式注入的内容脚本多次注入

  19. 19

    Chrome扩展程序:内容脚本注入时如何解决“不允许加载本地资源”错误

  20. 20

    Chrome扩展程序不显示内容脚本中的数据

  21. 21

    使用背景页面和内容脚本的Chrome扩展程序

  22. 22

    Chrome扩展程序内容脚本中的Polymer元素

  23. 23

    无法在Chrome扩展程序中从后台页面向内容脚本发送消息

  24. 24

    Chrome扩展程序中内容脚本和背景页面之间消息传递的安全性

  25. 25

    Chrome扩展程序的内容脚本未注入特定网站

  26. 26

    Chrome扩展程序注入脚本获取错误

  27. 27

    无法通过Chrome扩展程序中的内容脚本使onclick在注入的按钮上起作用

  28. 28

    如何取消Chrome扩展程序内容脚本中的事件绑定?

  29. 29

    从注入的脚本中获取Chrome扩展程序调用函数

热门标签

归档