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

Question

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

Eni*_*say 2 css jquery greasemonkey tampermonkey bootstrap-modal

我只是想添加几个按钮，单击这些按钮时会弹出引导对话框/模式。像这样的演示：http : //jsbin.com/wiruhepere/1/edit?html,css,js,output

但是，当在真实网站上使用greasemonkey/tampermonkey 应用它时，让我们说stackoverflow：它根本不起作用！！

我怀疑可能存在一些脚本/css 冲突，但我不具备追踪该冲突的知识：<

我正在寻找的是：

单击“删除”按钮时显示模态
单击“确定”进行确认时，抓取/截取该答案以执行其他一些操作...

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

根据 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
        });
    });
})();
}

Run Code Online (Sandbox Code Playgroud)

初始 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);
})();

Run Code Online (Sandbox Code Playgroud)

Answer 1

Tom*_*ica 5

脚本有很多问题，让我列出它们：

手动将 javascript 附加到 DOM - 如需其他 javascript 资源，请使用@require例如：
```
// @require     https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js
```
Run Code Online (Sandbox Code Playgroud)

错误的字符串和变量- 波纹管，你正在使用，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>");

Run Code Online (Sandbox Code Playgroud)

不必要的闭包- 这不会导致任何错误，但为什么要将整个函数体包装在自调用闭包中？这太疯狂了：
```
// WARNING: Crazy code, do not use!
function myFunc() {
    (function() {

    })()
}
```
Run Code Online (Sandbox Code Playgroud)
通过将函数附加到 HTML 来执行函数- 虽然通常不完全是错误，但人们通常只是这样做来调用myFunction：
```
// Call my function
myFunction();
```
Run Code Online (Sandbox Code Playgroud)
不知道你为什么这样做：
```
$("body").append("<script>("+myFunction+")();</script>");
```
Run Code Online (Sandbox Code Playgroud)
这也行不通，因为greasemonkey 变量作用域对全局作用域是隐藏的。所以不可能myFunction从 HTML调用。这意味着在您的情况下它无法正常工作。

我为您解决了大部分问题，但您仍然需要弄清楚如何解决 stackoverflow 上对话框的 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();

Run Code Online (Sandbox Code Playgroud)

归档时间：	9 年，2 月前
查看次数：	3685 次
最近记录：	9 年，2 月前