1

I'm making a chrome extension to modify HTML on a page. Here's what I've got:

manifest.json

{
  "manifest_version": 2,

  "name": "Trello YouTube video embed",
  "version": "1.0",
  "description": "Embeds YouTube video players in Trello card descriptions based on links in the card description",
  "content_scripts": [{
    "js": ["embed.js"],
    "matches": ["https://trello.com/*"],
    "run_at": "document_end"
  }]
}

embed.js

var cardDesc = document.getElementsByClassName('current markeddown hide-on-edit js-card-desc js-show-with-desc');
console.log(cardDesc);
console.log('cardDesc === undefined : ' + (cardDesc === undefined).toString());
console.log('cardDesc[0] === undefined : ' + (cardDesc[0] === undefined).toString());
console.log('cardDesc.length : ' + cardDesc.length);

And here's a screenshot of the console: https://i.stack.imgur.com/2ytHJ.png

The problem is that the cardDesc is returning a length of 0 but I can clearly see an item in the HTMLCollection. Any suggestions of what I can do differently in order to manipulate the items in cardDesc?

derekantrican
  • 1,891
  • 3
  • 27
  • 57
  • Possible duplicate of [console.log() shows the changed value of a variable before the value actually changes](https://stackoverflow.com/questions/11284663/console-log-shows-the-changed-value-of-a-variable-before-the-value-actually-ch) – wOxxOm Jan 25 '18 at 19:59
  • Using `getElementsByClassName` will give you a live collection, the console may be showing you a rendered version based on data that is only available later – Paul S. Jan 25 '18 at 20:00

1 Answers1

0

Try to use document.querySelectorAll('.current.markeddown.hide-on-edit.js-card-desc.js-show-with-desc')

instead of document.getElementsByClassName

lmarqs
  • 1,469
  • 13
  • 16