Question

我想创建一个用我自己的图像替换http://battlelog.battlefield.com/上的默认狗标记图像（PNG）的用户脚本。我尝试了几种方法来做到这一点，但这些方法都没有。

首先我尝试了以下内容：

var images = document.getElementsByTagName ("img");
var x=0;
while(x<images.length)
{
if(images[x].src == "http://battlelog-cdn.battlefield.com/public/profile/bf3/stats/dogtags/la/defaulttag_right.png?v=3173239")
{
images[x].src = "http://site.com/test.png";
}
x=x+1;
}

在这个没有工作之后我想要包含一个外部的js，但这也失败了。外部脚本：

 <script type="text/javascript" src="http://code.jquery.com/jquery-1.5.1.min.js"></script>
        <script type="text/javascript">
           $(document).ready(function(){
               $('dogtag2-render').load('http://root.x10.bz/cdn.html');
           });
        </script>

以下是img标记所在源代码的片段：

<div id="dogtag2-render">

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="320" height="200">

<desc>Created with Raphaël</desc>

<defs></defs>

<image x="10" y="0" width="256" height="148" preserveAspectRatio="none" href="http://battlelog-cdn.battlefield.com/public/profile/bf3/stats/dogtags/la/defaulttag_right.png?v=3173239"></image>

</svg>

</div>

你能告诉我我做错了吗？

Answer 1

尝试使用内容脚本而不是greasemonkey脚本。 http://code.google.com/chrome/extensions/content_scripts.html

如果您在manifest.json中指定它，它将在您的页面上运行：

{
"name": "My Extension",
...
"content_scripts": [
{
  "matches": ["http://battlelog.battlefield.com/"],
  "js": ["jquery.js", "myscript.js"]
}
],
...
}

然后找到你的图像并用新的东西替换它，我会使用一些jQuery：

$(document).ready(function(){
$('img[src="the_old_images_src.jpg"]').attr('src','the_new_images_src.jpg');
});

希望有所帮助！

Answer 2

既然你愿意核对整个div，那么这段代码应该适合你，不需要jQuery：

var dogtagDiv       = document.querySelector ("#dogtag2-render");
dogtagDiv.innerHTML = '<img src="http://site.com/test.png" />';

请注意，首次尝试失败，因为<img>标记与SVG <image>标记不同，我不确定您是否可以通过这种方式操作SVG文档。

第二次尝试失败，因为（1）$('dogtag2-render')应该是$('#dogtag2‑render')而（2）load()不会跨域工作。

如何替换SVG图像或如何替换div内容？

2 个答案: