在html弹出窗口中显示用户选定的文本,并在chrome extension

时间:2018-04-16 15:03:43

标签: google-chrome google-chrome-extension google-chrome-devtools

我有一个后台脚本,在点击chrome图标时触发:

background.js:

chrome.browserAction.onClicked.addListener(function (tab) {
    console.log("chrome.browserAction.onClicked...." + tab);
    var openSeleniumEditor = window.open(
        chrome.extension.getURL("Editor.html"),
        "Words Misspelled",
        "width=600,height=400"
    );
});

我的目标是收集文章中需要更正的所有字词。用户从当前页面中选择文本,内容脚本应该收集该文本并附加到编辑器中的列表中。与常规弹出窗口不同,Editor.html始终处于打开状态。当用户关闭此Editor.html时,Editor.html中的文本应保存到本地存储中,以便以后再引用。

content.js:

function getSelectedParagraphText() {
  if (window.getSelection) {
      selection = window.getSelection();
  } else if (document.selection) {
      selection = document.selection.createRange();
  }
  var parent = selection.anchorNode;
  while (parent != null && parent.localName != "P") {
    parent = parent.parentNode;
  }
  if (parent == null) {
    return "";
  } else {
    return parent.innerText || parent.textContent;
  }
}

Editor.html:

<!DOCTYPE html> 
<html>
  <head>
    <script src="Editor.js"></script>
    <style>
      body { width: 300px; }
      textarea { width: 250px; height: 100px;}
    </style>
  </head>
  <body>
    <textarea id="text"> </textarea>

  </body>
</html>

我想将Editor.html / Editor.js的代码保存在一个单独的文件夹中,以便我可以在每个浏览器中使用它。现在我如何调用/更新Editor.js或Editor.html以从content.js附加用户选择的文本?

0 个答案:

没有答案