How do you edit an HTML element with Greasemonkey?

问题

There is a Pokemon battle simulator called "Pokemon Showdown". The client is closed source so I can't add a tier to my server. I would like to edit the final battle dropdown to add a tier.

I want to change:

<select id="lobby-format" onchange="return rooms['lobby'].formSelectFormat()">
  <option value="randombattle" selected="selected">Random Battle (rated)</option>
  <option value="unratedrandombattle">Unrated Random Battle</option>
  <option value="ou">OU (rated)</option>
  <option value="cap">CAP (rated)</option>
  <option value="ubers">Ubers (rated)</option>
  <option value="uu">UU (rated)</option>
  <option value="ru">RU (rated)</option>
  <option value="nu">NU (rated)</option>
  <option value="lc">LC (rated)</option>
  <option value="hackmons">Hackmons (rated)</option>
  <option value="balancedhackmons">Balanced Hackmons (rated)</option>
  <option value="glitchmons">Glitchmons (rated)</option>
</select>

to:

<select id="lobby-format" onchange="return rooms['lobby'].formSelectFormat()">
  <option value="randombattle" selected="selected">Random Battle (rated) </option>
  <option value="unratedrandombattle">Unrated Random Battle</option>
  <option value="ou">OU (rated)</option>
  <option value="cap">CAP (rated)</option>
  <option value="ubers">Ubers (rated)</option>
  <option value="uu">UU (rated)</option>
  <option value="ru">RU (rated)</option>
  <option value="nu">NU (rated)</option>
  <option value="pu">PU (unrated)</option>
  <option value="lc">LC (rated)</option>
  <option value="bwcup">BW Cup (unrated)</option>
  <option value="hackmons">Hackmons (rated)</option>
  <option value="balancedhackmons">Balanced Hackmons (rated)</option>
  <option value="glitchmons">Glitchmons (rated)</option>
</select>

(Inserting 2 <options> at select locations.)

回答1:

Ok, try that:

var opt = document.createElement("option");

var content = document.createTextNode("PU (unrated)");
opt.appendChild(content);

var attr = document.createAttribute("value");
attr.nodeValue = "pu";
opt.setAttributeNode(attr);

var targetEl = document.getElementById("lobby-format");
targetEl.appendChild(opt);

This will add just one more option, but I guess you get the point.

回答2:

Here's a script that adds options, at targeted points, using the awesome power of jQuery (tested at jsBin):

// ==UserScript==
// @name     _Add new options at select points
// @include  http://play.pokemonshowdown.com/*
// @include  http://jsbin.com/azeveh*
// @require  http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// ==/UserScript==

var selectNode  = $("#lobby-format");

selectNode  .find ("option[value='nu']")
            .after ('<option value="pu">PU (unrated)</option>');

selectNode  .find ("option[value='lc']")
            .after ('<option value="bwcup">BW Cup (unrated)</option>');

The OP's particular site uses AJAX to add that <select>. To compensate for AJAX, use the waitForKeyElements utility. Like so:

// ==UserScript==
// @name        _Add new options at select points, AJAX compensated.
// @include     http://jsbin.com/azeveh*
// @include     http://play.pokemonshowdown.com/*
// @require     http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js
// @require     https://gist.github.com/raw/2625891/waitForKeyElements.js
// ==/UserScript==

waitForKeyElements ("#lobby-format option[value='nu']", AddOption_1);
waitForKeyElements ("#lobby-format option[value='lc']", AddOption_2);

function AddOption_1 (jNode) {
    jNode.after ('<option value="pu">PU (unrated)</option>');
}

function AddOption_2 (jNode) {
    jNode.after ('<option value="bwcup">BW Cup (unrated)</option>');
}

来源：https://stackoverflow.com/questions/10873505/how-do-you-edit-an-html-select-element-with-greasemonkey

标签

javascript