// ==UserScript==
// @name         ViSearch/Google of Google
// @name:zh-CN    ViSearch/Google of Google
// @name:zh-TW    ViSearch/Google of Google
// @name:fr    ViSearch/Google of Google
// @name:es    ViSearch/Google of Google
// @name:th    ViSearch/Google of Google
// @namespace    https://github.com/new4u
// @version      7.117.2
// @description  Now on Chrome extensions!!! **https://chrome.google.com/webstore/search/visearch** ! Beyond the ChatGPT/AI with eyes.ViSearch as the Free/Lightweight alternatives to ChatGPT,has the potential to be even more intuitive than ChatGPT in the future.
// @description:zh-cn  Beyond the ChatGPT/AI with eyes Now:ViSearch on Chrome extensions https://chrome.google.com/webstore/search/visearch
// @description:zh-tw  Beyond the ChatGPT/AI with eyes Now:ViSearch on Chrome extensions https://chrome.google.com/webstore/search/visearch
// @description:fr  Beyond the ChatGPT/AI with eyes Now:ViSearch on Chrome extensions https://chrome.google.com/webstore/search/visearch
// @description:es  Beyond the ChatGPT/AI with eyes Now:ViSearch on Chrome extensions https://chrome.google.com/webstore/search/visearch
// @description:th  Beyond the ChatGPT/AI with eyes Now:ViSearch on Chrome extensions https://chrome.google.com/webstore/search/visearch
// @author       new4u本爷有空
// @connect    google.com
// @connect    google.com.hk
// @connect    google.com.jp
// @include    *://encrypted.google.*/search*
// @include    *://*.google*/search*
// @include    *://*.google*/webhp*
// @match        *www.google.com*
// @icon        https://upload.wikimedia.org/wikipedia/commons/thumb/3/36/WikiProject_Sociology_Babel_%28Deus_WikiProjects%29.png/240px-WikiProject_Sociology_Babel_%28Deus_WikiProjects%29.png
// @require     https://unpkg.com/[email protected]/build/d3.min.js
// @require     https://cdnjs.cloudflare.com/ajax/libs/d3-tip/0.9.1/d3-tip.min.js
// @require     http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js
// @require     http://cdn.bootcss.com/bootstrap/3.3.4/js/bootstrap.min.js
// @resource    http://cdn.bootcss.com/bootstrap/3.3.4/css/bootstrap.min.css
// @grant        none
// @copyright    2015-2023, new4u
// @license      GPL-3.0-only
// @icon         data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw
// @note         2023-05-25-v.7.117 发布到了chrome应用商店,并且修复了一个关键词和chrome界面语种的冲突,支持多语种.
// @note         2023-2-21-v1.117 发布迁移到userscript以来第一个正式版本
// @note         2016 Java -> 2019 Node.js -> 2023-2-09 各种各样的历史更新记录，从一个版本迭代到另一个版本
// @grant        none
// ==/UserScript==
let styleSheet = `
body {
padding: 30px 40px;
font-family: OpenSans-Light, PingFang SC, Hiragino Sans GB, Microsoft Yahei, Microsoft Jhenghei, sans-serif;
}
.links line {
stroke: rgb(255, 255, 255);
stroke-opacity: 0.5;
}
.links line.inactive {
stroke-opacity: 0;
}
.nodes circle {
stroke: #fff;
stroke-width: 1.5px;
}
.nodes circle:hover {
cursor: pointer;
}
.nodes circle.inactive {
display: none !important;
}
@media screen and (max-width: 600px) {
.text {
font-size: 8px; /* 当屏幕宽度小于600px时 最小字体为8px */
}
}
.texts text {
font-size: 12px; /* 最小字体为12px */
min-font-size: 8px; /* 最小字体不能小于8px */
max-font-size: 36px;
font-weight:bold;
font-family:"Microsoft YaHei";
text-shadow: 0 0 3px #fff, 0 0 10px #fff;
}
.texts text:hover {
cursor: pointer;
}
.texts text.inactive {
display: none !important;
}
#mode {
position: absolute;
top: 160px;
left: 60px;
}
#mode span {
display: inline-block;
border: 1px solid #fff;
color: #fff;
padding: 6px 10px;
border-radius: 4px;
font-size: 14px;
transition: color, background-color .3s;
-o-transition: color, background-color .3s;
-ms-transition: color, background-color .3s;
-moz-transition: color, background-color .3s;
-webkit-transition: color, background-color .3s;
}
#info {
position: absolute;
bottom: 40px;
right: 30px;
text-align: right;
width: 270px;
}
#info h4 {
color: #fff;
}
#info p {
color: #fff;
font-size: 12px;
margin-bottom: 5px;
}
#info p span {
color: #888;
margin-right: 10px;
}
#svg g.row:hover {
stroke-width: 1px;
stroke: #fff;
}
`;
let s = document.createElement('style');
s.type = "text/css";
s.innerHTML = styleSheet;
(document.head || document.documentElement).appendChild(s);
const colors = ["#6ca46c", "#4e88af", "#c72eca", "#d2907c"];
//临时半径R大小控制,之后改成连接数量影响大小
const sizes = [30, 20, 20, 0.5];
const forceRate = -1000;
// 选择 input 元素中 class 为 gLFyf 的最后一个元素
const input = document.querySelector("input.gLFyf:last-of-type");
let searchtext = input ? input.value : "";
if (searchtext === "") {
console.log("searchtext is empty");
} else {
console.log("searchtext:", searchtext);
// 执行其他逻辑
}
function parseWebPage(Searchtext) {
//data
//***开始解析网页
/* 谷歌获取 */
//成功在page之外获取到页面元素内容，发现百度的下一页，就是
let elements = Array.from(document.querySelectorAll(".g"));
// console.log(elements);
//读取数组里内容map为value
let dataPage = elements.map((element) => {
// console.log(element);
//搜索到文章的标题
let title = element.querySelector(".LC20lb");
title !== null ? (title = title.innerText) : (title = null);
// console.log(title);
//搜索到文章的url
let url = element.querySelector("a");
url !== null ? (url = url.href) : (url = null);
// console.log(url);
//搜索到的文章的来源网站r.split(" - ")[1]
let siteName = title;
siteName !== null
? (siteName = siteName.split(" - ")[1])
: (siteName = null);
// console.log(siteName);
//搜索到的文章的发布日期
// let time = element.querySelector(".c-abstract>.newTimeFactor_before_abs"); //之前的query
let time = element.querySelector(".MUxGbd.wuQ4Ob.WZ8Tjf > span");
time !== null ? (time = time.innerText) : (time = null); //google几天前时间可以计算一下
// console.log(time);
//搜索到的文章的摘要
let abstract = element.querySelector(
".VwiC3b.yXK7lf.MUxGbd.yDYNvb.lyLwlc.lEBKkf span:nth-child(2)"
);
abstract !== null ? (abstract = abstract.innerText) : (abstract = null);
//搜索到关键词如果2023年05月25日更新到多语种
let keyWords = Array.from(element.querySelectorAll("em"));
keyWords !== null
? (keyWords = keyWords.map((item) => {
return item.innerText;
}))
: (keyWords = null);
// console.log(keyWords);
let elementEach = {
title,
url,
siteName,
time,
abstract,
keyWords,
};
// console.log(elementEach);
return elementEach;
});
console.log(dataPage);
let keyWords = [];
for (let i in dataPage) {
let temp = dataPage[i].keyWords;
keyWords = keyWords.concat(temp);
}
let keyWordsSet = Array.from(new Set(keyWords));
let nodes = [];
let links = [];
let id = 0;
let sanidstart = id;
let sanNode = [];
for (let j = 0; j < dataPage.length; j++) {
sanNode.push({
category: 4,
id: "san" + j,
name: dataPage[j].title,
value: dataPage[j].abstract,
origin: dataPage[j].siteName,
time: dataPage[j].time,
year:
dataPage[j].time !== null &&
dataPage[j].time.replace(/[^0-9\u4e00-\u9fa5]/gi, "") !== ""
? dataPage[j].time.replace(/[^0-9\u4e00-\u9fa5]/gi, "").substr(0, 4)
: null,
url: dataPage[j].url,
//为了前面能找到,再加一条,也可以用这个循环,就少了一个!,这样资料全一些
keyWords: dataPage[j].keyWords,
type: "san",
});
}
let keyidstart = id;
let keyNode = [];
for (let i = 0; i < keyWordsSet.length; i++) {
if (keyWordsSet[i].length <= 4) {
keyNode.push({
category: 3,
id: "key" + i,
name: keyWordsSet[i],
value: 30000 + i + "",
type: "key",
});
//     !!! link 如果 keyNode.name 在dataPage.keywords li indexof 就连接(先写san)
//    for (k)
for (let j = 0; j < sanNode.length; j++) {
//keywords是数组,不知道行不行,可以
if (sanNode[j].keyWords.indexOf(keyWordsSet[i]) !== -1) {
links.push({
source: "key" + i,
target: "san" + j,
value: 1,
});
}
}
}
}
let tagid = id;
//2,tag,id=20000-29999,tag就是长度大于4的keywordsSet
let tagNode = [];
for (let i = 0; i < keyWordsSet.length; i++) {
if (keyWordsSet[i].length > 4) {
tagNode.push({
category: 2,
id: "tag" + i,
type: "tag",
name: keyWordsSet[i],
value: id,
});
for (let j = 0; j < sanNode.length; j++) {
//keywords是数组,不知道行不行,可以
if (sanNode[j].keyWords.indexOf(keyWordsSet[i]) !== -1) {
links.push({
source: "tag" + i,
target: "san" + j,
value: 1,
});
}
}
for (let j = 0; j < keyNode.length; j++) {
//如果tagNode.name包含了keyNode.name(indexof),就连一条线
if (keyWordsSet[i].indexOf(keyNode[j].name) !== -1) {
links.push({
source: "tag" + i,
target: keyNode[j].id,
value: 1,
});
}
}
}
}
//1,id=10000,不能用10000+"",,只能用i+"".直接"10000"就好了
let newsNode = {
category: 1,
id: "news",
//searchtext在前面定义前面获取
name: searchtext,
value: id,
type: "news",
};
//和key和tag都建立连接
for (let i = 0; i < keyNode.length; i++) {
links.push({
source: "news",
target: keyNode[i].id,
value: 1,
});
}
for (let i = 0; i < tagNode.length; i++) {
links.push({
source: "news",
target: tagNode[i].id,
value: 1,
});
}
//    合并4个[],用concat(),
nodes = nodes
.concat(newsNode)
.concat(tagNode)
.concat(keyNode)
.concat(sanNode);
//data end
return {
nodes,
links,
};
}
function renderD3Graph(nodes, links, graph) {
// 获取 graph 元素的宽度和高度
const width = parseInt(graph.style.width);
const height = parseInt(graph.style.height);
d3.selectAll("graph > *").remove();
// // 创建 D3.js SVG 元素，并设置其大小和位置
const bbox = graph.getBoundingClientRect();
const svg = d3.select(graph).append("svg")
.attr("id","graph-svg")
.attr("width", bbox.width)
.attr("height", bbox.height)
.style("position", "fixed")
.style("top", bbox.y + "px")
.style("left", bbox.x + "px")
.style("z-index", "999");
//   const svg = d3
// .select(graph)
// .append("svg")
// .attr("width", width)
// .attr("height", height)
// .style("position", "fixed")
// .style("top", "0")
// .style("right", "0")
// .style("z-index", "999");
function dragStarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragging(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragEnded(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
const simulation = d3
.forceSimulation(nodes)
.force(
"link",
d3
.forceLink(links)
.id((d) => d.id)
.distance(50)
.strength(1)
.iterations(1)
)
.force("charge", d3.forceManyBody().strength(forceRate))
.force("center", d3.forceCenter(width / 2, height / 2))
.alphaDecay(0.05);
const link = svg
.append("g")
.attr("stroke", "#999")
.attr("stroke-opacity", 0.6)
.selectAll("line")
.data(links)
.enter()
.append("line")
.attr("stroke-width", (d) => Math.sqrt(d.value));
const node = svg
.append("g")
.selectAll("circle")
.data(nodes)
.enter()
.append("circle")
//        试着给每种type加一个class,要放在数据读取之后
.attr("class", function (d) {
// return "nodes";
return "nodes " + d.type;
})
.attr("r", function (d) {
//    make radius of node circle
return sizes[d.category - 1]; // return r;
})
.attr("fill", function (d) {
//    配合现在category从1开始,今后可以重新设计一下category make color of node circle,也可以加到后面,统一修改
// console.log(d.category);
return colors[d.category - 1];
})
.attr("stroke", "none")
.attr("name", function (d) {
//    make text of node
return d.name;
})
.call(
d3
.drag()
.on("start", dragStarted)
.on("drag", dragging)
.on("end", dragEnded)
);
//固定中心文章位置,用class来控制
//固定中心文章位置,fx可以设置哈哈,或者大面积的可以用tick,详见https://stackoverflow.com/questions/10392505/fix-node-position-in-d3-force-directed-layout,实验证明,还可以用type属性来控制fx,fy
svg
.select(".news")
.attr("fx", function (d) {
return (d.fx = width / 2);
})
.attr("fy", function (d) {
return (d.fy = height / 2);
});
//san文章点击, 没有name这个
//存放三度文章size
svg
.selectAll(".san")
.attr("r", function (d) {
let uniqueWords = new Set(d.keyWords);
let radius = uniqueWords.size * 10;
// console.log("radius:", radius);
return radius;
})
.style("fill-opacity", 0.5);
//    显示所有的文本...
const text = svg
.append("g")
.attr("class", "texts")
.selectAll("text")
.data(nodes)
.enter()
.append("text")
.attr("font-size", function (d) {
// return d.size;
let uniqueWords = new Set(d.keyWords);
let radius = uniqueWords.size * 2;
let fontSize = radius * sizes[d.category - 1];
// console.log("d:", d, ";font-size return", fontSize);
return fontSize;
})
.attr("fill", function (d) {
// return "red";
return colors[d.category - 1];
})
.attr("name", function (d) {
return d.time;
})
.text(function (d) {
return d.time ? d.time + d.name : d.name;
})
.attr("text-anchor", "center")
.on("click", function (d) {
if (d.url) {
window.open(d.url, "_blank");
}
})
.call(
d3
.drag()
.on("start", dragStarted)
.on("drag", dragging)
.on("end", dragEnded)
);
//圆增加title...
node.append("title").text(function (d) {
return d.time + d.name;
});
/* //点击任意一个node, 不与之相连的节点和连线都变透明,怎么做
可以在点击node事件处理函数中通过改变对应元素的透明度实现：
获取点击的node的相邻节点
对于不相邻的节点，修改其透明度
对于不相邻的连线，修改其透明度
代码示例： */
var isTransparent = false;
// 为每个node绑定点击事件
node.on("click", function(d) {
// 根据当前状态进行相应的操作
if (!isTransparent) {
link.style("opacity", function(l) {
if (d === l.source || d === l.target) {
return 1;
} else {
return 0.1;
}
});
node.style("opacity", function(n) {
// 只对与点击的圆圈不相关的圆圈透明度进行更改
var linked = false;
link.each(function(l) {
if (d === l.source || d === l.target) {
linked = true;
return;
}
});
if (!linked) {
return 0.1;
} else {
return 1;
}
});
isTransparent = true;
} else {
link.style("opacity", 1);
node.style("opacity", 1);
isTransparent = false;
}
});
simulation.on("tick", () => {
link
.attr("x1", (d) => d.source.x)
.attr("y1", (d) => d.source.y)
.attr("x2", (d) => d.target.x)
.attr("y2", (d) => d.target.y);
node.attr("cx", (d) => d.x).attr("cy", (d) => d.y);
text.attr("transform", function (d) {
// return 'translate(' + d.x + ',' + (d.y + d.size / 2) + ')';
return "translate(" + d.x + "," + (d.y + sizes[d.category - 1] / 2) + ")";
});
});
}
(function () {
let button = document.createElement("button");
button.innerHTML = "ViSearch";
button.style.cssText =
"position: fixed; top: 0; right: 0; z-index: 999; width: 100px; height: 50px; background-color: green; color: white; font-size: 20px;";
// Add button to page
document.body.appendChild(button);
// Create graph element
const graph = document.createElement("div");
graph.style.position = "fixed"
graph.style.top = "50px"
graph.style.right = "0px"
graph.style.width = "500px"
graph.style.height = "500px"
graph.style.background = "#fff"
graph.style.border = "1px solid #ccc"
graph.style.display = "none"
graph.style.opacity = 0.9;
// Add graph to page
document.body.appendChild(graph);
let graphVisible = false;
// Toggle graph on button click
button.addEventListener("click", () => {
if (graphVisible) {
graph.style.display = "none";
graphVisible = false;
} else {
graph.style.display = "block";
graphVisible = true;
data = parseWebPage(searchtext);
console.log("data", data);
nodes = data.nodes;
links = data.links;
//remove the previous canvs
d3.select("#graph-svg").remove();
console.log("#graph-svg", d3.select("#graph-svg"));
renderD3Graph(nodes, links, graph);
}
});
// Hide graph on outside click
document.addEventListener("click", (event) => {
if (
graphVisible &&
event.target !== graph &&
!graph.contains(event.target) &&
event.target !== button
) {
graph.style.display = "none";
graphVisible = false;
}
});
})();