使用chrome ext在右键单击的文本区域中编辑所选文本

Question

我对chrome扩展程序还很陌生，我想创建一个非常简单的扩展程序，将一段文本中的所有项目符号点更改为星号（*）。

这仅需要在一页上完成，并填写一个textarea元素。

用户通过表格为我们的网站提交了一篇文章，我们团队的成员批准了所有这些空缺。在此批准过程中，他们必须仔细检查并手动将每个项目符号更改为星号。理想情况下，他们只需要突出显示整个文本，右键单击并选择扩展名即可替换所有项目符号。

我已经使用Google提供的示例扩展程序之一进行了扩展。除了用编辑后的文本替换textArea中的所有文本之外，它还能完成我想做的所有事情。

我尝试调用函数onLoad，查找单击所注册的元素以及许多其他内容，但是我似乎无法使其正常工作。

manifest.json

  "name": "Replacing bullet points",
  "description": "put a desciption here",
  "version": "0.1",
  "permissions": ["contextMenus",
    "activeTab",
    "tabs",
    "<all_urls>"],
  "background": {
    "scripts": ["sample.js"]
  },
  "manifest_version": 2
}

sample.js

// Copyright (c) 2010 The Chromium Authors. All rights reserved.
// Use of this source code is governed by a BSD-style license that can be
// found in the LICENSE file.

function replaceOnClick(info, tab) {
  var uneditedText = info.selectionText;
  var detailsField = document.getElementById("element ID which definitely exists");

  console.log("highlighted text: " + uneditedText);
  var bulletPointsReplaced = uneditedText.replace(/[\u2022\u2023\u25E6\u2043\u2219]/g, "*");
  console.log("all done: " + bulletPointsReplaced);

  detailsField.value = bulletPointsReplaced; // doesn't work as ID returns null
}


var context = "selection";
var title = "Test '" + context + "' menu item";
var id = chrome.contextMenus.create({"title": title, "contexts":[context],"onclick": replaceOnClick});

任何帮助将不胜感激！我敢肯定这是一个简单的解决方法，但我一生都无法理解。

编辑：本质上，我只是想知道如何找到我在其中选择文本的元素的ID，然后替换该元素中的文本