I'm trying to access HTML elements with content scripts, however I get undefined on innerText although using run_at: document_end in manifest.json.

My manifest.json:

{
  "manifest_version": 2,
  "name": "my extension",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
      {
        "matches": ["http://127.0.0.1:8000/*"],
        "js": ["jquery.js", "script.js"],
        "run_at": "document_end"
      }
  ]
}

script.js:

var address = $('.house span').innerText;                         
alert(address);

The webpage on http://127.0.0.1:8000 has a div with class house and a span element in it. The alert returns undefined, but when using it in the console it returns the actual innerText.

I'm trying to access HTML elements with content scripts, however I get undefined on innerText although using run_at: document_end in manifest.json.

My manifest.json:

{
  "manifest_version": 2,
  "name": "my extension",
  "browser_action": {
    "default_popup": "popup.html"
  },
  "permissions": [
    "activeTab"
  ],
  "content_scripts": [
      {
        "matches": ["http://127.0.0.1:8000/*"],
        "js": ["jquery.js", "script.js"],
        "run_at": "document_end"
      }
  ]
}

script.js:

var address = $('.house span').innerText;                         
alert(address);

The webpage on http://127.0.0.1:8000 has a div with class house and a span element in it. The alert returns undefined, but when using it in the console it returns the actual innerText.

• javascript
• jquery
• google-chrome
• google-chrome-extension
• content-script

1 Answer 1

innerText is not a property of jquery. use text or html method as per requirement

var address = $('.house span').text();   
var address = $('.house span').html();   
var address = $('.house span')[0].innerHTML;