nextchat自定义字体脚本

暂时放到人工智能

上github上看了一下,5天前,官方更新了2.4.1版本,支持设置聊天内容字体,因为没有简介易懂的字体,于是创建了这个脚本 可以通过填写字体文件url 设置自定义字体
网站请自行设置为您需要的网站
一共改了大概8次 没改好 目前我用的nextchat拒绝访问了www
大概是因为我在X浏览器里每一次想要使用更新脚本都必须重新进入网页 然后触发风控…
期间还发生过一个事故 匹配的网站自动设定为了openai官网 怎么改都不行 后来发现 X浏览器里,同一个脚本的启动方式是固定的,不能改…(我一直都是直接把原来的代码全选 然后粘贴成更新的代码 )

## 主要功能

### 1. 多字体支持 🖋️
- 在预定义的多个自定义字体间自由切换
- 易于扩展,可添加更多字体选项

### 2. 实时字体切换 🔄
- 简洁的用户界面,位于页面右下角
- 随时切换字体,即时生效

### 3. 全局字体应用 🌐
- 可应用于整个页面或特定元素
- 确保聊天消息、输入框等关键区域统一字体

### 4. 字体加载状态提示 ℹ️
- 显示字体加载进度
- 加载完成或出错时通知用户

### 5. 持久化设置 💾
- 记住用户的字体选择
- 下次访问时自动应用上次的选择

### 6. 动态内容兼容 🔄
- 监听页面变化,确保新内容应用自定义字体
- 适应单页应用(SPA)结构

### 7. 错误处理 🛠️
- 优雅处理字体加载失败情况
- 提供清晰的错误提示

### 8. 性能优化 ⚡
- 智能应用字体样式,减少不必要的处理

## 用户体验优势

- **个性化** 👤:选择喜欢的字体,提升阅读舒适度
- **简单易用** 🙌:通过简单下拉菜单切换字体
- **即时反馈** 📊:实时显示字体加载状态
- **一致性** 🔗:整个聊天界面保持字体一致
- **无缝集成** 🧩:适应网站的动态特性

## 简易使用指南

1. 安装油猴扩展(Tampermonkey)到您的浏览器。
2. 将脚本添加到油猴中。
3. 访问nextchat网站。
4. 在页面右下角找到字体切换器。
5. 从下拉菜单中选择您喜欢的字体。
6. 享受您的个性化聊天体验!

## 注意事项

⚠️ 使用前请确保您有权使用并应用选定的字体。
⚠️ 大型字体文件可能影响页面加载速度,请谨慎选择。
⚠️ 网站更新可能影响脚本效果,可能需要定期检查和调整。
代码

// ==UserScript==
// @name MiaoMiaoDe Chat Custom Font
// @namespace http://tampermonkey.net/
// @version 0.4
// @description Apply custom font to MiaoMiaoDe Chat website with enhanced features
// @match NextChat
// @grant GM_getValue
// @grant GM_setValue
// ==/UserScript==

(function() {
‘use strict’;

const config = {
    fonts: [
        { name: 'CustomFont1', url: 'https://example.com/font1.woff2' },
        { name: 'CustomFont2', url: 'https://example.com/font2.woff2' }
        // 添加更多字体选项
    ],
    applyToBody: true,
    specificSelectors: ['.chat-message', '.message-input'] // 调整选择器以匹配新网站
};

let currentFontIndex = GM_getValue('currentFontIndex', 0);

function createStyleElement(fontFamily, fontUrl) {
    const style = document.createElement('style');
    style.textContent = `
        @font-face {
            font-family: '${fontFamily}';
            src: url('${fontUrl}') format('woff2');
            font-weight: normal;
            font-style: normal;
        }

        ${config.applyToBody ? 'body, #app {' : ''}
        ${config.applyToBody ? `font-family: '${fontFamily}', sans-serif !important;` : ''}
        ${config.applyToBody ? '}' : ''}

        ${config.specificSelectors.map(selector => `
            ${selector} {
                font-family: '${fontFamily}', sans-serif !important;
            }
        `).join('')}
    `;
    return style;
}

function applyFont(index) {
    const font = config.fonts[index];
    const style = createStyleElement(font.name, font.url);
    
    // 移除旧的样式
    const oldStyle = document.getElementById('custom-font-style');
    if (oldStyle) oldStyle.remove();

    style.id = 'custom-font-style';
    document.head.appendChild(style);

    // 更新存储的字体索引
    GM_setValue('currentFontIndex', index);
    currentFontIndex = index;

    // 字体加载指示
    const loadingIndicator = document.createElement('div');
    loadingIndicator.id = 'font-loading-indicator';
    loadingIndicator.style.cssText = `
        position: fixed;
        top: 10px;
        right: 10px;
        background: rgba(0,0,0,0.7);
        color: white;
        padding: 5px 10px;
        border-radius: 5px;
        z-index: 9999;
    `;
    loadingIndicator.textContent = 'Loading custom font...';
    document.body.appendChild(loadingIndicator);

    // 字体加载检查
    document.fonts.ready.then(() => {
        console.log(`Custom font '${font.name}' has been loaded and applied.`);
        loadingIndicator.textContent = `Font '${font.name}' loaded!`;
        setTimeout(() => loadingIndicator.remove(), 2000);
    }).catch(err => {
        console.error('Error loading custom font:', err);
        loadingIndicator.textContent = 'Error loading font';
        setTimeout(() => loadingIndicator.remove(), 2000);
    });
}

function createFontSwitcher() {
    const switcher = document.createElement('div');
    switcher.id = 'font-switcher';
    switcher.style.cssText = `
        position: fixed;
        bottom: 10px;
        right: 10px;
        background: white;
        border: 1px solid #ccc;
        padding: 5px;
        border-radius: 5px;
        z-index: 9999;
    `;

    const select = document.createElement('select');
    config.fonts.forEach((font, index) => {
        const option = document.createElement('option');
        option.value = index;
        option.textContent = font.name;
        select.appendChild(option);
    });

    select.value = currentFontIndex;
    select.addEventListener('change', (e) => {
        applyFont(parseInt(e.target.value));
    });

    switcher.appendChild(select);
    document.body.appendChild(switcher);
}

function init() {
    // 初始应用字体
    applyFont(currentFontIndex);
    createFontSwitcher();

    // 监听动态加载的内容
    const observer = new MutationObserver((mutations) => {
        mutations.forEach((mutation) => {
            if (mutation.addedNodes && mutation.addedNodes.length > 0) {
                // 如果有新节点添加,重新应用字体样式
                applyFont(currentFontIndex);
            }
        });
    });

    observer.observe(document.body, {
        childList: true,
        subtree: true
    });
}

// 由于网站可能使用了SPA架构,我们需要确保在DOM完全加载后再初始化
if (document.readyState === 'loading') {
    document.addEventListener('DOMContentLoaded', init);
} else {
    init();
}

})();

4 个赞

提醒一句 更换字体的UI不好看
让鹅大佬来或许可以

太强了

1 个赞


第一次加载就是要 loading 很久吗

大概是的 如果字体文件比较大的话… 但是似乎没有设置缓存功能
也就是说每一次加载好像都会很慢…

但是仍然没有分类专家来分类

From #develop:ai to 资源荟萃