通过新建浏览器书签的方式给网页注入js代码

最新推荐文章于 2024-05-01 19:01:15 发布

Littlefean

最新推荐文章于 2024-05-01 19:01:15 发布

阅读量2.6k

点赞数 2

分类专栏：前端 js 文章标签： javascript 前端 html5

本文链接：https://blog.csdn.net/weixin_42318668/article/details/122291613

版权

前端同时被 2 个专栏收录

3 篇文章 0 订阅

订阅专栏

1 篇文章 0 订阅

订阅专栏

通过新建浏览器书签的方式给网页注入js代码

用法说明

新建一个书签，书签名字随便起，书签的网页链接不是网页链接，而是一串js语句。

新建图片新建书签在这里插入图片描述
书签的网页是一串你注入的js代码。名称随意。

js语句的格式：

javascript: + 一系列js语句压缩成一行

例如：

// 可以直接写一个调用函数。
javascript:alert("hello!");

 // 可以把你想注入的代码放到一个立即执行函数里，这样你声明的变量不会和网页里的js出现冲突从而代码报错
javascript:(function(){console.log(124);})();

点击标签后就能立刻执行代码语句了。

解除网页禁止复制

网上找的，现在已经忘了是哪里复制来的了，不是我写的，很实用。可以用于复制网页禁止你复制的东西，比如摆渡纹库什么的。
新建好标签之后，只要打开对应的页面，点一下标签，就能复制页面里的内容了。

javascript:!function e(t){function n(){}function o(e){e[i].removeChild(e)}function r(e){return[].slice.call(t.querySelectorAll(e))}function c(t){function n(){s(function(){if(!o)try{var n=t.contentDocument;n.body.childNodes.length&&(o=1,e(n))}catch(e){o=0}},100)}a[l](function(e){t['on'+e]=null});var o;n(),t.onload=n}for(var i='parentNode',l='forEach',a='contextmenu dragstart selectstart select copy beforecopy mouseup mousedown'.split(' '),u=setTimeout(n,0);u>=0;u--)clearTimeout(u);for(u=setInterval(n,1e8);u>=0;u--)clearInterval(u);var s=setTimeout;setTimeout=setInterval=n,r('script')[l](o);var m=[];r('iframe,frame')[l](function(e){m.push(e),e[i].replaceChild(t.createElement('script'),e)});var f=t.documentElement.innerHTML;t.open(),t.write('<!DOCTYPE html>'),t.close(),t.documentElement.innerHTML=f,r('script')[l](function(e){e[i].replaceChild(m.shift(),e)}),r('*')[l](c),c(t),a[l](function(e){t.addEventListener(e,function(e){e.stopPropagation()},!0)});var p=t.createElement('style');p.innerHTML='*{-webkit-user-select:text!important;-moz-user-select:text!important;user-select:text!important;}',t.body.appendChild(p)}(document);

原理大概是复制所有的盒子里的内容，然后再重新生成一个新的页面，相当于把整个页面清洗了一遍。执行脚本后页面就可以复制了。

在这个代码中可以学到一些代码压缩小技巧，比如把 document 等一些内置对象改名，把一些内置函数改名等等。

创作了一些注入代码

让当前页面变成黑底蓝字（纯粹为了酷炫）

javascript:(function ex(d) {let s = d.createElement("style");s.innerText = "*{background-color: black !important;color: #00b5e5 !important;}";d.querySelector("html").appendChild(s);})(document);

让这个页面里的所有盒子都转起来（纯粹恶搞）

javascript:(function ex(d) {let s = d.createElement("style");s.innerText = "@keyframes r {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}*{animation: r infinite 5s linear;}";d.querySelector("html").appendChild(s);})(document);

在网页上添加一个跟随鼠标的水平线，方便阅读的时候用

javascript:(d=>{let body = d.querySelector("body");let zst = d.createElement("style");zst.innerText = `.ZzZ {height: 3px;width: 100%;background-color: red;position: fixed;z-index: 999999;}`;body.appendChild(zst);let z=d.createElement("div");z.classList.add("ZzZ");body.appendChild(z);window.onmousemove=function (e){z.style.top=`${e.clientY+5}px`;}})(document)

给鼠标添加一个小黄球，方便知道鼠标的位置

javascript:(d=>{let b=d.querySelector("body");let s=d.createElement("style");s.innerText=".CcC{width:50px;height:50px;background-color:yellow;opacity:0.35;position:fixed;z-index:999999;}";b.appendChild(s);let c=d.createElement("div");c.classList.add("CcC");b.appendChild(c);window.onmousemove=function(e){c.style.top=`${e.clientY+5}px`;c.style.left=`${e.clientX+5}px`}})(document);