chrome插件获取window挂载的属性

简介: chrome插件获取window挂载的属性

需求:我们在开发浏览器插件的时候,有一些页面中会变一些变量挂在全局变量中(window.xxx)

举例:window.xxx = [1,2,3,4,5]

这些信息可能是页面渲染的必要数据,

我们之前是通过爬取dom来获取页面的一些信息的,

那现在我们就可以通过它挂载的全局变量,来获取相对应的信息了,

省时省力,效率也有所提高,

当然这是一个比较幸运的情况,如果页面没有把一些数据挂在全局中,

我们也不想通过爬取dom来获取信息,就需要模拟页面中的api请求,

这是比较繁琐的一件事情。

具体的实现:

考虑到Google Reader的网页太复杂,这里就以Google首页来举例了。打开网页后,右键打开审查元素,然后在控制台输入fp,就会看到一个字符串,这就是原始网页的一个全局变量。

现在我要获取它,就可以创建一个script元素,append到head。而这个script元素的执行环境是原始网页的,可以自由使用fp这个变量。

不过fp取出来后也没法直接传递回content script。好在文档里说DOM是共用的,

然后我们就可以把这些变量挂在到document上,以自定义属性的形式存储,之后取出。

setTimeout(function() {

var script = document.createElement('script');
script.type = 'text/javascript';

// 向document.body设置自定义属性

script.innerHTML = "document.body.setAttribute('data-fp', fp);";
document.head.appendChild(script);
document.head.removeChild(script);
 //取出自定义属性
console.log(document.body.getAttribute('data-fp'));

}, 1000);
复制代码
之后,我们就拿到window上挂载的属性拉,就可以在我们的contentScript里面使用了,

问题的延申:为什么不能够在contentScript里面直接使用window的全局变量呢?

我们来看一下chrome的开发文档:

参考文档:chrome文档:http://chrome.cenchy.com/content_scripts.html

解决问题参考文档:https://www.cnblogs.com/parker-yu/p/9046463.html

作者: Bill 本文地址: http://biaoblog.cn/info?id=1624496282521

版权声明: 本文为原创文章,版权归 biaoblog 个人博客 所有,欢迎分享本文,转载请保留出处,谢谢!

相关文章
|
3月前
|
Web App开发 JSON JavaScript
vue学习:chrome 中 vuetools 开发插件 的下载、安装
这篇文章介绍了如何在Chrome浏览器中下载、安装并测试Vue.js开发插件——vue-devtools。
443 0
vue学习:chrome 中 vuetools 开发插件 的下载、安装
|
5月前
|
Web App开发 存储 前端开发
《Chrome谷歌插件Top10》开发最好用的谷歌插件
本文介绍了多个实用的浏览器插件及其安装方法。包括CSDN浏览器助手,提供高效开发工具;FeHelper,前端必备工具,支持格式化、压缩等功能;uBlock Origin,有效屏蔽广告和弹窗;PageLiner,网页标尺工具,便于前端设计;Fatkun,批量下载图片;Smallpdf,文件转换工具;Octotree,GitHub代码树插件;Awesome Screenshot,截图与录屏工具;ColorZilla,颜色拾取器;Dark Reader,暗黑模式阅读插件。安装方式有通过Chrome商店搜索或下载crx插件本地安装。
86 11
|
5月前
|
Web App开发 JSON 前端开发
30个Chrome 灵魂插件!
30个Chrome 灵魂插件!
|
5月前
|
Web App开发 前端开发 JavaScript
手摸手教你,从0到1开发一个Chrome浏览器插件
开发 Chrome 插件既有趣又具成就感。本教程将引导你从零开始,逐步创建一个简单的 Chrome 插件。首先了解 Chrome 插件是可增强浏览器功能的小程序。以一个基础示例开始,你将学习如何设置开发环境,包括安装 Chrome 和准备文本编辑器,并掌握 HTML、CSS 和 JavaScript 的基础知识。接着,我们将构建插件的基本结构,涉及 `manifest.json` 配置文件、`background.js` 后台脚本、`popup.html` 用户界面以及 `style.css` 样式表。
381 8
|
5月前
|
Web App开发
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
221 0
Chrome 护眼模式 - 黑暗模式 - 夜眼(Night Eye) 插件
|
6月前
|
Web App开发 JavaScript 前端开发
Chrome插件实现问题之最新的 Chrome 浏览器架构有什么新的改变吗
Chrome插件实现问题之最新的 Chrome 浏览器架构有什么新的改变吗
|
6月前
|
JavaScript 前端开发 Web App开发
Chrome插件实现问题之单进程浏览器的不稳定主要体现在什么地方
Chrome插件实现问题之单进程浏览器的不稳定主要体现在什么地方
|
5月前
|
Web App开发 前端开发 JavaScript
灵魂拷问-前端到底能做些什么?--chrome插件篇
本文会从浏览器插件应用场景切入,穿插插件基础能力和常见入口的介绍,核心回答如下三个问题:插件可以被使用在哪些场景?不同的使用场景我们的主要代码实现思路是怎样的?我们可以从哪些角度入手自己开发一款可以落地实用的浏览器插件?
|
6月前
|
Web App开发 数据可视化 前端开发
Chrome插件实现问题之content-scripts能访问哪些Chrome API
Chrome插件实现问题之content-scripts能访问哪些Chrome API
|
6月前
|
Web App开发 前端开发 JavaScript
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作
Chrome插件实现问题之用户在浏览器中输入URL后,浏览器进程会进行什么操作