0

I'm writing a chrome extension to change a certain website's logo for a friend. The problem is that the logo is an <svg> tag. How do I change the HTML tag and content in js?

Pointy
  • 405,095
  • 59
  • 585
  • 614
Kookerus
  • 506
  • 2
  • 7
  • 18
  • 1
    You can insert the svg tag before the img tag (`Node.insertBefore`), then remove the img tag (`Node.removeChild`). – Salman A Apr 09 '15 at 05:38
  • I'm trying to insert an and then remove the . Will this still work? Also, is there any way to use Node from a google chrome extension? – Kookerus Apr 09 '15 at 05:44
  • No, there's no way to use Node from a Chrome extension. – Pointy Apr 09 '15 at 05:52

1 Answers1

1

Not sure if you are allowed to use jQuery, but you could use replaceWith();

$(document).ready(function(e) {
   $('svg').replaceWith('<img src="http://images.all-free-download.com/images/graphiclarge/smiley_10_55841.jpg" alt="smiley!"/>'); 
});
svg {
    width: 200px;
    height:200px;
}

img {
    width: 200px;
    height: 200px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <path d="M30,1h40l29,29v40l-29,29h-40l-29-29v-40z" stroke="#000" fill="none"/> 
  <path d="M31,3h38l28,28v38l-28,28h-38l-28-28v-38z" fill="#a23"/> 
  <text x="50" y="68" font-size="48" fill="#FFF" text-anchor="middle"><![CDATA[410]]></text>
</svg>
</div>

If you can only use JavaScript, there is a replaceChild function.

aug
  • 11,138
  • 9
  • 72
  • 93
  • I just updated my answer. You simply just need to run the script rather than enclose it in an event listener. – aug Apr 09 '15 at 06:14
  • I don't believe I'm able to use jquery, as the console logs `Uncaught ReferenceError: $ is not defined`. Is there a way to link to google's jquery hosting using HTML injection, or a way to do this in plain javascript? – Kookerus Apr 09 '15 at 06:21
  • 1
    Yes. Please take a look [here](http://stackoverflow.com/questions/21317476/how-to-use-jquery-in-chrome-extension). You can also take a look at replaceChild which is a JavaScript function – aug Apr 09 '15 at 06:22
  • 1
    Oh my gosh, thank you so much! I didn't understand any of the documentation for the `replaceChild` function, so I took a look at the other post, and the jquery works perfectly! – Kookerus Apr 09 '15 at 06:34
  • I have realized this replaces all svg images. This isn't really that bad, but is there any way to only replace the first? – Kookerus Apr 09 '15 at 07:37
  • Yes you can change the selector to be `$('svg:first-child')` so it only grabs the first svg in every container. You can also give your svg a `class` or `id` so that you can directly reference it like `$('svg#id_of_svg')`. I would suggest learning about [CSS Selectors](https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Getting_started/Selectors). – aug Apr 09 '15 at 08:16
  • Odd, it still gets both of the svg images. Attached is a screenshot of what I am talking about. The image circled in green is the one that has properly been replaced, and the one circled in red is the one that shouldn't be replaced. [imgur link](http://i.imgur.com/Bc808fM.png) – Kookerus Apr 09 '15 at 17:21
  • 1
    My bad I meant to say try `$('svg:first')`. More info at [`:first selector`](http://api.jquery.com/first-selector/) – aug Apr 09 '15 at 20:29