请问我可以帮助修复我的 Tampermonkey 脚本吗？

Question

如果答案显而易见，我不会感到惊讶，但我不知道为什么我的用户脚本不起作用。所有被引用的 CSS 类都存在于它打算运行的站点中（工作得很好），但我在运行宁我的功能时遇到问题已插入 html.

// ==UserScript==
// @name         New Userscript
// @namespace    http://tampermonkey.net/
// @version      0.1
// @description  try to take over the world!
// @author       You
// @match        https://www.zapsplat.com/*
// @icon         https://www.google.com/s2/favicons?domain=zapsplat.com
// @grant        none
// ==/UserScript==

(function() {
    'use strict';
    var btns = document.createElement('nav');
    //
    var link = window.location.href;
    //
    var div = document.createElement('div');
    //
    div.innerHTML = "<script>function bak(){var num = link.match(/\d+/);num -= 1;var back = link.replace('/\d+/',num);window.location.replace(back);};function fwod(){var num = link.match(/\d+/);num += 1;var fwd = link.replace('/\d+/',num);window.location.replace(back);};</script>";
    //
    document.body.prepend(div);
    //
    btns.innerHTML = '<div class="pagination-container uk-margin-top">::before<ul class="uk-pagination"><li><a onClick ="bak()">BACK</a></li><li><a onClick = "fwod()">FWD</a></li></ul></div>';
    //
    document.body.prepend(btns);
    //
})();

根据 Phuzi 和 Ivar 的评论，我要指出 'problems with running the functions' 是引用错误，因为函数是“未定义的”。这可能是一个 DOM 相关的问题，尽管我对此了解不够，无法做出任何判断。

v2（将 var div 更改为代码以提高可读性）（仅我更改的部分）仍然不起作用，但也许更好？

//
    var code = document.createElement('script');
//
    code.innerHTML = "function bak(){var num = link.match(/\d+/);num -= 1;var back = link.replace('/\d+/',num);window.location.replace(back);};function fwod(){var num = link.match(/\d+/);num += 1;var fwd = link.replace('/\d+/',num);window.location.replace(back);};";
//
    document.body.prepend(code);

v1 中的错误消息

未捕获的引用错误：未定义 bak 在 HTMLAnchorElement.onclick ((index):187)

v2 中的错误消息

VM4624:1 未捕获的引用错误：link 未定义在烘焙 (:1:26) 在 HTMLAnchorElement.onclick ((index):187)

Answer 1

你真的应该使用 addEventListener 而不是 onclick 属性。这样你就不需要将 JavaScript 添加到你正在修改的页面，并且可以将它保存在你的用户脚本中，这样可能更容易调试。

您还需要根据需要在 back 和 forward 函数中移动 link 变量 url - SPA 倾向于修改页面 url 无需重新加载页面，因此不会重新加载您的用户脚本（安全总比抱歉好。）

(function() {
  'use strict';
  var btns = document.createElement('nav');
  btns.innerHTML = '<div class="pagination-container uk-margin-top"><ul class="uk-pagination"><li><a>BACK</a></li><li><a>FWD</a></li></ul></div>';
  document.body.prepend(btns);

  btns.querySelector('ul.uk-pagination li:nth-child(1) a')
      .addEventListener('click', back);

  btns.querySelector('ul.uk-pagination li:nth-child(2) a')
      .addEventListener('click', forward);
})();

function back() {
  var link = window.location.href;
  var num = link.match(/\d+/);
  num -= 1;
  var back = link.replace('/\d+/', num);
  window.location.replace(back);
}

function forward() {
  var link = window.location.href;
  var num = link.match(/\d+/);
  num += 1;
  var fwd = link.replace('/\d+/', num);
  window.location.replace(fwd);
}

从 JS 的角度来看应该这样做，但您可能需要一些额外的 CSS 来确保您的 nav 显示在所有页面上。

我敢肯定还有其他问题，当它们出现时，不要试图更新您的问题。相反，您应该向另一个人询问您所面临问题的具体细节。

请问我可以帮助修复我的 Tampermonkey 脚本吗？

please may I have help fixing my Tampermonkey script?

javascript

html

tampermonkey

v1 中的错误消息

v2 中的错误消息