使用greasemonkey/tampermonkey（例如SO）使另一個網站bootstrap模式工作

Question

我只是想添加一些按鈕，當點擊一個引導對話框/模式應該彈出。像這樣的演示：http://jsbin.com/wiruhepere/1/edit?html,css,js,output

但是，當在一個真實的網站上應用這個使用greasemonkey/tampermonkey，讓我們說，stackoverflow：它根本不工作！

我也許懷疑一些腳本/ CSS衝突，但我沒有知識來追蹤下來：<

我正在尋找的是：

1. 充分利用模式上出現的「刪除」按鈕，點擊時
2. 當「OK」點擊確認，搶/攔截這個問題的答案做一些其他的東西...

請記住我在這個初學者，所以如果soemthing不夠清晰，隨時問:-)基於wOxxOm評論

更新GM代碼：

// ==UserScript== 
// @name  Bootstrap Test 
// @namespace http://tampermonkey.net/ 
// @description Why the hell the modal isnt working :< 
// @author  Enissay 
// @include  http://stackoverflow.com/* 
// @include  https://stackoverflow.com/* 
// @resource jqueryJS https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js 
// @resource bootstrapJS https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js 
// @resource buttonCSS https://raw.githubusercontent.com/necolas/css3-github-buttons/master/gh-buttons.css 
// @resource bootstrapCSS https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 
// @resource githubButtonIconSet https://raw.githubusercontent.com/necolas/css3-github-buttons/master/gh-icons.png 
// @grant  GM_addStyle 
// @grant  GM_getResourceText 
// @grant  GM_getResourceURL 
// ==/UserScript== 

(function() { 
    //--- Inject scripts & css including myCode/Func 
    $("head").append("<script>" + GM_getResourceText("jqueryJS") + "</script>"); 
    $("head").append("<script>" + GM_getResourceText("bootstrapJS") + "</script>"); 
    $("head").append("<style>" + GM_getResourceText("bootstrapCSS") + "</style>"); 

    var githubButtonIconSet = GM_getResourceURL ("githubButtonIconSet"); 
    var buttonCSS = GM_getResourceText("buttonCSS"); 
    buttonCSS = buttonCSS.replace (/gh-icons\.png/g, githubButtonIconSet); 
    $("head").append("<style>" + GM_getResourceText(buttonCSS) + "</style>"); 

    $("body").append("<script>("+myFunc+")();</script>"); 
})(); 

function myFunc() { 
(function() { 
    'use strict'; 
    var deleteButtonHtml = ` 
<div class="button-group"> 
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
     Launch demo modal 
    </button> 

    <a href="#" class="button icon edit">Edit</a> 
    <a href="#" class="button icon remove danger">Delete</a> 
</div> 
`; 
    var modalHtml = ` 
<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 

     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 
`; 

    //--- Add nodes to page 
    $("body").prepend(deleteButtonHtml); 
    $("body").prepend(modalHtml); 

    //--- Attach event to button 
    $(".button-group").find(".remove").click(function(evt){ 
     //debugger; 
     $('#myModal').modal({ 
      keyboard: true 
     }); 
    }); 
})(); 
} 

初始GM代碼波紋管：

// ==UserScript== 
// @name  Bootstrap Test 
// @namespace http://tampermonkey.net/ 
// @description Why the hell the modal isnt working :< 
// @author  Enissay 
// @include  http://stackoverflow.com/* 
// @require  https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js 
// @require  https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js 
// @resource buttonCSS https://raw.githubusercontent.com/necolas/css3-github-buttons/master/gh-buttons.css 
// @resource bootstrapCSS https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 
// @resource githubButtonIconSet https://raw.githubusercontent.com/necolas/css3-github-buttons/master/gh-icons.png 
// @grant  GM_addStyle 
// @grant  GM_getResourceText 
// @grant  GM_getResourceURL 
// ==/UserScript== 

(function() { 
    'use strict'; 

    var deleteButtonHtml = ` 
<div class="button-group"> 
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
     Launch demo modal 
    </button> 

    <a href="#" class="button icon edit">Edit</a> 
    <a href="#" class="button icon remove danger">Delete</a> 
</div> 
`; 
    var modalHtml = ` 
<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 
`; 
    //--- Add nodes to page 
    $("body").prepend(deleteButtonHtml); 
    $("body").prepend(modalHtml); 

    //--- Attach event to button 
    $(".button-group").find(".remove").click(function(evt){ 
     $('#myModal').modal({ 
      keyboard: false 
     }); 
    }); 


    //--- Style our newly added elements using CSS. 
    GM_addStyle (GM_getResourceText ("bootstrapCSS")); 
    var githubButtonIconSet = GM_getResourceURL ("githubButtonIconSet"); 
    var buttonCSS = GM_getResourceText("buttonCSS"); 
    buttonCSS = buttonCSS.replace (/gh-icons\.png/g, githubButtonIconSet); 
    GM_addStyle(buttonCSS); 
})(); 

Answer 1

有這麼多的東西錯了劇本，讓我一一列舉：

• 手動附加JavaScript來DOM - 對於需要其他JavaScript資源，使用@require如：

  // @require  https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js 
  

• 誤串和可變 - 波紋管，你使用getResourceText但是給它是一個CSS字符串，不是資源名稱：

  var buttonCSS = GM_getResourceText("buttonCSS"); 
  buttonCSS = buttonCSS.replace (/gh-icons\.png/g, githubButtonIconSet); 
  // Button CSS does not contain name of resource, but actual CSS 
  $("head").append("<style>" + GM_getResourceText(buttonCSS) + "</style>"); 
  

• 不必要的關閉 - 這不會導致任何錯誤，但爲什麼你會在自調用閉包中包裝整個函數體？這是瘋狂的：

  // WARNING: Crazy code, do not use! 
  function myFunc() { 
      (function() { 
  
      })() 
  } 
  

• 通過追加它執行功能HTML - 雖然通常不完全是一個錯誤，人們只是通常這樣做是爲了呼籲myFunction：

  // Call my function 
  myFunction(); 
  

  不知道爲啥你可以這樣做：

  $("body").append("<script>("+myFunction+")();</script>"); 
  

  這也行不通，因爲greasemo nkey變量作用域從全局範圍中隱藏。所以不可能從HTML調用myFunction。這意味着在你的情況下它不能工作。

我修復了大部分的問題給你，但你仍然需要弄清楚如何解決CSS衝突對計算器的對話框中，這個問題超出了你的問題的回答的範圍。

下面的腳本適用於http://blank.org：

// ==UserScript== 
// @name  Bootstrap Test 
// @namespace http://tampermonkey.net/ 
// @description Why the hell the modal isnt working :< 
// @author  Enissay, Tomas Zato (http://stackoverflow.com/users/607407/tom%c3%a1%c5%a1-zato) 
// @include  /https?:\/\/stackoverflow\.com\/*/ 
// @include  http://blank.org/* 
// @require  https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js 
// @require  https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js 
// @resource buttonCSS https://raw.githubusercontent.com/necolas/css3-github-buttons/master/gh-buttons.css 
// @resource bootstrapCSS https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css 
// @resource githubButtonIconSet https://raw.githubusercontent.com/necolas/css3-github-buttons/master/gh-icons.png 
// @grant  GM_addStyle 
// @grant  GM_getResourceText 
// @grant  GM_getResourceURL 
// ==/UserScript== 
console.log("Start"); 

document.head.appendChild(cssElement(GM_getResourceURL ("githubButtonIconSet"))); 
document.head.appendChild(cssElement(GM_getResourceURL ("buttonCSS"))); 
document.head.appendChild(cssElement(GM_getResourceURL ("bootstrapCSS"))); 

function cssElement(url) { 
    var link = document.createElement("link"); 
    link.href = url; 
    link.rel="stylesheet"; 
    link.type="text/css"; 
    return link; 
} 

function myFunc() { 
    'use strict'; 
    var deleteButtonHtml = ` 
<div class="button-group"> 
    <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal"> 
     Launch demo modal 
    </button> 

    <a href="#" class="button icon edit">Edit</a> 
    <a href="#" class="button icon remove danger">Delete</a> 
</div> 
`; 
    var modalHtml = ` 
<!-- Modal --> 
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel"> 
    <div class="modal-dialog" role="document"> 
    <div class="modal-content"> 
     <div class="modal-header"> 
     <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> 
     <h4 class="modal-title" id="myModalLabel">Modal title</h4> 
     </div> 
     <div class="modal-body"> 
     ... 
     </div> 
     <div class="modal-footer"> 

     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
     <button type="button" class="btn btn-primary">Save changes</button> 
     </div> 
    </div> 
    </div> 
</div> 
`; 

    //--- Add nodes to page 
    $("body").prepend(deleteButtonHtml); 
    $("body").prepend(modalHtml); 
    //--- Attach event to button 
    // NOT NECESSARY, bootsrap creates event listeners automatically 
    /*$(".button-group").find("button").click(function(evt){ 
     console.log("Click.", $('#myModal')); 
     $('#myModal').modal("show"); 
    }); */ 
} 
myFunc();