浏览器用户脚本—打造自己的专属页面

什么是用户脚本

一段用户脚本就是一个程序,通常用JavaScript语言来写,用于修改web页面以提升浏览体验。通常通过浏览器的用户脚本管理插件来开启,例如TampermonkeyGreasemonkey等。

如何运行一个浏览器脚本

安装用户脚本管理器

首先需要安装一个脚本管理器插件,Tampermonkey支持ChromeFirefoxSafariMicrosoft Edge等主流浏览器,可以在https://tampermonkey.net/ 中选择自己的浏览器进行安装。

Chrome可以打开链接https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo 进行安装。

Tampermonkey

安装用户脚本

在安装好脚本管理器之后,用浏览器打开以.user.js结尾的链接,会自动跳转到安装界面,点击安装即可。

可以到GreasyFork等脚本共享网站上查找喜欢的脚本进行安装,但要小心识别别人写的脚本是否有恶意代码

我写了一个简单的示例脚本,用于在www.qq.com 页面的logo处增加小企鹅的图标,可以直接点击https://greasyfork.org/scripts/373384-addpenguin/code/AddPenguin.user.js 尝试安装过程。

add penguin user script

运行用户脚本

安装之后打开或刷新http://www.qq.com 页面就能看到页面已经改变!

www.qq.com with penguin

编写自己的脚本

新建一个脚本

点击Tampermonkey扩展图标,选择添加新脚本,如下图:

新建脚本

默认生成的脚本如下代码所示:

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        http://*/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
})();

头部的注释块是对脚本的一些注解,各个注释的含义如下:

名称

说明

name

脚本名称

namespace

命名空间,用于解决不同脚本的命名冲突

version

版本号,可用于检测脚本升级

description

脚本介绍说明

author

作者

match

匹配的页面URL,即脚本可以生效运行的页面地址

grant

脚本需要获得的权限,如unsafeWindow

修改页面样式

下面以修改百度搜索结果的页面为例,简单写个demo。

百度默认搜索结果页面

如上图,百度默认搜索页面上会有搜索热点的推荐,这很容易将注意力引导过去而忘了真正要搜索的事情,所以就想把右侧边栏给隐藏掉。

首先,要修改脚本头部的match值,以匹配百度搜索页面;然后通过js操作把自定义的样式代码插入到页面head标签内。

// ==UserScript==
// @name         Sample
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       Theocao
// @match        https://www.baidu.com/*
// @grant        none
// ==/UserScript==

(function() {
    'use strict';

    // Your code here...
    var styleDom = document.createElement('style'),
        styleContent = "#content_right{display: none;}";
    styleDom.innerHTML = styleContent;

    var head = document.getElementsByTagName('head');
    head[0].appendChild(styleDom);
})();

Ctrl + S保存脚本,刷新搜索结果页面,可以看到右侧边栏已经隐藏掉了。

隐藏右侧边栏

监听ajax请求

如果只有上面那么多代码会有一个问题,通过点击顶部“百度一下”按钮再次搜索时,右侧边栏又出现了!

这是因为用户脚本默认是在页面完成加载后开始执行的,但是在搜索结果页面再次搜索时,百度是通过ajax请求的方式来获取结果的,而在结果返回后,head标签内的所有style标签会被重置掉。

我们可以在脚本中增加对ajax请求的监控,在监测到有搜索的ajax请求后,再次把样式代码增加到head标签内即可。主体代码如下:

(function() {
    'use strict';

    // Your code here...
    var styleDom = document.createElement('style'),
        styleContent = "#content_right{display: none;}";
    styleDom.innerHTML = styleContent;

    var head = document.getElementsByTagName('head');
    head[0].appendChild(styleDom);

    const send = XMLHttpRequest.prototype.send;
    XMLHttpRequest.prototype.send = function(){
        this.addEventListener('load', function(){
            // 在此处添加ajax请求成功后的处理,
            // this.responseURL为请求的链接,
            // this.responseText为请求的响应内容
            if (this.responseURL.indexOf('https://www.baidu.com/s?') === 0) {
                head[0].appendChild(styleDom);
            }
        });
        return send.apply(this, arguments);
    };
})();

引用外部资源类库

如果本来页面上没有引用jQuery类库,而自己又习惯了使用jQuery,那么可以在头部的注解块中通过@require来引入,然后脚本里就可以使用熟悉的jQuery啦。

@require https://cdn.bootcss.com/jquery/1.10.1/jquery.min.js

JS可以做到的事情

几乎全部JS可以做到的,在脚本里都可以实现,比如我们可以在百度一下的按钮旁加一个“谷歌一下"的按钮,来使用谷歌搜索当前的关键词并在新页面打开。

在主体代码中增加以下代码就可以了!

var googleBtn = $('<input type="button" id="gg" value="谷歌一下" class="btn s_btn" style="background: green;">');
googleBtn.on('click',function(){
    window.open('https://www.google.com/search?q=' + $('#kw').val());
});
googleBtn.insertAfter($('#su'));
google with baidu

如何分享自己的脚本

首先要把你的脚本保存到本地,并以*.user.js命名

  1. 你可以直接把你的脚本文件发送给需要的人,别人直接拖拽到浏览器进行安装
  2. 如果是可以公开的通用脚本,可以上传到脚本共享网站,然后把链接发送给需要的人
  3. 如果是不可以公开共享的脚本,可以上传到内部任何可以通过http访问的服务上,如自己的http服务器或者公司的git仓库(注意设置仓库权限以让别人可以访问),比如这个sample脚本可以在https://qcloud.coding.net/u/greatcl/p/WebDemo/git/raw/master/Sample.user.js 这里进行安装体验(前提要先安装脚本管理器)。

So easy, 所以动起手来打造自己的专属页面吧,O(∩_∩)O哈哈~

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Golang语言社区

Go语言如何并发超时处理详解

大家都知道golang并没有在语言层次上提供超时操作,但可以通过一些小技巧实现超时。下面来一起看看吧,有需要的朋友们可以参考借鉴。 实现原理: 并发一个函数,等...

37560
来自专栏云计算教程系列

如何在Ubuntu 14.04上使用OpenLiteSpeed安装WordPress

WordPress是目前世界上最受欢迎的内容管理系统(CMS)。它允许您在数据库后端轻松设置博客和网站,使用PHP执行脚本和处理动态内容。WordPress有一...

9200
来自专栏青玉伏案

iOS逆向工程之Theos

如果你对iOS逆向工程有所了解,那么你对Tweak并不陌生。那么由Tweak我们又会引出Theos, 那么什么是Theos呢,简单一句话,Theos是一个越狱开...

37090
来自专栏kalifaの日々

window下用pin安装flask步骤及import flask报错的解决方案

安装过程: 1.下载get-pip.py,下载路径并不重要 不用放到Python安装目录里。 2.打开下载路径 python get-pip.py 运行这个py...

40070
来自专栏图像识别与深度学习

2018-03-24python3.6.2 Tensorflow环境配置(win10 64位)

18270
来自专栏极乐技术社区

微信小程序开发心得第二章:千里传音(模板消息)

今天分享一篇关于消息模板的简易教程。 老规矩先把官方的定义再讲一下,消息模板是基于微信的通知渠道,为我们开发者提供了触发模板消息的能力,以便实现服务的闭环和更好...

291110
来自专栏魏琼东

基于DotNet构件技术的企业级敏捷软件开发平台 - AgileEAS.NET平台开发指南 - 系统管理使用教程

前言          所谓AgileEAS.NET平台系统管理即指AgiLeEAS.NET平台中用于完成插件的发现、安装、配置及组织管理功能的一组具体应用,以...

20860
来自专栏知晓程序

开发 | 拒绝打开就授权!小程序如何用新能力获取用户资料?

简单来说,这次能力更新,为 button 组件的 open-type 属性赋予了新的有效值 getUserInfo(声明需要获取用户信息)。

34130
来自专栏云加头条

腾讯云存储最佳实践系列一:使用对象存储COS托管静态网站

在此实践中,用户可以在腾讯云对象存储(以下简称 COS)上托管静态网站,访客可以通过自定义域名(例如 www.example.com )访问托管的静态网站。无论...

92300
来自专栏Linyb极客之路

网络编程之抓包工具Fiddler入门

1)要使用Fiddler进行抓包,首先需要确保Capture Traffic是开启的(安装后是默认开启的),勾选File->Capture Traffic,也可...

23830

扫码关注云+社区

领取腾讯云代金券