Error retrieving highlighted text and passing it to popup.html

Question

SO I am trying to make a chrome extension. At the heart of it, this extension would select highlighted text from the current page, then the user would click on the extension popup, adjust a few variables (or not) and click to summmarize the text in question.

$(function() {
    $("#slider-range-min_niter")
        .slider({
            range: "min",
            value: 40,
            min: 1,
            max: 700,
            slide: function(event, ui) {
                $("#amount_iter").val(ui.value);
            }
        });
    $("#amount_iter").val($("#slider-range-min_niter").slider("value"));
});


$(function() {
    $("#slider-range-min_df")
        .slider({
            range: "min",
            value: 85,
            min: 1,
            max: 100,
            slide: function(event, ui) {
                $("#amount_df").val(ui.value);
            }
        });
    $("#amount_df").val($("#slider-range-min_df").slider("value"));
});


$(function() {
    $("#slider-range-min_delta")
        .slider({
            range: "min",
            value: 50,
            min: 1,
            max: 100,
            slide: function(event, ui) {
                $("#amount_delta").val(ui.value);
            }
        });
    $("#amount_delta").val($("#slider-range-min_delta").slider("value"));
});


$(function() {
    $("#slider-range-min_aot")
        .slider({
            range: "min",
            value: 50,
            min: 1,
            max: 100,
            slide: function(event, ui) {
                $("#amount_summmary").val(ui.value);
            }
        });
    $("#amount_summmary").val($("#slider-range-min_aot").slider("value"));
});

chrome.tabs.executeScript({
    code: "window.getSelection().toString();"
}, function (selection) {
    console.log(selection[0]);
});

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Text Summarizer</title>
    <link rel="stylesheet" href="jquery-ui.css">
    <script src="jquery-1.12.4.js"></script>
    <script src="jquery-ui.js"></script>
    <script src="popup.js"></script>
    <script type="text/javascript" src="summarizer.js"></script>
    <script type="text/javascript" src="driver.js">

    
    </script>
    <script src="extras.js" type="text/javascript"></script>
</head>
<body>
<div>
    <p>
        <label style="font-weight: bold" for="amount_iter"># Iterations:</label>
        <input type="text" id="amount_iter" readonly style="border: 0; color: #f6931f; font-weight: bold;">
    </p>

    <div id="slider-range-min_niter" style="width: 200px"></div>
</div>
<div>
    <p>
        <label style="font-weight: bold" for="amount_df">% Damping factor:</label>
        <input type="text" id="amount_df" readonly style="border: 0; color: #f6931f; font-weight: bold;">
    </p>

    <div id="slider-range-min_df" style="width: 200px"></div>
</div>
<div>
    <p>
        <label style="font-weight: bold" for="amount_delta">% Delta:</label>
        <input type="text" id="amount_delta" readonly style="border: 0; color: #f6931f; font-weight: bold;">
    </p>

    <div id="slider-range-min_delta" style="width: 200px"></div>
</div>

<div>
    <p>
        <label style="font-weight: bold" for="amount_summmary">% Original Text:</label>
        <input type="text" id="amount_summmary" readonly style="border: 0; color: #f6931f; font-weight: bold;">
    </p>

    <div id="slider-range-min_aot" style="width: 200px"></div>
</div>

<div id="summarize" style="font-weight: bold; margin: 10%; text-align: center;" class="ui-button ui-widget ui-corner-all">
    Summarize Highlighted Text
</div>
</body>
</html>

However, my big problem is I am unable to get the selected text from the current tab. I have tried a lot of suggestions provided by stackoverflow: Chrome Extension get selected text How to get selected text in chrome extension development? Chrome Extension: how to capture selected text and send to a web service Get selected text in a chrome extension

{
  "manifest_version": 2,

  "name": "Text Summarizer",
  "description": "This extension demonstrates a browser action with kittens.",
  "version": "1.0",

  "permissions": [
    "activeTab",
     "clipboardRead"
  ],
  "background": {
    "scripts": ["background.min.js"]
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "js": ["polyfill.min.js", "ext.min.js"],
      "run_at": "document_end"
    }
  ],
  "browser_action": {
    "default_icon": "img/icon.png",
    "default_popup": "popup.html"
  }
}

But none of these seem to work in my case. Any help would be greatly appreciated! Whjat I get outputted in console is

Your code outputs the selection in popup's devtools console (rightclick the popup and choose Inspect to see it). Make sure you have required permissions in manifest.json (you should add it to the question). — wOxxOm, Jan 05 '17 at 16:01
My manifest.json looks like:{ "manifest_version": 2, "name": "Text Summarizer", "description": "This extension demonstrates a browser action with kittens.", "version": "1.0", "permissions": [ "activeTab", "clipboardRead" ], "background": { "scripts": ["background.min.js"] }, "content_scripts": [ { "matches": ["http://*/*", "https://*/*"], "js": ["polyfill.min.js", "ext.min.js"], "run_at": "document_end" } ], "browser_action": { "default_icon": "img/icon.png", "default_popup": "popup.html" } } — woofwoof, Jan 05 '17 at 16:05
Please provide a *manifest.json*. [Edit] it into the question. Please explicitly state the filename of your JavaScript and HTML. What *exactly* happens when you try it? What *exactly* is shown in the [various appropriate consoles for your extension](http://stackoverflow.com/a/38920982/3773011) when you load and execute your extension? — Makyen, Jan 05 '17 at 16:06
That is a very different error. Thank you for the help! How do I upvote? — woofwoof, Jan 05 '17 at 16:55
@wOxxOm how can you tell? According to me and the screenshot, it is a popup's consol.e Look on the dev tools title. It is loaded from the extensions URI namespace. Also, the page that accepts content script have no idea that the popup.html page even exists. — Pawel Uchida-Psztyc, Jan 06 '17 at 13:15
After cleaning the code so it can be reproduced (removing unnecessary markup and script that author of the question has on his machine) I can only say that it worked. Maybe your code that you are loading to the page somehow clears the selection before your content script gets it? Are you sure the selection is still there when you open the popup? — Pawel Uchida-Psztyc, Jan 06 '17 at 13:23
@PawełPsztyć, obviously the question was edited as per my comment :-) — wOxxOm, Jan 06 '17 at 15:10

Error retrieving highlighted text and passing it to popup.html

0 Answers0