之前发贴《解放双手看帖子》:L站多出的一个按钮,快速升三级!
近期收到用户反馈,部分功能在不同浏览器中出现异常,这可能是由于LinuxDO前端为了适配各类浏览器而采用了不同的样式所致。实际上,该功能只涉及三个关键元素,其中两个元素保持固定不变,因此只需要定位另外一个可变元素即可。本着授人以渔不如自己吃的原则,接下来我将为大家详细讲解如何找到这个关键元素。也有佬友发帖在里面加入了多个元素标签名,大家可以试试好不好用:LINUX DO活跃助手脚本【修复版】 ,如果都不好用又想用一下,或者想自己尝试修改脚本的,可以尝试继续本帖下面教程。
警告:不了解代码的用户不要随便复制别人脚本运行,防止被盗号或者泄露个人隐私。
另外本站还有个帖子分享了青龙的Py脚本,天数上也可以在一定程度上照顾到,若有软路由或者闲置服务器的佬友可以找找,我刚才没找到帖子地址,这里暂时先不贴了
看帖助手的脚本代码去Github复制:LinuxdoAssistant/linuxdo-helper.user.js at main · Yantesoft/LinuxdoAssistant · GitHub
脚本原理:
0.初始化加载,找到页面中的搜索按钮,并在后面插入开始按钮。
1.首先去最新帖子页面,获取帖子,随机看一个
2.找到帖子列表(评论列表)开始滚动
3.滚动到底以后,从帖子列表下方的推荐帖子中选取一个新的帖子,判断未读后循环到步骤2
其中步骤2中有元素在不同浏览器中元素不同,在这里可以查看下面这个工具代码(去油猴新建脚本,或者在控制台直接运行)帮助快速定位元素:
// ==UserScript==
// @name 滚动框
// @namespace http://tampermonkey.net/
// @version 1.0
// @description 查找页面中可以滚动的元素
// @author Your name
// @match *://*/*
// @grant none
// ==/UserScript==
(function() {
'use strict';
// 创建控制面板样式
const style = document.createElement('style');
style.textContent = `
.scroll-finder-panel {
position: fixed;
top: 20px;
right: 20px;
background: white;
border: 1px solid #ccc;
padding: 10px;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0,0,0,0.2);
z-index: 9999;
max-height: 80vh;
overflow-y: auto;
}
.scroll-finder-panel button {
margin: 5px;
padding: 5px 10px;
cursor: pointer;
}
.scroll-finder-list {
margin-top: 10px;
}
.scroll-finder-item {
padding: 5px;
margin: 2px 0;
cursor: pointer;
border: 1px solid #eee;
}
.scroll-finder-item:hover {
background: #f0f0f0;
}
.scroll-finder-highlight {
outline: 3px solid red !important;
background-color: rgba(255, 0, 0, 0.1) !important;
}
.scroll-controls {
display: flex;
gap: 5px;
margin-top: 5px;
}
`;
document.head.appendChild(style);
// 创建控制面板
const panel = document.createElement('div');
panel.className = 'scroll-finder-panel';
panel.innerHTML = `
<button id="findScrollable">刷新查找</button>
<button id="clearHighlight">清除高亮</button>
<div class="scroll-finder-list"></div>
`;
document.body.appendChild(panel);
let highlightedElement = null;
const scrollableElements = new Set();
// 判断元素是否可滚动
function isScrollable(element) {
const style = window.getComputedStyle(element);
const overflow = style.overflow + style.overflowY + style.overflowX;
const isScrollable = overflow.includes('scroll') || overflow.includes('auto');
return isScrollable && (
element.scrollHeight > element.clientHeight ||
element.scrollWidth > element.clientWidth
);
}
// 查找所有可滚动元素
function findScrollableElements() {
scrollableElements.clear();
const elements = document.getElementsByTagName('*');
for (const element of elements) {
if (isScrollable(element)) {
scrollableElements.add(element);
}
}
updateScrollableList();
}
// 创建滚动控制按钮
function createScrollControls(element) {
const controls = document.createElement('div');
controls.className = 'scroll-controls';
const buttons = {
'↑': () => element.scrollBy(0, -100),
'↓': () => element.scrollBy(0, 100),
'←': () => element.scrollBy(-100, 0),
'→': () => element.scrollBy(100, 0),
'⇈': () => element.scrollTo(0, 0),
'⇊': () => element.scrollTo(0, element.scrollHeight)
};
Object.entries(buttons).forEach(([label, action]) => {
const button = document.createElement('button');
button.textContent = label;
button.onclick = action;
controls.appendChild(button);
});
return controls;
}
// 更新可滚动元素列表
function updateScrollableList() {
const listContainer = panel.querySelector('.scroll-finder-list');
listContainer.innerHTML = '';
scrollableElements.forEach((element, index) => {
const item = document.createElement('div');
item.className = 'scroll-finder-item';
// 创建元素描述
const description = document.createElement('div');
description.textContent = `${element.tagName.toLowerCase()}` +
(element.id ? ` #${element.id}` : '') +
(element.className ? ` .${element.className.split(' ').join('.')}` : '');
item.appendChild(description);
// 添加滚动控制按钮
item.appendChild(createScrollControls(element));
item.onclick = (e) => {
if (e.target === item || e.target === description) {
highlightElement(element);
}
};
listContainer.appendChild(item);
});
}
// 高亮显示元素
function highlightElement(element) {
if (highlightedElement) {
highlightedElement.classList.remove('scroll-finder-highlight');
}
element.classList.add('scroll-finder-highlight');
highlightedElement = element;
element.scrollIntoView({ behavior: 'smooth', block: 'center' });
}
// 清除高亮
function clearHighlight() {
if (highlightedElement) {
highlightedElement.classList.remove('scroll-finder-highlight');
highlightedElement = null;
}
}
// 绑定事件
document.getElementById('findScrollable').onclick = findScrollableElements;
document.getElementById('clearHighlight').onclick = clearHighlight;
// 初始查找
findScrollableElements();
})();
随意打开一个帖子,然后点击工具中的刷新查找,然后寻找最长的一个元素点一下,如果页面出现了和我一样的红色,表示就是这个元素,复制其名称,填入我在github中的emClass变量中的list中即可。
如果你的代码改完好用,欢迎在评论区贴出你的元素定位内容,后期考虑把更多的元素定位写入代码以适应更多浏览器。