检索突出显示的文本并将其传递给popup.html

时间:2017-01-05 15:49:09

标签: javascript google-chrome-extension

所以我正在尝试进行chrome扩展。在它的核心,此扩展将从当前页面中选择突出显示的文本,然后用户将单击扩展弹出窗口,调整一些变量(或不调整)并单击以汇总所讨论的文本。



$(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>
&#13;
&#13;
&#13;

然而,我的大问题是我无法从当前标签中获取所选文本。我已经尝试了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"
  }
}

但这些似乎都不适用于我的情况。任何帮助将不胜感激!我在控制台输出的内容是

enter image description here

0 个答案:

没有答案