使用 greasemonkey/tampermonkey 使 bootstrap 模式与另一个网站一起工作（例如 SO）

Question

我只是想添加几个按钮，单击它们时应该会弹出 bootstrap dialogbox/modal。像这个演示：http://jsbin.com/wiruhepere/1/edit?html,css,js,output

然而，当在真实网站上使用 greasemonkey/tampermonkey 应用它时，假设 Whosebug：它根本不起作用！！

我怀疑可能存在一些 script/css 冲突，但我没有足够的知识来追踪它：<

我要找的是：

单击 "Delete" 按钮时显示模式
当点击 "OK" 确认时，grab/intercept 那个回答要做一些其他的事情...

请记住我是这方面的初学者，所以如果有什么不够清楚的地方，请随时提问:-)

根据 wOxxOm 评论更新了 GM 代码：

// ==UserScript==
// @name        Bootstrap Test
// @namespace   http://tampermonkey.net/
// @description Why the hell the modal isnt working :<
// @author      Enissay
// @include     http://whosebug.com/*
// @include     https://whosebug.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://whosebug.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>");
```
这也行不通，因为 greasemonkey 变量作用域在全局作用域中是隐藏的。所以不可能从HTML调用myFunction。这意味着在您的情况下它无法工作。

我为你解决了大部分问题，但你仍然需要弄清楚如何解决 CSS Whosebug 上对话框的冲突，这个问题超出了你问题的答案范围。

下面的脚本适用于 http://blank.org:

// ==UserScript==
// @name        Bootstrap Test
// @namespace   http://tampermonkey.net/
// @description Why the hell the modal isnt working :<
// @author      Enissay, Tomas Zato (http://whosebug.com/users/607407/tom%c3%a1%c5%a1-zato)
// @include     /https?:\/\/Whosebug\.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();

使用 greasemonkey/tampermonkey 使 bootstrap 模式与另一个网站一起工作（例如 SO）

Make bootstrap modal work with another website using greasemonkey/tampermonkey (eg SO)

css

jquery

greasemonkey

tampermonkey

bootstrap-modal