iframe加载完成获取元素_完全使用浏览器扩展完成的爬虫

最新推荐文章于 2024-05-04 09:55:54 发布

黄修源

最新推荐文章于 2024-05-04 09:55:54 发布

阅读量595

点赞数

文章标签： iframe加载完成获取元素

本文链接：https://blog.csdn.net/weixin_32685145/article/details/113080253

版权

本文讲述了在教学过程中遇到的挑战，如何利用Chrome扩展编写一个爬虫，克服同源策略限制，通过iframe加载完成后的元素获取。在过程中遇到了页面加载、异步处理、JavaScript执行与页面加载同步等问题，最终通过异步递归实现了目标。

摘要由CSDN通过智能技术生成

在给一个初学者讲爬虫的时候, 我为其演示了直接使用Chrome Console获取大部分数据, 之后打算顺着这条路走下去, 没想到坑真的是多. 但是话已经说下去了, 因而我必须用Chrome所有内置的功能完成一个爬虫. 遂得此篇.

最初我打算用Sources里的Snippets来做, 写完了才发现刷新了代码就会结束掉, 因此必须得保证代码能够持续进行.

一个很自然的想法就是使用window.open或者iframe, 但是由于索引页和目标页不在同一个子域名下, 因此除非跳转到其子域, 否则无法使用. 但是一旦跳转, 当前索引数据就会消失. 自然的想法是使用LocalStorage, 然而LocalStorage也有同源策略问题.

那么就只好写浏览器扩展了, 浏览器中content-script是注入到页面的, 但是只有一个这个也不行, 注入到页面的时候是在当前域名的空间下的, 因此还需要一个background来储存网页链接和爬取的数据.

所以文件结构为:

.
├── js
│   ├── background.js
│   └── content-script.js
└── manifest.json

但是事情怎么可能这么简单就过了呢? 由于页面加载需要时间, 循着用Python写爬虫的经验, 我随手写了一个

get_elem_by_xpath = (xpath) => {
    

    elems = document.evaluate(xpath, document).iterateNext();
    return elems? elems.textContent ||

关注