0

Greasemonkey と Firefox の JavaScript を使用して、選択すると機能を実行するボタンを挿入するのが非常に困難です。

たとえば、SO「質問する」ページの「未回答」ボタンの直後にボタンを配置しようとしています。

たとえば、何かalert ("Hello World")を実行する関数を実行したいと思いますconsole.log('TEST start')。

誰かがこれを機能させるためにサンプルコードを投稿できますか? 作業サンプルができたら、そこから先に進むことができるはずです。

よろしくお願いします。

4

1 に答える 1

2

この種のプロセスは次のとおりです。

  1. 変更するコンテンツの HTML 構造を決定します。
  2. 新しいコンテンツを追加または変更します。jQueryを使用すると非常に簡単になることに注意してください。
  3. 新しいコンテンツの JavaScript イベント リスナーを追加、変更、または削除します。
  4. ターゲット コンテンツが AJAX メソッドを介して追加されている場合は、AJAX 補正技術を使用します。

サンプルページの場合：

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の.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.");
} );
于 2013-02-19T02:33:30.010 に答える