油猴编写-使用Bootstrap_油泼猴怎么写一个简单的html-优快云博客

本文链接：https://blog.youkuaiyun.com/soledad_chao/article/details/119604281

这个UserScript展示了如何在百度文库页面上添加一个按钮，点击后会在页面中插入Bootstrap的弹出框。它加载了jQuery和Bootstrap的JS及CSS资源，通过GM_addStyle和GM_getResourceText来应用样式，点击按钮后动态生成并初始化了四个不同位置的弹出框。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// ==UserScript==
// @name         bootstrapUI
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  实现bootstrap的弹出框
// @author       soledadchao
// @match        https://wenku.baidu.com/*
// @require      https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js
// @require      https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js
// @resource     customCSS https://stackpath.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css
// @grant        GM_addStyle
// @grant        GM_getResourceText
// ==/UserScript==

(function() {
    'use strict';

    //加载外部CSS，资源已在上方resource中
    var newCSS = GM_getResourceText ("customCSS");
    GM_addStyle (newCSS);

    //定义文本，并建立点击动作
    var btn=document.createElement("button");
    btn.innerHTML = "<a >开始操作</a>"
    btn.onclick= BtnAction
    document.querySelector('.doc-title').appendChild(btn)

    //定义需要加入的HTML
    var html = `
    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="left" data-content="左侧">
    Popover on 左侧
    </button>

    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="top" data-content="顶部.">
    Popover on 顶部
    </button>

    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="bottom" data-content="底部">
    Popover on 底部
    </button>

    <button type="button" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-content="右侧">
    Popover on 右侧
    </button>
    `

    //加载Html
    function AddHtml(html) {
        document.body.insertAdjacentHTML('afterBegin', html);
    }

    //按下自定义按钮的动作
    function BtnAction(){
        AddHtml(html);
	//需手动初始化
        $(function () {
            $("[data-toggle='popover']").popover();
        });
    }
})();