3

I'm currently working on a chrome extension. It's a simple plugin that displays a popover over selected text. For a while, I was using a png image for the icon inside of the popover and window.getSelection() to get the text the user selected. Now, I'd like to use an embedded svg element for the icon. Before, my icon was embedded like this:

$("<div id='hili-wrapper'>" +
    "<div id='hili-popover-inner'>" +
    "<img id='hilimg'></img>" +
    "</div>" +
    "</div>"
).appendTo('body');

var imgURL = chrome.extension.getURL("img/white.png");
document.getElementById("hilimg").src = imgURL;

And now, it looks like this:

$("<div id='hili-wrapper'>" +
    "<div id='hili-popover-inner'>" +
    `<svg version="1.1"
         id="noted-icon"
         xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
         viewBox="0 0 165 165" style="enable-background:new 0 0 163.3 164.9;"
         xml:space="preserve">
      <path d="M161.8,57.1l-2.4-1.9c-0.2-0.2-0.4-0.3-0.6-0.4l-6.9-5.5l7.1-8.8c0.8-1,1.2-2.4,1.1-3.7c-0.1-1.3-0.8-2.5-1.8-3.4L118.1,1.1
        c-2.2-1.7-5.3-1.4-7,0.8L19,116.4c-0.8,1-1.2,2.4-1.1,3.7c0.1,1.3,0.8,2.5,1.8,3.4l4.9,3.9L1.1,156.5c-1.2,1.5-1.4,3.5-0.6,5.3
        c0.8,1.7,2.6,2.8,4.5,2.9l37,0.3c0,0,0,0,0,0c1.5,0,2.9-0.7,3.9-1.9l9.1-11.3l4.9,3.9c0.9,0.7,2,1.1,3.1,1.1c1.5,0,2.9-0.6,3.9-1.9
        L145,57.9l4.3,3.5l-35.4,44c-1.4,1.7-1.1,4.2,0.6,5.6l2.4,1.9c1.7,1.4,4.2,1.1,5.6-0.6l39.9-49.6C163.8,61,163.5,58.5,161.8,57.1z
         M39.6,154.9l-24.2-0.2l17-21.2l4,3.2l10.8,8.7L39.6,154.9z M62.2,144.8l-32.3-26l62.7-78l32.3,26L62.2,144.8z M99.6,32.1L115.7,12
        l32.3,26l-16.2,20.1L99.6,32.1z"/>
      </svg>` +
    "</div>" +
    "</div>"
).appendTo('body');

After changing this (and only this), window.getSelection() no longer returns the selected text, it always returns the last text node on the page. For example, while on this page: How to change color of SVG image using CSS (jQuery SVG image replacement)?, it always chooses "rev 2016.4.28.3523", which is in the footer, no matter what I actually select

enter image description here

I've looked around and right now, my working assumption is that something with the SVG DOM is screwing with how window.getSelection is finding the selection, but I have no idea if that's right and how to fix it if I am. Anyone have an idea what's going on?

Community
  • 1
  • 1
taylorc93
  • 3,676
  • 2
  • 20
  • 34
  • Have you tried reading this? http://stackoverflow.com/questions/15976993/inject-an-svg-image-using-a-content-script / http://stackoverflow.com/questions/11804332/insert-an-image-in-chrome-extension/11807411#11807411 – Android Enthusiast Apr 29 '16 at 14:38
  • @Xan The backticks are the new ES6 template literals (multi-line strings). I've already tried removing them and it doesnt make a difference – taylorc93 Apr 29 '16 at 14:47
  • Live and learn, thanks @taylorc93. – Xan Apr 29 '16 at 14:47
  • @d.datul1990 I did already see those questions and neither of them solve my issue – taylorc93 Apr 29 '16 at 14:54

0 Answers0