V 站有 chrome 插件,可以预览帖子,2 站没找到,自己用 AI 写了一个,不是程序员,大佬们轻喷

13 条回复
125 次浏览

创建文件夹:2libra-previewer
新建三个文件:
1、content.js

复制
function injectButtons() {
    const links = document.querySelectorAll('a.title-link');

    links.forEach(link => {
        if (link.dataset.previewInjected) return;
        link.dataset.previewInjected = "true";

        // 创建按钮
        const btn = document.createElement('span');
        btn.innerText = '预览';
        btn.className = 'libra-preview-btn';
        
        // 点击逻辑
        btn.onclick = (e) => {
            e.preventDefault();
            e.stopPropagation(); // 阻止触发 a 标签的跳转
            openPreview(link.href);
        };

        // 关键改动:插在 a 标签内部的末尾,这样它永远跟着文字跑
        link.appendChild(btn);
    });
}

// --- 基础逻辑保持不变 ---
const overlay = document.createElement('div');
overlay.id = 'libra-preview-overlay';
document.body.appendChild(overlay);

const modal = document.createElement('div');
modal.id = 'libra-preview-modal';
modal.innerHTML = `
    <div class="libra-modal-header">
        <span class="libra-modal-title">快速预览</span>
        <span class="libra-close-btn">关闭 (Esc)</span>
    </div>
    <iframe id="libra-preview-iframe"></iframe>
`;
document.body.appendChild(modal);

const iframe = document.getElementById('libra-preview-iframe');

function openPreview(url) {
    iframe.src = url;
    overlay.style.display = 'block';
    modal.style.display = 'flex';
    document.body.style.overflow = 'hidden';
}

function closePreview() {
    overlay.style.display = 'none';
    modal.style.display = 'none';
    iframe.src = '';
    document.body.style.overflow = '';
}

overlay.addEventListener('click', closePreview);
document.querySelector('.libra-close-btn').addEventListener('click', closePreview);
document.addEventListener('keydown', (e) => { if (e.key === 'Escape') closePreview(); });

const observer = new MutationObserver(injectButtons);
observer.observe(document.body, { childList: true, subtree: true });
injectButtons();

2、manifest.json

复制
{
  "manifest_version": 3,
  "name": "2libra 预览助手",
  "version": "1.1",
  "description": "点击标题旁边的预览按钮,直接弹窗查看帖子内容",
  "permissions": ["storage"],
  "content_scripts": [
    {
      "matches": ["*://*.2libra.com/*"],
      "js": ["content.js"],
      "css": ["style.css"]
    }
  ]
}

3、style.css

复制
/* 预览按钮:极简、彩色、紧凑 */
.libra-preview-btn {
    display: inline-block !important; /* 强制行内 */
    width: max-content !important; /* 宽度严格由文字决定 */
    height: auto !important;
    padding: 1px 4px !important; /* 极小内边距,紧紧包裹 */
    margin-left: 3px !important; /* 与标题相隔 3 像素 */
    
    font-size: 11px !important;
    font-weight: bold;
    line-height: 1.2 !important;
    cursor: pointer;
    
    /* 渐变彩色背景 */
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white !important;
    
    border-radius: 3px;
    border: none;
    white-space: nowrap;
    vertical-align: baseline; /* 保持与标题文字对齐 */
    box-shadow: 0 1px 3px rgba(110, 142, 251, 0.3);
}

.libra-preview-btn:hover {
    filter: brightness(1.1);
    box-shadow: 0 2px 5px rgba(110, 142, 251, 0.5);
}

/* 遮罩层 */
#libra-preview-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 999998;
}

/* 弹窗容器 */
#libra-preview-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85vw;
    height: 85vh;
    background: #fff;
    z-index: 999999;
    flex-direction: column;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
}

.libra-modal-header {
    padding: 10px 20px;
    background: #fdfdfd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.libra-modal-title { font-weight: bold; color: #555; font-size: 13px; }

.libra-close-btn {
    cursor: pointer;
    font-size: 12px;
    color: #999;
    padding: 2px 8px;
    border: 1px solid #eee;
    border-radius: 4px;
}

#libra-preview-iframe { flex: 1; width: 100%; border: none; }

在 chrome 浏览器拓展程序管理,加载为打包的拓展程序就可以了。效果如下图:
没找到好用的图床,这俩链接可以看我截的图:
https://ibb.co/LdCBSwNW
https://ibb.co/93vmw8V9
第一次发帖,本身是产品,从 V 站知道了 2 站,过来看了一下,感觉不错,所以用 AI 做了一个预览的插件,各位大佬们轻喷啊。
如果 chrome 拓展程序有类似的,请告知我吧 😂

大平衡者
Admin

看了下图片,挺不错。预览按钮在鼠标移动过去再显示更好

2Libra 赞助者
OP

AI 太方便了,告诉他怎么做,分分钟搞定,哈哈哈。
代码如下,鼠标移动到帖子区域才显示预览按钮了。

复制
/* 预览按钮:极简、彩色、紧凑 */
.libra-preview-btn {
    display: inline-block !important;
    width: max-content !important;
    height: auto !important;
    padding: 1px 4px !important;
    margin-left: 3px !important;
    
    font-size: 11px !important;
    font-weight: bold;
    line-height: 1.2 !important;
    cursor: pointer;
    
    /* 渐变彩色背景 */
    background: linear-gradient(135deg, #6e8efb, #a777e3);
    color: white !important;
    
    border-radius: 3px;
    border: none;
    white-space: nowrap;
    vertical-align: baseline;
    box-shadow: 0 1px 3px rgba(110, 142, 251, 0.3);

    /* --- 新增:默认隐藏并增加平滑过渡 --- */
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
    pointer-events: none; /* 隐藏时不可点击,防止误触 */
}

/* --- 新增:当鼠标移动到包含标题的容器时,显示按钮 --- */
/* 这里假设 2libra 的帖子容器包含 title-link,我们通过父级状态控制子级 */
div:hover > a.title-link .libra-preview-btn,
a.title-link:hover .libra-preview-btn {
    opacity: 1;
    pointer-events: auto;
}

/* 遮罩层 */
#libra-preview-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    z-index: 999998;
}

/* 弹窗容器 */
#libra-preview-modal {
    display: none;
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 85vw;
    height: 85vh;
    background: #fff;
    z-index: 999999;
    flex-direction: column;
    border-radius: 12px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.3);
    overflow: hidden;
}

.libra-modal-header {
    padding: 10px 20px;
    background: #fdfdfd;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #eee;
}

.libra-modal-title { font-weight: bold; color: #555; font-size: 13px; }

.libra-close-btn {
    cursor: pointer;
    font-size: 12px;
    color: #999;
    padding: 2px 8px;
    border: 1px solid #eee;
    border-radius: 4px;
}

#libra-preview-iframe { flex: 1; width: 100%; border: none; }
2Libra 赞助者
OP

给大家一个网盘下载链接吧: https://pan.quark.cn/s/de095fc8a5d6
不过我不会再更新了,本身就是自用的,我觉得预览已经足够使用了,实在是不想打开 N 多标签页,哈哈哈
大家想要什么功能,可以下载代码,扔给 AI,修改也很简单的,我用的 Gemini

2Libra 赞助者
OP

哈哈,一样一样,每天来公司就是打开 AI,告诉 AI 需求,让 AI 润色产品文档。facepalm

2Libra 赞助者
OP

是的,刚开始注册用的谷歌账号登录的,老外嘛,名字都是反的,就改了,顺便赞助了一波 2 站,哈哈哈。

马上来

难怪,我说从帖子内外去点 OP 主页介绍,发现一个正常,一个 404,排查发现是昵称变了,差点准备给 jimmy 提 bug 了 😄

发表一个评论

R保持