2024年最全JavaScript用浏览器书签制作插件(爬虫)_浏览器的插件怎么写(1)

展示

一、找到书签并打开书签

在这里插入图片描述

在这里插入图片描述![在这里插入图片描述]在这里插入图片描述

二、代码格式

1.要以Javascript:开头,后面再写代码。
2.建议使用匿名函数自调用的方法来调用函数(因为如果作为书签的话,每一次点击都会执行里面的代码,如果页面不刷新的情况下相当于你点多少次执行多少次,那么就相当于每次都定义同一个变量,如果是像const之类的等问题就会遗留),用匿名函数自调用,那就可以完美解决

三、代码展示

  1. 区分使用匿名函数自调用和不使用造成的区别,使用小例子去证明
  2. 其实这些是JavaScript的基本知识,学过JavaScript基础的都应该知道,不过为了文章的完整性,和准确性,还是有必要展示一下,若熟悉的人可以跳过这个板块
1. 不使用匿名函数
 		var a = 10;
        let b = 10;
        const c = 10;
        console.log(a,b,c);

在这里插入图片描述点击书签后结果如下,然后再操作一下在这里插入图片描述

2. 使用匿名函数
    (function(){
        var a = 10;
        let b = 10;
        const c = 10;
        console.log(a,b,c);
    })();

在这里插入图片描述

四、用书签运行js的优点和缺点

明显的优点是:

  1. 能相当于一个小插件一样把JavaScript代码嵌套在一个网页上面了,你要的时候就点击,操作简单快捷。
  2. 能使操作网页上面的DOM结点

缺点就是:

  1. 如果代码写的很长,他用…来隐藏了,如果要查看那就要复制到vscode或文本之类的软件去看,目前作者写的代码都没有说因为长度很长,书签放不下的情况(大家可以放心写),不过如果这种要写大量代码情况何不用写插件的方式去写呢对吧。哈~~
  2. 要格外注意加标点符号,避免出现未知错误我们要去对js代码进行压缩(百度搜索js在线压缩即可)。压缩的时候,会对标点符号有要求,要加标点符号。如果你做的小插件报错的话要从标调符号入手,不一定是你自己写错了

五、小试牛刀(爬虫爬取网页数据)

用书签去实现把CSDN搜索页的文章的作者名称,文章的标题和文章的链接与给取下来打印到控制台(相当于一个小爬虫功能)
https://so.csdn.net/wap?spm=1000.2115.3001.4498&q=JavaScript&t=&u=
注意:js的代码和普通写的没有什么不一样,下面就考你的基本功了。

  1. 找到作者的名称的class 和文章的标题 和 url链接的class 提取出来
  2. 组成json数据
  3. 打印到控制台
    为了展示长长的代码,所以我直接用原生js且复杂的方式来操作dom
   (function(){
        let arr = [];
        let info = {};
        let items = document.getElementsByClassName("so-items-normal");
        for(let i = 0 ; i <items.length;i++){
            let a_href = items[i].childNodes[0].childNodes[2].childNodes[0].href;
            let title_name = items[i].childNodes[0].childNodes[2].childNodes[0].text;
            let author = items[i].childNodes[1].childNodes[0].childNodes[0].childNodes[3].childNodes[0].childNodes[1].childNodes[0].childNodes[0].innerText;
            info = {
                url:a_href,
                title_name,
                author
            };
            let json_info = JSON.stringify(info);
            arr.push(json_info);
            info = {};//清空
        }
        console.log(arr);
    })()

如果你也是看准了Python,想自学Python,在这里为大家准备了丰厚的免费学习大礼包,带大家一起学习,给大家剖析Python兼职、就业行情前景的这些事儿。

一、Python所有方向的学习路线

Python所有方向路线就是把Python常用的技术点做整理,形成各个领域的知识点汇总,它的用处就在于,你可以按照上面的知识点去找对应的学习资源,保证自己学得较为全面。

二、学习软件

工欲善其必先利其器。学习Python常用的开发软件都在这里了,给大家节省了很多时间。

三、全套PDF电子书

书籍的好处就在于权威和体系健全,刚开始学习的时候你可以只看视频或者听某个人讲课,但等你学完之后,你觉得你掌握了,这时候建议还是得去看一下书籍,看权威技术书籍也是每个程序员必经之路。

四、入门学习视频

我们在看视频学习的时候,不能光动眼动脑不动手,比较科学的学习方法是在理解之后运用它们,这时候练手项目就很适合了。

四、实战案例

光学理论是没用的,要学会跟着一起敲,要动手实操,才能将自己的所学运用到实际当中去,这时候可以搞点实战案例来学习。

五、面试资料

我们学习Python必然是为了找到高薪的工作,下面这些面试题是来自阿里、腾讯、字节等一线互联网大厂最新的面试资料,并且有阿里大佬给出了权威的解答,刷完这一套面试资料相信大家都能找到满意的工作。

成为一个Python程序员专家或许需要花费数年时间,但是打下坚实的基础只要几周就可以,如果你按照我提供的学习路线以及资料有意识地去实践,你就有很大可能成功!
最后祝你好运!!!

网上学习资料一大堆,但如果学到的知识不成体系,遇到问题时只是浅尝辄止,不再深入研究,那么很难做到真正的技术提升。

需要这份系统化学习资料的朋友,可以戳这里无偿获取

一个人可以走的很快,但一群人才能走的更远!不论你是正从事IT行业的老鸟或是对IT行业感兴趣的新人,都欢迎加入我们的的圈子(技术交流、学习资源、职场吐槽、大厂内推、面试辅导),让我们一起学习成长!

  • 21
    点赞
  • 27
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值