Как создать кнопку переключения для сценариев Greasemonkey?

Question

Итак, я пытаюсь выяснить, как сделать кнопку переключения для расширений greasemonkey, которые запускаются и перемещаются на разные страницы.

Так это то, что я до сих пор

var keepgoing = true 

Beginnign от того, если заявление и прочее здесь

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 + '!'); 
    } 
}