javascript - 使用 Greasemonkey 脚本在每个页面上放置一个侧边栏

Question

我正在尝试编写一个 Greasemonkey 脚本，该脚本将在它加载的每个网页上放置一个导航侧边栏，但我仍然不知道如何在不覆盖每个页面上的某些内容的情况下做到这一点。有没有办法div在加载的每个页面的旁边放置一个，而不覆盖任何页面的内容？

Answer 1

您链接的问题接受的答案在整个页面上放置了一个偏移量，同时展示了一个顶栏，而不是侧栏。这种技术对于右侧边栏来说很糟糕，因为它会切掉（隐藏）页面左侧的一部分。

如果你想走这条路（我不推荐），一个更好的技术是调整页面宽度。这是完整的 Greasemonkey 脚本中的一种方法：

// ==UserScript==
// @name     _Sidebar on page
// @include  https://stackoverflow.com/questions/14722302/*
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

var sidebarWidth    = "100px";

$("html").css ( {
    position:   "relative",
    width:      "calc(100% - " + sidebarWidth + ")"
} );

$("body").append ( '                                                \
    <div id="gmRightSideBar">                                       \
        <ul>                                                        \
            <li><a href="http://dailypuppy.com/">Link 1</a></li>    \
            <li><a href="http://puppyfind.com/">Link 2</a></li>     \
        </ul>                                                       \
    </div>                                                          \
' );

GM_addStyle ( "                                                     \
    #gmRightSideBar {                                               \
        position:               fixed;                              \
        top:                    0;                                  \
        right:                  0;                                  \
        margin:                 1ex;                                \
        padding:                1em;                                \
        background:             orange;                             \
        width:                  calc(" + sidebarWidth + " - 2ex)    \
    }                                                               \
    #gmRightSideBar ul {                                            \
        margin:                 0ex;                                \
    }                                                               \
    #gmRightSideBar a {                                             \
        color:                  blue;                               \
    }                                                               \
" );

使用 CSS 定位和样式化所有内容，并使用 jQuery 简化代码并使其更加健壮/便携。

---

---

但是，与其压缩或移动页面并可能破坏其布局，不如继续掩盖右侧的一些内容。 这几乎总是浪费空间，通常会被忽略（以及其他几个链接和研究）。

如果您的侧边栏在没有悬停时大部分情况下仍然不可见，并且有一个方便的键盘快捷键来切换其可见性，那么它有时会部分遮盖右侧内容就没有问题了。我多年来一直在使用这种技术，而且效果很好。

一个完整的 Greasemonkey 脚本是：

// ==UserScript==
// @name     _Add a Sidebar to a page with auto fade and keyboard shortcut
// @include  https://stackoverflow.com/questions/14722302/*
// @include  http://YOUR_SERVER.COM/YOUR_PATH/*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==

$("body").append ( '                                                \
    <div id="gmRightSideBar">                                       \
        <p>F9 toggles visibility</p>                                \
        <ul>                                                        \
            <li><a href="http://dailypuppy.com/">Link 1</a></li>    \
            <li><a href="http://puppyfind.com/">Link 2</a></li>     \
        </ul>                                                       \
    </div>                                                          \
' );

//-- Fade panel when not in use
var kbShortcutFired = false;
var rightSideBar    = $('#gmRightSideBar');
rightSideBar.hover (
    function () {
        $(this).stop (true, false).fadeTo (50,  1  );
        kbShortcutFired = false;
    },
    function () {
        if ( ! kbShortcutFired ) {
            $(this).stop (true, false).fadeTo (900, 0.1);
        }
        kbShortcutFired = false;
    }
);
rightSideBar.fadeTo (2900, 0.1);

//-- Keyboard shortcut to show/hide our sidebar
$(window).keydown (keyboardShortcutHandler);

function keyboardShortcutHandler (zEvent) {
    //--- On F9, Toggle our panel's visibility
    if (zEvent.which == 120) {  // F9
        kbShortcutFired = true;

        if (rightSideBar.is (":visible") ) {
            rightSideBar.stop (true, false).hide ();
        }
        else {
            //-- Reappear opaque to start
            rightSideBar.stop (true, false).show ();
            rightSideBar.fadeTo (0, 1);
            rightSideBar.fadeTo (2900, 0.1);
        }

        zEvent.preventDefault ();
        zEvent.stopPropagation ();
        return false;
    }
}

GM_addStyle ( "                                                     \
    #gmRightSideBar {                                               \
        position:               fixed;                              \
        top:                    0;                                  \
        right:                  0;                                  \
        margin:                 1ex;                                \
        padding:                1em;                                \
        background:             orange;                             \
        width:                  100px;                              \
        z-index:                6666;                               \
        opacity:                0.9;                                \
    }                                                               \
    #gmRightSideBar p {                                             \
        font-size:              80%;                                \
    }                                                               \
    #gmRightSideBar ul {                                            \
        margin:                 0ex;                                \
    }                                                               \
    #gmRightSideBar a {                                             \
        color:                  blue;                               \
    }                                                               \
" );