首页 > 其他分享 >使用油猴插件,修改和简化美化博客园的随笔编辑界面

使用油猴插件,修改和简化美化博客园的随笔编辑界面

时间:2024-02-20 13:55:06浏览次数:35  
标签:插件 childElement button 元素 油猴 querySelector var document 博客园

包含内容

  • 开局自动打开实时预览
  • 编辑区域高度放大
  • 左侧菜单栏区域缩小
  • 下方菜单栏隐藏,点击恢复可再现
  • 待续
// ==UserScript==
// @name         博客园修改
// @namespace    http://tampermonkey.net/
// @version      2024-02-20
// @description  try to take over the world!
// @author       You
// @match        https://i.cnblogs.com/posts/edit
// @match        https://i.cnblogs.com/posts/edit;postId=18022494
// @icon         https://www.google.com/s2/favicons?sz=64&domain=cnblogs.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    // 延时 2 秒后执行
setTimeout(function() {
    // 这里是要延时执行的代码块
    document.querySelector(".editor-container").style.height = "80rem"
    const liElement = document.querySelector('.toolbar').querySelectorAll('li')[10];

// 模拟鼠标点击该元素
liElement.click();

    var parentElement = document.querySelector('.panel--main');

// 隐藏除了特定子元素外的其他子元素
var allChildElements = parentElement.children; // 获取所有子元素

// 遍历所有子元素,隐藏除了特定子元素外的其他子元素
for (var i = 0; i < allChildElements.length; i++) {
    var childElement = allChildElements[i];
    if (childElement.classList.contains('field') || childElement.classList.contains('field-content')) {
        childElement.style.display = 'block'; // 显示特定子元素
    } else {
        childElement.style.display = 'none'; // 隐藏其他子元素
    }
}
    document.querySelector(' .opt-bar.d-flex.align-items-center.justify-content-between.mt-2').remove();
    document.querySelector('.split-area-left.as-split-area').style.flex = '0 0 9rem';



    //恢复
    // 创建一个新的 button 元素
var button = document.createElement("button");
button.innerText = "恢复"; // 设置按钮文本内容
button.className = "your-button-class"; // 添加按钮的类名

// 找到父元素// 在父元素后面插入新创建的按钮元素
document.querySelector(".panel--bottom").insertAdjacentElement("afterend", button);

    // 找到刚刚创建的按钮元素
var button = document.querySelector(".your-button-class");

// 为按钮添加点击事件处理程序
button.addEventListener("click", function() {
    // 隐藏除了特定子元素外的其他子元素
    var allChildElements = parentElement.children; // 获取所有子元素

    // 遍历所有子元素,显示之前隐藏的内容
    for (var i = 0; i < allChildElements.length; i++) {
        var childElement = allChildElements[i];
        childElement.style.display = 'block'; // 显示所有子元素
    }
});

}, 4000); //延迟, 1000 毫秒就是 1 秒

    // Your code here...
})();

标签:插件,childElement,button,元素,油猴,querySelector,var,document,博客园
From: https://www.cnblogs.com/LiiYuan/p/18022892

相关文章

  • 从0到1设计开发Chrome插件
    TNTWeb-全称腾讯新闻中台前端团队,组内小伙伴在Web前端、NodeJS开发、UI设计、移动APP等大前端领域都有所实践和积累。目前团队主要支持腾讯新闻各业务的前端开发,业务开发之余也积累沉淀了一些前端基础设施,赋能业务提效和产品创新。团队倡导开源共建,拥有各种技术大牛,团队Githu......
  • Babel 插件种类
    Babel插件种类:语法插件(SyntaxPlugins):语法插件负责扩展Babel的解析器,使其能够理解和解析新的或实验性的JavaScript语法特性。它们并不直接对代码进行转换,只是开启对应语法的解析功能。这意味着,如果没有相应的语法插件,Babel将无法正确解析某些新的或实验性的JavaScri......
  • 编写自用油猴脚本踩坑记录
    前言春节期间,我叔叔问我这个不太懂前端的Jvav后端有没有什么办法可以帮他修改一下网页上现实的内容,于是就有了这次第一次编写油猴脚本的尝试。需求户外作业时,需要使用手机浏览器查看公司的一个页面信息,这个页面一共有16个卡片风格的信息块,一个信息块在手机上要滑动3个屏幕高度(......
  • 磐维2.0 之pg_stat_statements插件
    目录一、概念描述二、安装插件三、pg_stat_statements视图四、pg_stat_statements相关参数五、测试验证一、概念描述pg_stat_statements是pg的一个扩展插件,通常用于统计数据库的资源开销,分析TOPSQL,找出慢查询。二、安装插件testdb=#testdb=#createextensionpg_stat_sta......
  • postman也不行!IDEA接口调试插件
    Postman是大家最常用的API调试工具,那么有没有一种方法可以不用手动写入接口到Postman,即可进行接口调试操作?今天给大家推荐一款IDEA插件:ApipostHelper,写完代码就可以调试接口并一键生成接口文档!而且还可以根据已有的方法帮助您快速生成url和params。更重要的是他完全免费!Apipos......
  • 旁门左道:借助 HttpClientHandler 拦截请求,体验 Semantic Kernel 插件
    前天尝试通过one-api+dashscope(阿里云灵积)+qwen(通义千问)运行SemanticKernel插件(Plugin),结果尝试失败,详见前天的博文。今天换一种方式尝试,选择了一个旁门左道走走看,看能不能在不使用大模型的情况下让SemanticKernel插件运行起来,这个旁门左道就是从StephenToub那......
  • 最新Burp Suite插件详解
    Burp Suite中的插件BurpSuite中存在多个插件,通过这些插件可以更方便地进行安全测试。插件可以在“BAppStore”(“Extender”→“BAppStore”)中安装,如图3-46所示。   图3-46   下面列举一些常见的BurpSuite插件。 1.Active Scan++ActiveScan++在BurpSuite......
  • PDF.js插件使用
    使用范围:在支持js的服务器上运行,适合电脑端(手机端没尝试过),使用方便使用方法:下载:https://mozilla.github.io/pdf.js/getting_started/ 解压后如下,将这些文件放到public里面或在public里建立一个自定义名称,如pdfjs的文件夹再放,我这边是直接放入 预览使用:http://localho......
  • mysql-udf-http插件的安装与使用
    mysql-udf-http插件的安装与使用查看原文安装curl点击下载地址,下载curl-7.69.0.tar.gz#解压curl-7.69.0.tar.gztar-zvxfcurl-7.69.0.tar.gzcdcurl-7.69.0#配置安装路径./configure-prefix=/usr/local/curl#进行安装make&&makeinstall安装mysql-udf-http点......
  • 这款完全自定义配置的浏览器起始页插件值得你收藏!
    大家好,我是Java陈序员。浏览器是我们上网冲浪的必备工具,每次打开浏览器默认都是先看到起始页。有的浏览器起始页十分简洁美观,而有的则是充满了各种网址导航和广告。今天,給大家介绍一个浏览器起始页配置插件,支持自定义配置。关注微信公众号:【Java陈序员】,获取开源项目分享、A......