title: Simple highlight text chrome extension
body: <p>I'm trying to make the most simple Chrome extension ever, but alas, I'm having big issues, would appreciate some help.</p>
  
  <p>This is what I want it to do:</p>
  
  <p>I select some text on a page and press the extension popup. When I do that, the background-color of the selected text is changed to yellow. When I click somewhere else (and the text is deselected) the background-color is removed.</p>
  
  <p>How do I do that?</p>
  
  <p>I found this code around here:</p>
  
  <pre><code>function makeEditableAndHighlight(colour) {
      var range, sel = window.getSelection();
      if (sel.rangeCount &amp;&amp; sel.getRangeAt) {
          range = sel.getRangeAt(0);
      }
      document.designMode = "on";
      if (range) {
          sel.removeAllRanges();
          sel.addRange(range);
      }
      // Use HiliteColor since some browsers apply BackColor to the whole block
      if (!document.execCommand("HiliteColor", false, colour)) {
          document.execCommand("BackColor", false, colour);
      }
      document.designMode = "off";
  }
  
  function highlight(colour) {
      var range, sel;
      if (window.getSelection) {
          // IE9 and non-IE
          try {
              if (!document.execCommand("BackColor", false, colour)) {
                  makeEditableAndHighlight(colour);
              }
          } catch (ex) {
              makeEditableAndHighlight(colour)
          }
      } else if (document.selection &amp;&amp; document.selection.createRange) {
          // IE &lt;= 8 case
          range = document.selection.createRange();
          range.execCommand("BackColor", false, colour);
      }
  }
  </code></pre>
  
  <p>I don't really know how to work the background.js and the popup.js and the context_script.js .</p>
  
  <p>I tried putting this code in the popup.js and calling it with <code>highlight('yellow')</code> but it didn't work. I also tried putting this code in the background.js and calling it from the popup.js with <code>chrome.extension.getBackgroundPage().highlight('yellow');</code> but it didn't work.</p>
  
  <p>In any case, even if this code works, it just changes the background-color of the selected text, but does not remove it when the text is de-selected.</p>
  
  <p>In any case, just getting this first bit to work would be a great help.</p>
  
  <p>In its current form, the code works like this: <a href="http://jsfiddle.net/LPnN2/12/" rel="noreferrer">http://jsfiddle.net/LPnN2/12/</a>
  The problem is getting it to work with an extension.</p>
  
  <p>This is my manifest.json:</p>
  
  <pre><code>{
     "background": {
        "scripts": [ "readit.js"]
     },
  
  
     "description": "Reads out selected text",
     "icons": {
        "128": "icon128.png",
        "16": "icon16.png",
        "48": "icon48.png"
     },
     "browser_action": {
        "default_icon": "icon48.png",
        "default_popup": "popup.html"
     },
  
     "content_scripts": [ {
     "js": [ "inject.js" ],
     "matches": [ "\u003Call_urls\u003E", "https://*/*" ]
     } ],
  
     "manifest_version": 2,
     "name": "Speak Me",
     "options_page": "options.html",
     "permissions": [ "contextMenus", "tabs", "notifications", "background" ],
     "update_url": "http://clients2.google.com/service/update2/crx",
     "version": "0.1"
  }
  </code></pre>
  
  <p>I already have the extension doing something else (using TTS to read-out loud selected text via an API, but would love the text to also be higlighted, hence why I'm trying to implement this).</p>