我正在尝试为 Chrome 编写一个用户脚本，它只是将一个元素添加到网站中，但由于我有限的 Javascript 知识，我确实不太成功地做到这一点。
主题示例:
<html>
<body>
<p class="listcaption">......................................</p>
<p class="listrow" id="listrow_aka_battlep"><span class="small"><b><a href="item.php?action=academy"></a>-: </b> / <b> : </b>0000</span></p>
<p class="listrow" id="listrow_char_mission"><a href="ability.php">text</a> | <a href="item.php?action=missiondesc"> text</a></p>
<p class="listrow" id="listrow_clan"><b>some</b><a href="clanmenu.php?action=manageclan">-------</a> | <a href="fight.php?action=groupjoinrand" target="mainFrame" title="group"></a></p>
<p class="listrow" id="listrow_group"><b>group: </b><a href="clanmenu.php?action=groupmenu">~~~~~</a></p>
<p class="listrow" id="listrow_lifep"><b>LP: </b>(<span class="healthok"><b>000</b></span>/000)</p>
<p class="listrow" id="listrow_money"><b>gold: </b>629 (<a href="item.php?action=moneydrop1"></a> | <a href="item.php?action=moneytransfer1"></a>)</p>
<p class="listrow" id="listrow_int"><b>......</b>0000<span class="healthok" id="speedok">000</span>000</p>
<p class="listrow" id="listrow_attackp"><b>text</b>000<span class="valueincreased">000</span>text</p>
<p class="listrow" id="listrow_attackw" title=""><b>............</b>text</p>
<p class="listrow" id="listrow_defensep"><b>?????????????</b>0000<span class="valueincreased">000000</span></p>
<p class="listrow" id="listrow_defensew" title="100%"><b>000000000000</b>texts</p>
<p class="listrow" id="listrow_neck"><b>neck:</b>something</p>
<p class="listrow" id="listrow_special"><a href="item.php?action=special">Special</a></p><p class="listrow" id="listrow_status"><span class="small"></span></p>
</body></html>
期望的输出:
<html>
<body>
<p class="listcaption">......................................</p>
<p class="listrow" id="listrow_aka_battlep"><span class="small"><b><a href="item.php?action=academy"></a>-: </b> / <b> : </b>0000</span></p>
<p class="listrow" id="listrow_char_mission"><a href="ability.php">text</a> | <a href="item.php?action=missiondesc"> text</a></p>
<p class="listrow" id="listrow_clan"><b>some</b><a href="clanmenu.php?action=manageclan">-------</a> | <a href="fight.php?action=groupjoinrand" target="mainFrame" title="group"></a></p>
<p class="listrow" id="listrow_group"><b>group: </b><a href="clanmenu.php?action=groupmenu">~~~~~</a></p>
<p class="listrow" id="listrow_lifep"><b>LP: </b>(<span class="healthok"><b>000</b></span>/000)</p>
<p class="listrow" id="listrow_money"><b>gold: </b>629 (<a href="item.php?action=moneydrop1"></a> | <a href="item.php?action=moneytransfer1"></a>)</p>
<p class="listrow" id="listrow_int"><b>......</b>0000<span class="healthok" id="speedok">000</span>000</p>
<p class="listrow" id="listrow_attackp"><b>text</b>000<span class="valueincreased">000</span>text</p>
<p class="listrow" id="listrow_attackw" title=""><b>............</b>text</p>
<p class="listrow" id="listrow_defensep"><b>?????????????</b>0000<span class="valueincreased">000000</span></p>
<p class="listrow" id="listrow_defensew" title="100%"><b>000000000000</b>texts</p>
<p class="listrow" id="listrow_neck"><b>neck:</b>something</p>
<p class="listrow" id="listrow_newlist"><a href="item.php?action=activate&act_item_id=000029"><img src="../images/items/image1.gif" width="20" height="20" title="1" border="0" align="absmiddle"></a> | <a href="item.php?action=watch&act_item_id=000016"><img src="../images/items/image2" width="20" height="20" title="2" border="0" align="absmiddle"></a> | <a href="item.php?action=watch&act_item_id=0000061"><img src="../images/items/image3" width="20" height="20" title="3" border="0" align="absmiddle"></a> | <a href="item.php?action=watch&act_item_id=000095"><img src="../images/items/image4.gif" width="20" height="20" title="4" border="0" align="absmiddle"></a></p>
<p class="listrow" id="listrow_special"><a href="item.php?action=special">Special</a></p><p class="listrow" id="listrow_status"><span class="small"></span></p>
</body></html>
我只希望用户脚本添加此列表:
<p class="listrow" id="listrow_newlist"><a href="item.php?action=activate&act_item_id=000029"><img src="../images/items/image1.gif" width="20" height="20" title="1" border="0" align="absmiddle"></a> | <a href="item.php?action=watch&act_item_id=000016"><img src="../images/items/image2" width="20" height="20" title="2" border="0" align="absmiddle"></a> | <a href="item.php?action=watch&act_item_id=0000061"><img src="../images/items/image3" width="20" height="20" title="3" border="0" align="absmiddle"></a> | <a href="item.php?action=watch&act_item_id=000095"><img src="../images/items/image4.gif" width="20" height="20" title="4" border="0" align="absmiddle"></a></p>
谢谢大家对我的帮助!
更新:
我尝试从添加此元素开始:
<a href="item.php?action=activate&act_item_id=000029"><img src="../images/items/image1.gif" width="20" height="20" title="1" border="0" align="absmiddle"></a>
这可能是错误的方法。 (因为它确实有效):
// ==UserScript==
// @name my script
// @description ...
// @author ...
// @version 1.0
// ==/UserScript==
var links = document.getElementsByClassName( 'listrow' );
( var i = 0; i < links.length; i++ ) {
var link = links[i];
var newlist = document.createElement( 'a' );
newlist.href = item.php?action=activate&act_item_id=000029
var the_image = document.createElement('img');
the_image.src = '../images/image1.gif';
newlink.appendChild(the_image);
}
最佳答案
成长为爱jQuery ，特别是the Manipulation Functions .
这是添加该段落的完整的 Firefox/Greasemonkey 和 Chrome 用户脚本。请参阅内嵌评论。
// ==UserScript==
// @name _Add New paragraph at targeted location
// @include http://YOUR_SERVER.COM/YOUR_PATH/*
// @grant GM_addStyle
// ==/UserScript==
function GM_main ($) {
var insertTarget = $("#listrow_special");
//-- Insert empty container paragraph before the target paragraph.
insertTarget.before ('<p class="listrow" id="listrow_newlist"></p>');
//-- Set this array to the unique parts of the links.
var linkDatArray = [
["activate&act_item_id=000029", "image1.gif", "title 1"],
["watch&act_item_id=000016", "image2.gif", "title 2"],
["watch&act_item_id=0000061", "image3.gif", "title 3"],
["watch&act_item_id=000095", "image4.gif", "title 4"]
];
//-- Now use the array to insert the links into the container paragraph.
var contParag = $("#listrow_newlist");
$.each (linkDatArray, function (rowIdx, arryRow) {
//-- Create empty link with correct action.
var newLink = $('<a href="item.php?action=' + arryRow[0] + '"></a>');
//-- Insert the image into it.
newLink.append (
'<img src="../images/items/' + arryRow[1] + '" title="' + arryRow[2] + '">'
);
//-- Insert the link into the container paragraph.
contParag.append (newLink);
//-- Except for the last link, add our seperator characters.
if (rowIdx < linkDatArray.length - 1) {
contParag.append (' | ');
}
} );
}
/*--- STYLE THE IMAGES (And anything else) WITH CSS! NOT ATTRIBUTES.
*/
//-- GM_addStyle() works on both Firefox and Chrome
GM_addStyle ( ' \
#listrow_newlist a img { \
width: 20px; \
height: 20px; \
border: none; \
vertical-align: middle; \
} \
' );
//-- Fire the main/payload code
add_jQuery (GM_main);
//-- This is just a standard utility function
function add_jQuery (callbackFn, jqVersion) {
jqVersion = jqVersion || "1.7.2";
var D = document;
var targ = D.getElementsByTagName ('head')[0] || D.body || D.documentElement;
var scriptNode = D.createElement ('script');
scriptNode.src = 'http://ajax.googleapis.com/ajax/libs/jquery/'
+ jqVersion
+ '/jquery.min.js'
;
scriptNode.addEventListener ("load", function () {
var scriptNode = D.createElement ("script");
scriptNode.textContent =
'var gm_jQuery = jQuery.noConflict (true);\n'
+ '(' + callbackFn.toString () + ')(gm_jQuery);'
;
targ.appendChild (scriptNode);
}, false);
targ.appendChild (scriptNode);
}
关于javascript - 添加 html 元素的简单用户脚本，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/12766575/