在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扩展程序内容脚本中的事件绑定?

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类Dev

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

来自分类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扩展程序不显示内容脚本中的数据

Related 相关文章

  1. 1

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

  2. 2

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

  3. 3

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

  4. 4

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

  5. 5

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

  6. 6

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

  7. 7

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

  8. 8

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

  9. 9

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

  10. 10

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

  11. 11

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

  12. 12

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

  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扩展程序注入脚本获取错误

  23. 23

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

  24. 24

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

  25. 25

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

  26. 26

    如何使用Chrome扩展程序在页面加载之前隐藏所有内容

  27. 27

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

  28. 28

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

  29. 29

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

热门标签

归档