前言

本文用chrome浏览器展示，所以先展示如何打开标签页，然后再展示代码小格式，最后成功跑起来
同理其他浏览器都可以

展示

一、找到书签并打开书签

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

二、代码格式

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

三、代码展示

区分使用匿名函数自调用和不使用造成的区别，使用小例子去证明
其实这些是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的优点和缺点

明显的优点是：

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

缺点就是:

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

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

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

找到作者的名称的class 和文章的标题和 url链接的class 提取出来
组成json数据
打印到控制台
为了展示长长的代码，所以我直接用原生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);})()

注意：代码在编写完成后，直接复制粘贴会有很多空格，要去进行压缩，如果不会的，要去百度搜索js在线压缩，压缩完成后复制粘贴，运行才不会出现未知的报错

结果展示：
点击书签后取得了你需要的数据

细心的朋友已经知道了我下一步要讲什么
开发用原生的效率很低，我们该怎么使用像jQuery之类的框架直接去操作DOM？
1.我们可以直接把jQuery的代码复制进去(哈哈)
2.我们可以使用script结点的方式，创建一个script结点就可以了，然后把对应的src赋值上去引用，二话不说，看下面的代码即可

    (function(){var script = document.createElement('script');script.src='http://libs.baidu.com/jquery/1.9.1/jquery.min.js';console.log($('.block-title'));})

成功使用jQuery

好了，书签小插件的介绍已经完毕，书签的功能不仅仅这么少
小到可以打印和底部头部跳来跳去
大到可以浏览器结合C语言，MySQL把数据拿走做分析
当然了一切都在于仅供学习。技术只有不断超越，没有上限

JavaScript用浏览器书签制作插件(爬虫)相关推荐

Java插件自动保存浏览器书签_EverSync插件，浏览器书签同步插件，支持Chrome和Firefox书签同步...
eversync,是一款可以跨平台同步书签.收藏夹,实现FVD快速拨号的浏览器插件,该插件可备份和恢复你的书签收藏夹,并且支持在Firefox和Chrome之间同步,eversync插件可保留你的私人 ...
Java插件自动保存浏览器书签_多浏览器书签同步插件EverSync
有时上网时会遇到浏览器不能正常显示的问题.(比如我的火狐浏览器无法正确显示微信公众号管理后台,在chrome上可以正常显示),所以我的电脑里安装了chrome和firefox两个浏览器.但是时间长了, ...
浏览器书签同步插件EverSync
安装指导:https://jingyan.baidu.com/article/bad08e1ec944dc09c85121c1.html EverSync Sync bookmarks扩展程序:下载地 ...
python 模拟浏览器selenium 微信_Spider-Python爬虫之使用Selenium模拟浏览器行为
分析他的代码比较简单,主要有以下的步骤:使用BeautifulSoup库,打开百度贴吧的首页地址,再解析得到id为new_list标签底下的img标签,最后将img标签的图片保存下来. header ...
【JS】把JavaScript脚本作为书签收藏起来并可单击执行
效果说明从操作上说,是将JavaScript脚本作为书签,想用的时候点一下收藏栏中对应的书签,即可执行脚本: 从作用上说,主要可以对当前页面进行一些脚本上的操作,比如对特定页面DOM进行操作.改变字 ...
Vue3官网-可复用组合式API（十四）实例 property（\$slots，\$attrs）、渲染函数render(虚拟节点VNode，h() 参数，使用JavaScript代替模板功能)，插件
Vue3官网-可复用&组合式API(十四)实例 property($slots,$attrs).渲染函数render(虚拟节点VNode,h() 参数,使用JavaScript代替模板功能), ...
Android接入WebView（四）——浏览器书签与历史记录详细处理
Android接入WebView(一)--基本用法 Android接入WebView(二)--与JavaScript交互 Android接入WebView(三)--浏览器书签与历史记录与二维码分享 A ...
使用OneDNS完美实现Chorme自动同步书签和插件
在CSDN上看到许多同步Chrome书签的方法,有手动导出导入的,有借助第三方插件和软件的,也有修改HOSTS文件的,总之都比较复杂且不太稳定,对需要在公司/家里/出差等频繁跨平台同步的场景下使用很不 ...
Chrome浏览器截屏插件的开发
目录第一章绪论 1 1.1选题背景及意义 1 1.2发展现状研究 2 1.2.1浏览器简介 2 1.2.2 浏览器发展历程 2 1.2.3 浏览器分类 3 1.2.4 chrome浏览器简介 3 ...
使用码云同步谷歌 Chrome 浏览器书签
由于东方的神秘力量,国内正常情况下是连不上 Google 账号的,所以平时使用 Chrome 经常会头疼书签同步问题.由于魔法力量的不稳定,有时候不同步,有时还会同步错乱导致书签丢失. 针对这个问题, ...

JavaScript用浏览器书签制作插件(爬虫)

学习目录

前言

展示