google-chrome-extension - 创建一个 Chrome 扩展程序，该扩展程序将从主页中抓取文本并将其添加到弹出页面，

问题描述

我正在制作我的第一个 chrome 扩展，需要从一个表中提取数据并将其添加到 popup.html 页面的字段中。我需要在没有 jquery 的情况下做到这一点。

如何通过 ID 从当前选项卡访问 element.innerHTML 并将它们添加到弹出页面。

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

<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>

我需要将 ID=”field1a” 中的文本作为主页面并将其添加到 popup.html 页面上的表单中。

这是我的代码。 清单.json

{
  "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"]
    }]
  }

popup.html

<!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>

背景.js

chrome.runtime.onMessage.addListener(gotMessage);

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

popup.js

document.addEventListener('DOMContentLoaded', function() {
  document.getElementById('harvestButton').addEventListener('click', harvesting);
});

function harvesting() {
  getUserID();
  pulledDataFromMainPage();
}


//setUserID() set the User UserID.
function getUserID() {
  //alert('popup_js.myFunction() called');
  chrome.storage.sync.get(['sfUserID'], function(chromInfo) {
    document.getElementById('userID').value = chromInfo.sfUserID;
  })
}

//This part will need to access the DOM of the page www.ferretforce.com/salesforce and pull text valus then add them to the popup.html form.
function pulledDataFromMainPage(){
  alert('popup_js.pulledDataFromMainPage() called');
  var field1 = document.getElementById('field1a').innerHTML;
  var field2 = document.getElementById('field2b').innerHTML
  var field3 = document.getElementById('field3c').innerHTML;
  var field4 = document.getElementById('field4d').innerHTML;
  var field5 = document.getElementById('field2d').innerHTML;
  var field6 = document.getElementById('field4a').innerHTML;

  document.getElementById('field1Text').value = field1;
  document.getElementById('field2Text').value = field2;
  document.getElementById('field3Text').value = field3;
  document.getElementById('field4Text').value = field4;
  document.getElementById('field5Text').value = field5;
  document.getElementById('field6Text').value = field6;

}

我知道我问了很多，但我刚开始制作 chrome 扩展程序，我现在就是这样做的，所以如果你能提供帮助，我会很高兴。我一直在网上查看一些使用 Jquery 或类似内容的示例。我想在我可以编写的 HTM/JAVASCRIPT/CSS 中执行此操作。

标签： google-chrome-extension

google-chrome-extension - 创建一个 Chrome 扩展程序，该扩展程序将从主页中抓取文本并将其添加到弹出页面，

问题描述

解决方案

推荐阅读