chrome 扩展开发 - 如何获得iframe中的元素 和 相关问题解答

记一次需求完成的经过,要获取iframe中的元素,然后在页面进行分段跳转和相关操作,途中遇到了几个问题,方便后续自我回忆。

问题一  chrome扩展开发中 Popup页面无法持续保持的问题 【未解决】

这个需求感觉真的很广泛,即每次的Popup页面会随着失去焦点而关闭,再次打开后页面会回到初始页面,无法在页面中记录一些数据后失去焦点依然保持配置或选项。

查询了很多相关资料,有说监听Popup失去焦点事件的,有说直接让焦点事件不关闭的。目前该问题依然未能解决。后续通过网页中写视窗定位(position:fixed)的窗体加载元素来实现了界面构造。

问题二 chrome扩展开发中 iframe中的元素无法获取的问题

通过直接$(‘selector’) 的方式无法直接获得iframe中的元素

需要先根据ID 或者其他属性来获得对应iframe元素

var pdf_obj = document.getElementById('1').contentWindow.document.getElementById('pdf-viewer')

然后将该对象转换为jquery 对象  js和jq的互转方式如下

$('js_obj')                  //  通过用$()包裹直接将js转换为jq

$('selector')[0]          //  通过0下标直接转换为js对象

转换为jq对象后 即可进行scroll(), keydown()等事件的绑定和执行

问题三   有一些iframe中的元素一开始是没有加载好的,无法获取

这个问题需要等待加载完成后才能进行相关操作,通过设置定时器(interval)进行轮询获取。获取成功后,删除定时器。

var ele_check_timer = setInterval(function(){
	var pdf_obj = document.getElementById('1').contentWindow.document.getElementById('pdf-viewer');
    if (pdf_obj){ 
        cleanInterval(ele_check_timer);
        do something; 
    }}, 3000});

问题四  每次需要在chrome扩展文件夹中进行代码调试很麻烦

可以在谷歌浏览器中直接调试代码,按下f12后进入console即可输入代码进行调试。

省去了来回切换。一般网站中都内置了有jquery 如果没有Jquery可以尝试从其他网站中包含过来。

有些网站仅支持指定域名 可以尝试使用百度的cdn 原出处 @山岚_

;(function(d,s){d.body.appendChild(s=d.createElement('script')).src='https://libs.baidu.com/jquery/2.0.0/jquery.min.js'})(document);

问题五 控制台console操作正确但是就是不能获得元素?

有时候不小心因为其他的操作改变了当前页面后(即从top到了index或者其他页面)会一直无法获取元素,将如下位置设置回到到TOP即可。

问题六  轮询获取标签中 会有错误提示 如何让错误不显示?【未解决】

查询到可以通过 try语法来检测错误 但是使用后控制台没有错误提示,chrome开发中心依然一直有错误提示,没有找到问题的根源。

  • 4
    点赞
  • 7
    收藏
    觉得还不错? 一键收藏
  • 4
    评论
Chrome扩展content-scripts请求跨域的问题,可以通过在manifest.json文件添加"permissions"和"web_accessible_resources"字段来解决。具体步骤如下: 1. 在manifest.json文件添加"permissions"字段,用于声明扩展需要访问的权限。例如: ``` { "name": "My Extension", "version": "1.0", "manifest_version": 2, "permissions": [ "http://www.example.com/*" ], "content_scripts": [ { "matches": ["http://www.example.com/*"], "js": ["content_script.js"] } ] } ``` 以上代码,"http://www.example.com/*"表示扩展需要访问的域名,"content_scripts"表示扩展需要注入的脚本。 2. 在manifest.json文件添加"web_accessible_resources"字段,用于声明扩展需要访问的资源。例如: ``` { "name": "My Extension", "version": "1.0", "manifest_version": 2, "permissions": [ "http://www.example.com/*" ], "content_scripts": [ { "matches": ["http://www.example.com/*"], "js": ["content_script.js"] } ], "web_accessible_resources": [ "http://www.example.com/*" ] } ``` 以上代码,"http://www.example.com/*"表示扩展需要访问的资源。 3. 在content_script.js文件使用XMLHttpRequest或fetch等API发送跨域请求,代码示例如下: ``` fetch('http://www.example.com/api/data') .then(response => response.json()) .then(data => console.log(data)) .catch(error => console.error(error)); ``` 以上代码,fetch方法用于发送跨域请求,并且在响应获取数据。 需要注意的是,如果要在content-scripts使用cookie等认证信息,需要在manifest.json文件添加"permissions"字段,并使用XMLHttpRequest或fetch等API发送带有cookie的跨域请求。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 4
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值