Question

我正在做我的第一个chrome扩展，需要从一个表中提取数据并将其添加到popup.html页面的字段中。我需要使用jquery来做到这一点。

如何从当前选项卡中按ID访问element.innerHTML并将其添加到弹出页面。

我设置了一个带有表格的测试页，这些表格的TD标签具有唯一的ID。

host.docker.internal

我需要从ID =” field1a”的文本中提取一个文本，并将其添加到popup.html页面的表单中。

这是我的代码。 manifest.json

<tr>
<td><div id="field1a">Data Block 1-A</div></td>
<td><div id="field2a">Data Block 2-A</div></td>
<td><div id="field3a">Data Block 3-A</div></td>
<td><div id="field4a">Data Block 4-A</div></td>
</tr>

popup.html

{
  "manifest_version": 2,
  "name": "Harvesting Data 8.",
  "version": "1.8",
  "description": "Pull text from select fileds.",
  "icons": {
    "128": "img/icon128.png",
    "48": "img/icon48.png",
    "16": "img/icon16.png"
  },
  "browser_action": {
    "default_icon": "img/icon16.png",
    "default_popup": "popup.html"
  },
  "options_page": "options.html",
  "permissions":[
    "activeTab",
    "storage"
  ],
    "content_scripts": [{
      "matches": [
        "https://www.steampunkferret.com/*"
      ],
      "js": ["scripts/background.js"]
    }]
  }

background.js

<!DOCTYPE html>
</html lang="en">
<head>
  <meta charset="utf-8" />
  <title>Harvester</title>
  <link rel="stylesheet" type="text/css" href="css/style.css" />
  <script src="scripts/popup.js"></script>
</head>
<body>
   <button type="button" class="harvestButton" id="harvestButton" wdith="100%">Harvest Data</button>
   <br />
   <br /><form class="" action="https://www.steampunkferret.com/" target="_blank" method="post">
     User ID:<input type="text" id="userID"><br /><br>

    Data Block 1-A: <input type="text" id="field1Text"><br /><hr>
    Data Block 2-B: <input type="text" id="field2Text"><br /><hr>
    Data Block 3-C: <input type="text" id="field3Text"><br /><hr>
    Data Block 4-D: <input type="text" id="field4Text"><br /><hr>
    Data Block 2-D: <input type="text" id="field5Text"><br /><hr>
    Data Block 4-A: <input type="text" id="field6Text"><br /><hr>
     <input type="submit" id="submitButton" value="Submit Data">
   </form>
</body>

</html>

popup.js

chrome.runtime.onMessage.addListener(gotMessage);

  function gotMessage(message, sender, sendResponse){
    alert("Background Script Called.");
  }

我知道我要问很多，但我刚刚开始进行chrome扩展，现在我要这样做，所以如果您能帮助我，我会很感激。我一直在网上查看，看到一些使用Jquery或类似示例的示例。我想在我可以编写的HTM / JAVASCRIPT / CSS中做到这一点。

Answer 1

最好以其他方式调用内容脚本（而不是background.js），因为还有实际的后台脚本...您需要将页面dom访问代码移动到内容脚本中的消息处理程序中-仅从那里您可以访问页面dom。然后，您将需要通过调用sendResponse来回复弹出式窗口的初始请求并提供数据。可以使用chrome.tabs.sendMessage从弹出窗口进行初始呼叫和chrome.tabs.query({ active: true, currentWindow: true }, (tabs)=>{...})找到一个活跃的人。

PS：并且由于要填充输入字段，所以最好使用textContent而不是innerHtml。

创建一个Chrome扩展程序，该扩展程序将从主页面抓取文字并将其添加到弹出页面，

1 个答案: