在Chrome插件中访问原始网页中的变量
2012-10-24 15:59
459 查看
转自:http://www.keakon.net/2011/11/02/%E5%9C%A8Chrome%E6%8F%92%E4%BB%B6%E4%B8%AD%E8%AE%BF%E9%97%AE%E5%8E%9F%E5%A7%8B%E7%BD%91%E9%A1%B5%E4%B8%AD%E7%9A%84%E5%8F%98%E9%87%8F
今天凌晨在写Reader
Sharer插件时遇到个问题。
Google Reader这个网页有_COMMAND_TOKEN这个全局变量,我需要使用它,但Chrome插件的Content
Scripts的执行环境和原始网页是不一样的,导致没法用window._COMMAND_TOKEN来直接获取。
如果是在Firefox中,我可以使用unsafeWindow._COMMAND_TOKEN来直接获取;很早以前的Chrome插件也是和原始网页共享执行环境的,可惜美好的日子一去不复返了。
幸运的是我找到“How
can I mimic Greasemonkey/Firefox's unsafeWindow functionality in Chrome?”这个问题,得到了3种解决办法。
考虑到Google Reader的网页太复杂,这里就以Google首页来举例了。打开网页后,右键打开审查元素,然后在控制台输入fp,就会看到一个字符串,这就是原始网页的一个全局变量。
现在我要获取它,就可以创建一个script元素,append到head。而这个script元素的执行环境是原始网页的,可以自由使用fp这个变量。
不过fp取出来后也没法直接传递回content script。好在文档里说DOM是共用的,所以可以在这个script里,把值设置为某个元素的属性或innerText,再在content script里获取就行了:
这里延迟的原因是原始网页加载完时,还需要等一会才会创建fp变量。
另一种办法就是使用location.href,它是用来跳转网页的,但是也可以用来执行JavaScript,并且执行环境也是原始网页:
这里嵌套使用了setTimeout,原因是跳转是一个事件,并不会打断当前脚本的执行(而添加script元素会立刻执行),因此需要让后面的语句等待事件处理完毕。
不过前面所说的方法都必须先保存,再取出,能这样做的只有字符串等简单类型,对函数则无能为力了。
实际上还有更方便的方法,那就是在DOM上绑定一个事件,而事件的处理函数则返回window变量,再在程序中触发这个事件,就能获得执行环境的window变量了。幸运的是,这个执行环境仍然是原始网页的:
今天凌晨在写Reader
Sharer插件时遇到个问题。
Google Reader这个网页有_COMMAND_TOKEN这个全局变量,我需要使用它,但Chrome插件的Content
Scripts的执行环境和原始网页是不一样的,导致没法用window._COMMAND_TOKEN来直接获取。
如果是在Firefox中,我可以使用unsafeWindow._COMMAND_TOKEN来直接获取;很早以前的Chrome插件也是和原始网页共享执行环境的,可惜美好的日子一去不复返了。
幸运的是我找到“How
can I mimic Greasemonkey/Firefox's unsafeWindow functionality in Chrome?”这个问题,得到了3种解决办法。
考虑到Google Reader的网页太复杂,这里就以Google首页来举例了。打开网页后,右键打开审查元素,然后在控制台输入fp,就会看到一个字符串,这就是原始网页的一个全局变量。
现在我要获取它,就可以创建一个script元素,append到head。而这个script元素的执行环境是原始网页的,可以自由使用fp这个变量。
不过fp取出来后也没法直接传递回content script。好在文档里说DOM是共用的,所以可以在这个script里,把值设置为某个元素的属性或innerText,再在content script里获取就行了:
setTimeout(function() { var script = document.createElement('script'); script.type = 'text/javascript'; script.innerHTML = "document.body.setAttribute('data-fp', fp);"; document.head.appendChild(script); document.head.removeChild(script); console.log(document.body.getAttribute('data-fp')); }, 1000);
这里延迟的原因是原始网页加载完时,还需要等一会才会创建fp变量。
另一种办法就是使用location.href,它是用来跳转网页的,但是也可以用来执行JavaScript,并且执行环境也是原始网页:
setTimeout(function() { location.href = "javascript:document.body.setAttribute('data-fp', fp);"; setTimeout(function() { console.log(document.body.getAttribute('data-fp')); }, 0); }, 1000);
这里嵌套使用了setTimeout,原因是跳转是一个事件,并不会打断当前脚本的执行(而添加script元素会立刻执行),因此需要让后面的语句等待事件处理完毕。
不过前面所说的方法都必须先保存,再取出,能这样做的只有字符串等简单类型,对函数则无能为力了。
实际上还有更方便的方法,那就是在DOM上绑定一个事件,而事件的处理函数则返回window变量,再在程序中触发这个事件,就能获得执行环境的window变量了。幸运的是,这个执行环境仍然是原始网页的:
setTimeout(function() { var div = document.createElement('div'); div.setAttribute('onclick', 'return window;'); var unsafeWindow = div.onclick(); console.log(unsafeWindow.fp); }, 1000);
相关文章推荐
- 【转】Chrome保存mhtml网页文件的方法 – 无需任何插件,完美!
- Chrome网页元素事件查看插件-Visual Event
- 30个优秀的chrome网页设计开发插件
- Chrome插件:网页截图
- 无需插件用Chrome调试WebView加载的网页
- XPath Helper:chrome爬虫网页解析工具 Chrome插件
- 使用 Chrome 浏览器插件 Web Scraper 10分钟轻松实现网页数据的爬取
- Chrome插件Math Anywhere,渲染有Latex的网页
- 用Chrome配合Chales 模拟手机浏览器访问3G网页
- 适合网页设计师的11个不错的Chrome插件
- 【XPath Helper:chrome爬虫网页解析工具 Chrome插件】XPath Helper:chrome爬虫网页解析工具 Chrome插件下载_教程_安装 - 开发者插件 - Chrome插件网
- 开发Chrome插件实现在Chrome中截取网页
- 在web.xml定义,在网页中使用变量实例 使用只有创建变量的servlet才可以访问的<init-param>方式 附带登陆和跳转实现
- 【转】Chrome保存mht网页文件的方法 – 无需任何插件,完美!
- 网页开发几个不错的Chrome插件
- 全网最详细的如何在谷歌浏览器里正确下载并安装Postman【一款功能强大的网页调试与发送网页HTTP请求的Chrome插件】(图文详解)
- Chrome插件-网页版BusHound
- 谷歌浏览器chrome设置特定网页使用Https(ssl)访问
- [转]用chrome模拟微信浏览器访问需要OAuth2.0网页授权的页面
- [网页] - Google官方chrome插件入门教程