如何注入将执行函数的按钮

How to inject a button that will execute a function?

本文关键字：执行 函数 按钮 何注入 注入      更新时间：2023-09-26

我在使用Greasemonkey和Firefox javascript注入一个按钮时遇到了真正的困难，当选择该按钮时，该按钮将执行一个函数。

例如，我试图将按钮放在SO"Ask a Question"页面上"Unanswered"按钮的正后方。

我希望它运行一个函数来执行任何，例如alert ("Hello World")或console.log('TEST start')。

有人能张贴一些样本代码使这项工作吗？一旦我有了一个工作样本，我就可以从那里开始了。

非常感谢。

这类事情的过程是：

  1. 确定要修改的内容的HTML结构
  2. 添加或更改您的新内容。请注意，jQuery让它变得容易多了
  3. 为新内容添加、修改和/或删除javascript事件侦听器
  4. 如果目标内容是通过AJAX方法添加的，请使用AJAX补偿技术

对于您的示例页面：

使用Firebug进行检查显示未应答"按钮"HTML如下所示：

<div class="nav mainnavs">
  <ul>
    ...
    <li>
      <a href="/unanswered" id="nav-unanswered">Unanswered</a>
    </li>
  </ul>
</div>


因此，我们将添加这样的"按钮"：

<div class="nav mainnavs">
  <ul>
    ...
    <li>
      <a href="/unanswered" id="nav-unanswered">Unanswered</a>
    </li>
    <li>
      <a href="#" id="gmOurFirstButton">Log something</a>
    </li>
  </ul>
</div>


我们将使用jQuery的.click()激活它。

对于这个页面和这个按钮，我们不需要担心AJAX。

把所有这些放在一起，一个完整的工作脚本看起来像：

// ==UserScript==
// @name     _Add a simple button to a page
// @include  https://stackoverflow.com/questions/ask*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @grant    GM_addStyle
// ==/UserScript==
/*- The @grant directive is needed to work around a design change
    introduced in GM 1.0.   It restores the sandbox.
*/
var unansweredBtn   = $("#nav-unanswered");
//-- Add our button.
unansweredBtn.parent ().after (
    '<li><a href="#" id="gmOurFirstButton">Log something</a></li>'
);
//-- Activate the button.
$("#gmOurFirstButton").click ( function () {
    console.log ("Something.");
} );
相关文章：