如果你想要一个持久按钮(或任何数据),你需要使用某种存储。如果涉及多个域,请使用GM_setValue()。如果一切都在同一个域上,请使用localStorage。
我自己添加了这种持久性按钮,这是一个精简的脚本,显示了我使用的内容。它不只是添加一个按钮,它使按钮 UI 更加用户友好,IMO。
笔记:
- 按钮状态在页面加载和站点之间保持不变。
- 按钮停留在左上角(由 CSS 设置)并且在没有鼠标悬停时淡化到接近不透明。
- 我使用一个对象,因为有时我有多个添加到页面的控件。
- 您可以在 jsFiddle 看到按钮如何显示和行为的演示。(除非值不能在演示中的页面加载中持续存在。它们在 GM 脚本中存在。)
// ==UserScript==
// @name _Keep going button
// @include http://YOUR_SERVER_1.COM/YOUR_PATH/*
// @include http://YOUR_SERVER_2.COM/YOUR_PATH/*
// @require http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// ==/UserScript==
//--- Add the button.
$("body").append (
'<div class="gmPersistentButton">'
+ '<button id="gmContinueBtn">Init failed!</button></div>'
);
//--- Define and init the matching control object:
var btnControl = new PersistentButton (
"gmContinueBtn", //-- HTML id
"StopContinueBtn", //-- Storage label
["Stop", "Continue"], //-- Text that the button cycles through
[false, true] //-- Matching values for the button's states
);
//--- Activate the button click-handler.
$("#gmContinueBtn").click ( function () {
var btnValue = this.value;
keepgoing = btnValue
btnControl.SetNextValue ();
if (keepgoing == "true") {
// CALL YOUR FUNCTION HERE.
}
} );
//--- The button will fade when we aren't using it.
var zDisplayPanel = $('div.gmPersistentButton');
zDisplayPanel.hover (
function () { $(this).stop (true, false).fadeTo (50, 1 ); },
function () { $(this).stop (true, false).fadeTo (900, 0.1); }
);
zDisplayPanel.fadeTo (2900, 0.1);
//--- CSS styles to make it work and to improve appearance.
GM_addStyle ( (<><![CDATA[
.gmPersistentButton {
background: orange;
color: black;
position: fixed;
top: 1em;
right: 1em;
z-index: 6666;
padding: 1em;
border: 3px double gray;
border-radius: 1ex;
opacity: 0.8;
}
.gmPersistentButton button {
cursor: pointer;
}
.gmPersistentButton button:hover {
color: red;
}
]]></>).toString () );
//--- Button object
function PersistentButton (htmlID, setValName, textArry, valueArry) {
//--- Initialize the button to last stored value or default.
var buttonValue = valueArry[0];
fetchValue ();
storeValue (); //-- Store, in case it wasn't already.
setButtonTextAndVal ();
//--- DONE with init. Set click and keyboard listeners externally.
//***** Public functions:
this.Reset = function () {
buttonValue = valueArry[0];
storeValue ();
setButtonTextAndVal ();
};
this.SetNextValue = function () {
var numValues = valueArry.length;
var valIndex = 0;
for (var J = numValues - 1; J >= 0; --J) {
if (buttonValue == valueArry[J]) {
valIndex = J;
break;
}
}
valIndex++;
if (valIndex >= numValues)
valIndex = 0;
buttonValue = valueArry[valIndex];
storeValue ();
setButtonTextAndVal ();
};
//***** Private functions:
function fetchValue () {
buttonValue = GM_getValue (setValName, buttonValue);
}
function storeValue () {
GM_setValue (setValName, buttonValue);
}
function setButtonTextAndVal () {
var buttonText = "*ERROR!*";
for (var J = valueArry.length - 1; J >= 0; --J) {
if (buttonValue == valueArry[J]) {
buttonText = textArry[J];
break;
}
}
var theBtn = document.getElementById (htmlID);
if (theBtn) {
theBtn.textContent = buttonText;
theBtn.setAttribute ("value", buttonValue);
}
else
alert ('Missing persistent button with ID: ' + htmlID + '!');
}
}