随笔-如何自己写一个谷歌插件，实现抓取html并转发到指定的服务器地址

最新推荐文章于 2023-08-25 11:29:05 发布

汉风唐尚

最新推荐文章于 2023-08-25 11:29:05 发布

阅读量1.1k

点赞数

分类专栏：程序猿副本技能文章标签： html 服务器 python chrome vue

本文链接：https://blog.csdn.net/u013347843/article/details/123394591

版权

程序猿副本技能专栏收录该内容

28 篇文章 0 订阅

订阅专栏

起因：
    需要抓取某一些页面，但是需要登录，各种验证；
思考：
    对于这种不是很常用的页面，但是又有需要的，能否在一遍看的时候一边让爬虫爬取呢？半自动爬虫
经过：
    使用过市面上的各种爬虫：火车头，八爪鱼，，，发现都不是很理想，总是很难绕过验证（验证码，图片验证，滑块验证，选图片验证，机器人验证，划线验证），泪崩了！
在这里插入图片描述
破釜沉舟：
    自己开发一个爬虫，将自己打开的页面进行抓取并发送到我自己的爬虫页面进行解析, 说干就干；

决定自己开发一个浏览器插件

写好的代码库
1.先建立一个空白的项目
2.空白项目中增加浏览器插件的配置文件

{
    "manifest_version": 2,
    "name": "html-scraper",
    "description": "Html页面抓取工具，支持转发完整页面到指定html爬虫解析器",
    "version": "1.0.0",
    "browser_action": {
        "default_icon": "static/icon.png",
        "default_title": "Html爬虫助手",
        // 插件默认的弹出页
        "default_popup": "popup.html"
    },
    "permissions": [
      // 下面是通配符，通配全部网页地址，协议头，域名，路径信息
      "*://*/*",
      // 标识可以操作tab
      "tabs"
    ]
}

3.增加弹出页面的内容 popup.html
在这里插入图片描述
4.发现弹框就是一个普通的html页面，开始思考能否使用html的各种js和小工具

<body>
  <div id="app" class="main">

    <p>{{ message }}</p>

  </div>
  <script>
    var app = new Vue({
      el: '#app',
      data: {
        message: 'Hello Vue! 测试写个插件'
      }
    })
  </script>
</body>

在这里插入图片描述
貌似不行！准备查查原因！

5.查找拓展程序，发现提示有错！
翻译一下发现：Chrome拒绝执行了，需要修改策略哦！要不就是自己下载一个js到本地！
在这里插入图片描述
6.解决JS的加载错误【不要使用网络加载就好了】
vue必须要使用cps版本的，下载地址：https://github.com/vuejs/vue/tree/csp/dist
7.获取页面内容

// 当前片段会将指定 的js插入到指定的页面，很关键
"content_scripts": [
    {
      "js": ["js/base64.js"],
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "run_at": "document_start"
    },
    {
      "js": ["js/content_script.js", "js/jquery-3.1.1.js"],
      "matches": [
        "http://*/*",
        "https://*/*"
      ],
      "run_at": "document_end"
    }
  ]

8.指定脚本中增加监听，监听到了就发送在当前页面获取的内容

chrome.extension.onMessage.addListener(
    function(request, sender, sendMessage) {
        if (request.action == "scraper") {
            // alert(request.url)
            // 此时的页面是点击当时的页面状态，对于异步加载此处最佳
            var html = document.getElementsByTagName("html")[0].outerHTML;
            // 加密成base64的字符串
            // console.info(html);
            $.ajax({
                type: 'POST',
                url: "https://xxxxx/crawlerDefault/process-html",
                dataType: "json",
                headers:{'Content-Type':'application/json;charset=utf8'},
                data: JSON.stringify({
                    url: request.url,
                    html: "<p>xxxxx</p>"
                }),
                success: function(result) {
                    console.info(result.msg);
                }
            });
        } else {
            console.info("没有取得相应的动作信息！不做任何处理！")
        }
    }
);

9.增加页面的右键功能，触发刚才加的时间

// console.info控制台会出现不打印的情况
function htmlScraperClick(info, tab) {

	console.info("item " + info.menuItemId + " was clicked");
	console.info("info: " + JSON.stringify(info));
	console.info("tab: " + JSON.stringify(tab));

	chrome.tabs.getSelected(null, function (tab) {
		// 当前页面的地址栏url
		chrome.tabs.sendMessage(tab.id, {
			action: "scraper",
			url: tab.url
		}, function(response) {
			// console.log(response);　　
		});
	});
}

chrome.contextMenus.create({
	id: 'htmlScraper',
	type: 'normal',
	title: 'Html Test',
	contexts: ['all'],
	onclick: htmlScraperClick
}, function () {
	console.log('contextMenus are create.');
});

结束：说多了都是泪，中间遇到各种问题
在这里插入图片描述
成功的接收到了数据，剩下的就是按照自己的业务进行各种业务功能的开发了

参考资料：
Chrome插件开发入门
 插件开发官方资料

汉风唐尚

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
2
评论
随笔-如何自己写一个谷歌插件，实现抓取html并转发到指定的服务器地址

起因：    需要抓取某一些页面，但是需要登录，各种验证；思考：    对于这种不是很常用的页面，但是又有需要的，能否在一遍看的时候一边让爬虫爬取呢？半自动爬虫经过：    使用过市面上的各种爬虫：火车头，八爪鱼，，，发现都不是很理想，总是很难绕过验证（验证码，图片验证，滑块验证，选图片验证，机器人验证，划线验证），泪崩了！破釜沉舟：   &n
复制链接

扫一扫