如何注入将执行功能的按钮？答案

【问题标题】：How to inject a button that will execute a function?如何注入将执行功能的按钮？
【发布时间】：2013-02-19 10:49:41
【问题描述】：

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

例如，我试图将按钮放在the SO "Ask a Question" page 上的“未回答”按钮之后。

我希望它运行一个可以做任何事情的函数，例如alert ("Hello World") 或console.log('TEST start')。

有人可以发布一些示例代码来完成这项工作吗？一旦我有一个工作样本，那么我应该可以从那里开始。

非常感谢。

【问题讨论】：

向我们展示您迄今为止的尝试。

标签： javascript html greasemonkey

【解决方案1】：

这种事情的流程是：

确定要修改的内容的 HTML 结构。
添加或更改您的新内容。请注意，jQuery 让事情变得更加容易。
为您的新内容添加、修改和/或删除 javascript 事件侦听器。
如果目标内容是通过 AJAX 方法添加的，请使用AJAX-compensating techniques。

对于your example page：

使用 Firebug 检查显示 Unanswered“按钮”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's .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.");
} );

【讨论】：