如何爲Greasemonkey腳本創建切換按鈕？

Question

所以我想弄清楚如何爲運行和導航到各種頁面的greasemonkey擴展製作切換按鈕。

因此，這是我迄今爲止的

var keepgoing = true 

Beginnign if語句和東西在這裏

else if keepgoing == true 
    { newsearch(); } 

按鈕點擊：

if keepgoing == true { keepgoing = false } 
else if keepgoing == false { keepgoing = true } 

所以基本上我需要幫助在網頁上放置一個按鈕。 ，並且它需要在導航頁面時記住該var。

謝謝，雷

Answer 1

如果你想有一個持久的按鈕（或任何數據），你需要使用某種類型的存儲。如果涉及多個域，請使用GM_setValue()。如果所有內容位於同一個域中，請使用localStorage。

我自己添加這種持久性按鈕，這裏是一個削減腳本，顯示我使用。它不只是添加一個按鈕，它使按鈕的用戶界面更友好一點，國際海事組織。

注：

1. 按鈕狀態持續整個頁面加載和跨站點。
2. 該按鈕停留在左上方（由CSS設置），並且在未被遮蓋時會淡入近不透明狀態。
3. 我使用了一個對象，因爲我有時會將多個控件添加到頁面中。
4. 您可以see a demo of how the button appears and behaves at 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 + '!'); 
    } 
}