我正在开发一个chrome扩展程序，该扩展程序接受选定的文本并将该文本用作api请求中的参数。我有一个popup.html文件，该文件调用popup.js，并且可以按预期的方式工作。

要求将结果显示为选择单词的叠加层，而不是chrome扩展名图标的弹出窗口。

我已经设法使覆盖图显示突出显示的文本，但是我正在努力使覆盖图构建html。

我认为，如果我能够构建html，那么我应该能够将所选文本输入api并将每个项目链接到id。

附加的是content.js文件，该文件显示叠加层，然后显示我要构建的代码或类似的代码。

content.js

// Add bubble to the top of the page.
var bubbleDOM = document.createElement('div');
bubbleDOM.setattribute('class','selection_bubble');
bubbleDOM.setattribute('id','bubble_id');



document.body.appendChild(bubbleDOM);

// Lets listen to mouseup DOM events.
document.addEventListener(
  'mouseup',function(e) {
    var selection = window.getSelection().toString();


    if (selection.length > 0) {

      selection = selection + ' this is some text';

      renderBubble(e.clientX,e.clientY,selection);
    }
  },false
);

// Close the bubble when we click on the screen.
document.addEventListener(
  'mousedown',function(e) {
    bubbleDOM.style.visibility = 'hidden';
  },false
);

// Move that bubble to the appropriate location.
function renderBubble(mouseX,mouseY,selection) {
  bubbleDOM.innerHTML = selection;
  bubbleDOM.style.top = mouseY + 'px';
  bubbleDOM.style.left = mouseX + 'px';
  bubbleDOM.style.visibility = 'visible';
}

我正在尝试编写的代码

<div>
      <div class="card">
      <div class="card-body">
        <h5 class="card-title" id="supplier1"></h5>
        <p class="card-text"><span id="city1"></span>,<span id="state1"></span> <span id="country1"></span></p>
        <p class="card-text" >DUNS# <span id="duns1"></span></p>
        <p class="card-text" >CEO: <span id="ceo1"></span></p>
        <!-- <a href="https://test-kys.live.beroeinc.com/confirm/${ceo1}" class="btn btn-primary">Risk Report</a> -->
        <a id="riskReport1" class="btn btn-primary" target="_blank">Risk Report</a>
      </div>
    </div>
    </div>
    <div>
      <div class="card">
      <div class="card-body">
        <h5 class="card-title" id="supplier2"></h5>
        <p class="card-text"><span id="city2"></span>,<span id="state2"></span> <span id="country2"></span></p>
        <p class="card-text">DUNS# <span id="duns2"></span></p>
        <p class="card-text">CEO: <span id="ceo2"></span></p>
        <a id="riskReport2" class="btn btn-primary" target="_blank">Risk Report</a>
      </div>
    <div>
      <div class="card">
      <div class="card-body">
        <h5 class="card-title" id="supplier3"></h5>
        <p class="card-text"><span id="city3"></span>,<span id="state3"></span> <span id="country3"></span></p>
        <p class="card-text">DUNS# <span id="duns3"></span></p>
        <p class="card-text">CEO: <span id="ceo3"></span></p>
        <a id="riskReport3" class="btn btn-primary" target="_blank">Risk Report</a>
      </div>
      <div>
      <div class="card">
      <div class="card-body">
        <h5 class="card-title" id="supplier4"></h5>
        <p class="card-text"><span id="city4"></span>,<span id="state4"></span> <span id="country4"></span></p>
        <p class="card-text">DUNS# <span id="duns4"></span></p>
        <p class="card-text">CEO: <span id="ceo4"></span></p>
        <a id="riskReport4" class="btn btn-primary" target="_blank">Risk Report</a>
      </div>