How to read data from popup DOM

Question

I made a very simple Chrome extension where what should happen is the user can enter a value into a text box, press a button, and have the entered value filled into page text box (or any other element).

So, I have

popup.html:

<!doctype html>
<html>
  <head>
    <title>Getting Started Extension's Popup</title>
    <script src="popup.js"></script>
  </head>
  <body>
    <textarea type="text" id="data-details" cols="40" rows="5"></textarea>
    <input type="button" id="btn-fill" value="Fill" />
  </body>
</html>

popup.js:

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("btn-fill").addEventListener("click", injectTheScript);
});

function injectTheScript() {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        chrome.tabs.executeScript(tabs[0].id, { file: "content_script.js" });
    });
}

content_script.js:

function fillElements()
{
    var dataDetailsStr = document.getElementById("data-details").value;

// error here : Uncaught TypeError: Cannot read property 'value' of null

    document.getElementById("txt-page-input").value = dataDetailsStr;

}

fillElements();

manifest.json:

{
  "manifest_version": 2,
  "name": "Fill Data",
  "description": "Fills data on the page",
  "version": "1.0",

  "permissions": [
    "activeTab",
    "http://*/*"
  ],
  "browser_action": {
    "default_icon": "img/icon.png",
    "default_popup": "popup.html"
  },
  "content_scripts": [{
    "matches": ["http://*/*"],
    "js": ["jquery.js", "content_script.js"]
   }]
}

document.getElementById ("data-details") always returns null. How to access this element, or how to write this correct? I'm new at this.

See also [How to access the webpage DOM rather than the extension page DOM?](//stackoverflow.com/a/4532567) — wOxxOm, Mar 08 '17 at 18:12
related: [Pass a parameter to a content script injected using chrome.tabs.executeScript()](http://stackoverflow.com/q/17567624) — Makyen, Mar 08 '17 at 22:05

score -1 · Answer 1 · answered Mar 08 '17 at 18:12

The problem is that the document.getElementById("data-details") is in the injected script and the browser search the object that has the id data-details in the page, not in popup.html So

popup.js

document.addEventListener('DOMContentLoaded', function () {
    document.getElementById("btn-fill").addEventListener("click", injectTheScript);
});

function injectTheScript() {
    chrome.tabs.query({ active: true, currentWindow: true }, function (tabs) {
        chrome.tabs.executeScript(tabs[0].id, { file: "content_script.js" });
        chrome.tabs.sendMessage(tabs[0].id, document.getElementById("data-details").value);
    });
}

content_script.js

function fillElements()
{
    chrome.runtime.onMessage.addListener(function(message) {
         document.getElementById("txt-page-input").value = message;
    });


}

fillElements();

Thank you, it works, but only after second time I press button "Fill" in popup and code executes twice... — ihorko, Mar 08 '17 at 18:54
@ihorko, move chrome.tabs.sendMessage inside a callback for executeScript, see the documention. Don't forget: most of chrome.* API is asynchronous. — wOxxOm, Mar 08 '17 at 19:09

How to read data from popup DOM

1 Answers1