chrome 插件:content-script 部分逻辑在页面无法生效,可考虑插入 script 到页面上

背景:

某页面有个输入框, 用的应该是什么库里的组件, 直接修改内容不生效/机制不明确, 于是使用 paste event 粘贴到输入框, 结果发现也不行

定位:

  1. 使用 mutationObserver , 发现事件确实触发了, 输入框内容变了, 但马上又变回来了, 于是怀疑是输入框组件有做 mutationOberser 监听, 发现不符合规范的变动马上变回来; 但整个页面另存为之后, 没找到对应逻辑
  2. 发现代码在网页控制台里运行, 可以实现功能
  3. 发现了另一个插件可实现粘贴功能, 参考对方实现

结论:

  1. 把逻辑从 content-script 抽取出来, 由 content-script 生成 script 标签, 插入到页面上去, 这样就实现了

    原理不清楚, 可能 content-script 运行的环境跟 script 运行的环境不同导致的吧, 从控制台里打印的语句也能看出来, 控制台也分了层级, 默认当前页面, 底下还有各种插件的控制台

  2. 插入代码到页面具体方法, 参考该插件, 单独弄一个可独立运行的 js 文件, 打包好, content-script 里使用 chrome.extension.getURL 获取此 js 的地址, 生成 script , 指定地址, 加载

相关推荐
pobu1684 分钟前
aksk前端签名实现
java·前端·javascript
烛阴10 分钟前
带参数的Python装饰器原来这么简单,5分钟彻底掌握!
前端·python
0wioiw015 分钟前
Flutter基础(前端教程⑤-组件重叠)
开发语言·前端·javascript
冰天糖葫芦28 分钟前
VUE实现数字翻牌效果
前端·javascript·vue.js
Brilliant Nemo30 分钟前
集成CommitLInt+ESLint+Prettier+StyleLint+LintStaged
javascript
嘉琪00132 分钟前
2025 js——面试题(7)——ajax相关
开发语言·javascript·ajax
南岸月明37 分钟前
我与技术无缘,只想副业搞钱
前端
liu_yueyang39 分钟前
JavaScript VMP (Virtual Machine Protection) 分析与调试
开发语言·javascript·ecmascript
gzzeason1 小时前
在HTML中CSS三种使用方式
前端·css·html
hnlucky1 小时前
《Nginx + 双Tomcat实战:域名解析、静态服务与反向代理、负载均衡全指南》
java·linux·服务器·前端·nginx·tomcat·web