Create a Chrome extension that will scrape text from main page and add it to a pop-up page,

Question

I am making my first chrome extension and need to pull data from one table and add it to the fields of a popup.html page. I need to do this with out jquery.

How do I access element.innerHTML by ID from current tab and add them to a popup page.

I setup a test page with tables were the TD tags have a unique ID’s.

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

I need to take the text from ID=” field1a” one the main page and add it to a form on the popup.html page.

Here is my code. manifest.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>

background.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;

}

I know I am asking a lot but I just started make chrome extension and I am now to this so if you can help I would apprciate it. I have been looking on line and see some examples that use Jquery or something like this. I would like to do this in HTM/JAVASCRIPT/CSS that i can write.

Here is the test page https://www.steampunkferret.com/salesforce/ — Lucard, Dec 10 '18 at 20:31
Your mistake is that pulledDataFromMainPage runs in your popup page, not in the web page. These are two different pages so you can't have access to both at the same time. You need to put it in the content script instead and pass the data via messaging. However, there's a much simpler approach via executeScript: [example1](https://stackoverflow.com/a/51729893), [example 2](https://stackoverflow.com/a/30380827). — wOxxOm, Dec 11 '18 at 05:32

Pavel Agarkov · Answer 1 · 2018-12-10T20:41:53.070

It might be better to call content script somehow else (not background.js) since there are also actual background scripts... You need to move your page dom access code into the message handler in your content script - only from there you can access the page dom. Then you will need to reply to popup's initial request with the data by calling your sendResponse. And the initial call can be made from popup with chrome.tabs.sendMessage and chrome.tabs.query({ active: true, currentWindow: true }, (tabs)=>{...}) to find an active one.

PS: and since you are populating input fields it is probably better to use textContent instead of innerHtml.

Thanks Pavel Agarkov for the help I will try this and see if it works or better yet see I can do ask you suggest. — Lucard, Dec 10 '18 at 20:40

Create a Chrome extension that will scrape text from main page and add it to a pop-up page,

1 Answers1