利用书签执行js脚本

TRIS
6,902 阅读3分钟

大家对浏览器的书签并不陌生，用文件夹去规范地处理书签，有利于我们快速地找到需要的东西。例如打开一个chrome的拓展程序页面，一些人会这么干：【右上角一排竖点】->【更多工具】->【扩展程序】，这种操作步骤既费时又麻烦。如果你将扩展程序的页面存为书签，放到你喜欢的位置，那下次你直接点击这个书签就行了。

这当然不足为奇。但实际上，书签还有进一步的利用，尤其是对开发者而言，这个用法作用更大。这便是：

可以把我们写的js代码，保存作为一个书签。当点击这个书签的时候，将在当前页面运行这段js代码。

js在书签中的写法模板一般可以直接这样写：

javascript: (function() {
    //你的执行逻辑
})()

接下来，让我们执行一段最简单的js代码试试。

点击【右上角一排竖点】->【书签】->【书签管理器】->【右上角一排竖点】->【添加新书签】，将打开下面这个弹框：

image-20200708134538343

我们将名称命名为测试书签，网址填入下面这段，也就是我们要执行的js代码：

javascript: alert('1');

保存书签。接下来随便到一个网页（例如百度首页），点击该书签便会执行js的逻辑。效果如下：

既然发现了书签可以执行js脚本这个功能，那我们可以做些什么呢？

举栗：

  • 查看布局

假设我们在开发过程中想大概地看一下全局界面元素布局，像这样：

js代码如下：

javascript: (function() {
    let color = () => Math.floor(Math.random()*255); 
    let list = document.body.getElementsByTagName('*'); 
    for (let item of list) { 
        let rgb='rgb('+color()+','+color()+','+color()+')'; 
        let { style } = item;
        style.outline = style.outline
            ?  ''
        : '1px solid ' + rgb; 
    };
})()
  • 编辑页面

js脚本如下：

javascript: (function() {
    document.designMode = document.designMode === 'on' ? 'off': 'on'
})()

当然，也可以利用书签做一些有趣的事情。例如：

  • 旋转页面

    当你点击后，页面会旋转180°，再次点击时复原：

js代码如下：

javascript: (function() {
    if (typeof rotateNum === 'undefined') {
        rotateNum = 180;
    } else {
        rotateNum = rotateNum ? 0: 180;
    }
    document.body.style.cssText +="transition: all 1s; transform: rotate(" + rotateNum + "deg);";
})()

另外，书签脚本也可以应用于我们平时操作的东西：

  • 下载百度文库

    点击将跳转到文库下载页面：

    js代码如下：

    javascript: (function() {
    window.open(window.location.href.replace("baidu", "baiduvvv"));
})()

  • 百度网盘视频变速

    平时找到百度网盘资源，人穷买不起会员，又嫌弃一倍速，怎么办？可以借助书签实现任意倍数播放：

js脚本如下：

javascript: (function() {
    var number = prompt("请输入百度云盘播放倍数"); 
    if (!isNaN(+number)) {
        videojs.getPlayers("video-player").html5player.tech_.setPlaybackRate(number);
    } else {      
        alert('输入非数字！')
    }
})()

  • 在线视频下载

    此书签可以直接下载在线视频，主要是利用了硕鼠的解析支持，不过目前已经停止了对腾讯视频的解析支持，可能作用有限。

    js代码：

    javascript: (function() {
	window.open("http://www.flvcd.com/parse.php?format=&kw="+encodeURI(window.location.href)+"&sbt=%BF%AA%CA%BCGO%21");
})()
avatar
文章
阅读
粉丝