浏览器用户脚本—打造自己的专属页面
原创
什么是用户脚本
一段用户脚本就是一个程序，通常用JavaScript语言来写，用于修改web页面以提升浏览体验。通常通过浏览器的用户脚本管理插件来开启，例如Tampermonkey、Greasemonkey等。
如何运行一个浏览器脚本
安装用户脚本管理器
首先需要安装一个脚本管理器插件，Tampermonkey支持Chrome、Firefox、Safari、Microsoft Edge等主流浏览器，可以在https://tampermonkey.net/ 中选择自己的浏览器进行安装。
如Chrome可以打开链接https://chrome.google.com/webstore/detail/tampermonkey/dhdgffkkebhmkfjojejmpbldmpobfkfo 进行安装。
安装用户脚本
在安装好脚本管理器之后，用浏览器打开以.user.js结尾的链接，会自动跳转到安装界面，点击安装即可。
可以到GreasyFork等脚本共享网站上查找喜欢的脚本进行安装，但要小心识别别人写的脚本是否有恶意代码。
我写了一个简单的示例脚本，用于在www.qq.com 页面的logo处增加小企鹅的图标，可以直接点击https://greasyfork.org/scripts/373384-addpenguin/code/AddPenguin.user.js 尝试安装过程。
运行用户脚本
安装之后打开或刷新http://www.qq.com 页面就能看到页面已经改变！
编写自己的脚本
新建一个脚本
点击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 | 脚本需要获得的权限，如 |
修改页面样式
下面以修改百度搜索结果的页面为例，简单写个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.jsJS可以做到的事情
几乎全部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'));
如何分享自己的脚本
首先要把你的脚本保存到本地，并以*.user.js命名
- 你可以直接把你的脚本文件发送给需要的人，别人直接拖拽到浏览器进行安装
- 如果是可以公开的通用脚本，可以上传到脚本共享网站，然后把链接发送给需要的人
- 如果是不可以公开共享的脚本，可以上传到内部任何可以通过http访问的服务上，如自己的http服务器或者公司的git仓库（注意设置仓库权限以让别人可以访问），比如这个sample脚本可以在https://qcloud.coding.net/u/greatcl/p/WebDemo/git/raw/master/Sample.user.js 这里进行安装体验（前提要先安装脚本管理器）。
So easy, 所以动起手来打造自己的专属页面吧，O(∩_∩)O哈哈~
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。