站点正在导入数据，暂时处于只读模式：这段时间里无法登录，也不能发帖或回复。

使用用户脚本，如你所愿改造网页(1)-解决友站敏感词

inferior北大未名
inferior · 

本来想等站长的教你建网站系列讲完以后写的，不过似乎瑶瑶无期。。。作为常年挑剔的网民，站方投喂的页面肯定不会完美。其实略施小计便可改成自己喜欢的样子。Greasemonkey等插件可以在网页加载时运行自定义的javascript，几乎页面上的一切都可以修改。

本来想把教程贴上来，可以省不少事情，不过似乎里面的代码会出发cloudflare的安全警告，懒得处理了。。可以在网上搜深入浅出Greasemonkey（这个非常老了，不过基本的介绍足够一般使用了），编程随想也写过一篇文章：https://program-think.blogspot.com/2011/11/greasemonkey-scripts-for-google-reader.html?q=greasemonkey&scope=article-content 里面提到的google reader已经过世了，默哀。

对于不愿意自己写的，有很多现成的脚本可以极大地提升使用网站的体验。比如https://tiansh.github.io/yawf/ 去掉新浪微博各种讨厌的设定。

其他一些脚本可以去网上搜索，比较知名的站点比如https://greasyfork.org/zh-CN/scripts

不过javascript可以做到事情非常多，安装这些脚本一定要打开查看一下脚本内容，并确保是可靠的来源，否则你输入的每个字，看到的每个页面都可能送到恶意脚本的作者那里。

tor browser如果开了no-script过滤，大部分脚本都不起作用,不过如果使用的是默认设定，或者是在平时的浏览上都可以使用。

安装插件非常容易，任意时间按ctrl+alt+A，在切到的tab右上角的搜索框输入Tampermonkey或者Greasemonkey即可。

安装之后浏览器右上角会出现一只猴子的图标，点击之后会弹出菜单可以进行一些全局的设定，也可以新建自己的脚本。除了直接在这里输入脚本，访问任意以user.js结尾的网站也会提醒安装脚本（这种方式一般是用于从第三方网站，如前文提到的greasyfork安装脚本）。

一个新建的用户脚本大概长这个样子：

// ==UserScript== 
// @name         New Userscript 
// @namespace    http://tampermonkey.net/ 
// @version      0.1 
// @description  try to take over the world! 
// @author       You 
// @match        https://addons.mozilla.org/en-US/firefox/addon/tampermonkey/ 
// @grant        none 

// ==/UserScript== 
 
(function() { 
    "use strict"; 
    // Your code here... 
})();

其中我们需要关注的主要是 @ match 这一项，它后面跟着的字符串是决定了这个脚本可以生效的页面范围，比如*://.pincong.rocks

// ==/UserScript== 之后的部分就是match网址之后要执行的脚本了。这个模板里是一个javascript的闭包，详细的细节暂时不用管，这里只知道里面的代码会执行就可以了。

** 我们这次先从比较简单但又很实用的例子开始。众所周知，友站有一项对用户非常友好的敏感词制度。如果你试图在文中提到某些特定的词，一个丑陋的标记便会出现在这个词上。如何消除它呢？ **

要做的事情其实就只有两件：

1.找到这个（些）元素。

2.操作这个（些）元素。

首先查看是如何实现的。比如这个页面上https://pincong.rocks/question/id-2308__sort_key-agree_count__sort-ASC

我们亲爱的贝臭大宝贝同学在问题下方的讨论就不幸触发了这一机制，一个大大的问号出现在了支那的右上角。右击这个词选择Inspect Element (不同语言可能这里显示不同)，发现只是在这里词前后加了html的mark tag

首先我们要做的是找到这些被标记的元素。在文档中搜索元素有很多方法，比较简单的就是直接调用内置的函数document.getElementsBy..... 可以通过这个元素的各种属性找到它。

对于mark属性，可以用document.getElementsByTagName("mark") 这个函数的返回值是该网页上所有mark tag的集合，我们可以用一个变量保存它，比如叫i 所以第一行就是: i=Array.from(document.getElementsByTagName("mark"));

其中Array.from把找到的元素集合转化为一个数组，方便后续操作

啊一共找到了78个敏感词，实在是太过分了

现在i就是所有的敏感词集合了。然后我们可以调用forEach方法对每个元素的属性进行操作。这次准备用到有这么几种:

innerText,innerHTML这俩是该元素的内容，也就是里面的文字

insertAdjacentElement可以给这个元素后面添加一个元素

我们可以先把这个词原来的元素隐藏，然后再创建一个和原来内容一样但是没有敏感词标记的元素,插入到它后面（当然这是个很笨的办法，这里只为了展示效果）

i.forEach((item)=>{
  let word=item.innerHTML;
  item.hidden=true
  var newitem=document.createElement("span")
  newitem.innerHTML=word
  item.insertAdjacentElement("afterend",newitem)
})

大功告成！敏感词以后再也不能影响我心情了

(施工中，，，)

《不做了，睡大觉！明天再重新来过》

4
暂无评论