Burning Vocabulary油猴简易版

日常习惯用Kiwi Browser 101.0.4951.57 + Bypass Paywalls 愉快的学习经济学人，后来无意中看到英语学习神器Burning Vocabulary，尝试在Kiwi上安装Burning Vocabulary，但适配不佳（双击单词的时候总是有偏差）。狐猴浏览器和Burning Vocabulary适配的挺好，但是狐猴浏览器上安装Bypass Paywalls失败。

经过权宜，觉得Kiwi Browser 101.0.4951.57 + Bypass Paywalls的方法更优，因此我写了这个油猴脚本替代Burning Vocabulary，简易版，只能标注没有翻译，毕竟手动选中用谷歌翻译也挺方便。

安装这个脚本后，打开经济学人网站，屏幕底部出现两个按钮"标注"”取消“。选中单词，点击”标注“，该单词在经济学人网站所有出现的地方都会标红；点击”取消“，该单词的颜色就会变成黑色。

以下是效果图：

 以下是代码：

// ==UserScript==
// @name         Burning Vocabulary类似版
// @namespace    http://tampermonkey.net/
// @version      1.2
// @description  仿真Burning Vocabulary，没有翻译功能，仅限于在经济学人网站上对单词进行标注
// @author       TCH
// @match        *://www.economist.com
// @include      *://*economist.com/*
// @grant        GM_setValue
// @grant        GM_deleteValue
// @grant        GM_listValues
// @license      tangchuanhui
// ==/UserScript==

(function() {

	function makecolor(searchVal, nColor) {
		var oDiv = document.getElementsByTagName("body")[0];
		var sText = oDiv.innerHTML;
		searchVal = " " + searchVal;
		var sKey = "<span name='addSpan' style='color:" + nColor + "';>" + searchVal + "</span>";
		var num = -1;
		var rStr = new RegExp(searchVal, "g");
		var rHtml = new RegExp("\<.*?\>", "ig"); //匹配html元素
		var aHtml = sText.match(rHtml); //存放html元素的数组
		sText = sText.replace(rHtml, '{~}'); //替换html标签
		sText = sText.replace(rStr, sKey); //替换key
		sText = sText.replace(/{~}/g, function() { //恢复html标签
			num++;
			return aHtml[num];
		});
		oDiv.innerHTML = sText;
	}

	let list_value = GM_listValues();
	for (var i = 0; i < list_value.length; i++) {
		makecolor(list_value[i], "red");
	}


	var selectionFirst = null;
	var selectionSecond = null;
	document.addEventListener("selectionchange", () => {
		selectionFirst = selectionSecond;
		selectionSecond = document.getSelection()
			.toString();

	});


	let div = document.createElement("div");
	div.style = "position:fixed; bottom:20px; left: 0; margin: auto; right: 0;text-align:center;"
	div.innerHTML = '<span id="biaozhubiaozhu"style="width:150rpx;margin:15px;background-color: red;font-size: 30px;border-color: red;border-radius: 5px;" >标注</span><span id="quxiaobiaozhu" style="width:150rpx;margin:15px;background-color: black;font-size: 30px;color: white;border-radius: 5px;">取消</span>';
	document.onclick = function(event) {
		if (event.target.id == "biaozhubiaozhu") {

			selectionFirst = selectionSecond; //在有些浏览器，需要把这句去除
			if (selectionFirst !== null && selectionFirst !== void 0 && selectionFirst.toString()) {

				GM_setValue(selectionFirst, selectionFirst);

				makecolor(selectionFirst, "red");
			}






		} else if (event.target.id == "quxiaobiaozhu") {

			selectionFirst = selectionSecond; //在有些浏览器，需要把这句去除

			if (selectionFirst !== null && selectionFirst !== void 0 && selectionFirst.toString()) {
				GM_deleteValue(selectionFirst)

				makecolor(selectionFirst, "black");
			}
		}
	};
	document.body.append(div);


})();

以下是下载地址：

Burning Vocabulary类似版 (greasyfork.org)