Highlight All Words in Chrome Extension

I'm a beginner trying to create a chrome extension. In this extension, I want to have a popup.html file that has the button "highlight" on it. If the user clicks highlight all the words in the page should be highlighted.

Manifest

"browser_action": {
  "default_icon": "icon.png",
  "default_popup": "popup.html" 
},
"permissions": [
  "tabs", "activeTab"
]

Popup.html

<!DOCTYPE html> 
<html>
  <head>
    <script src="popup.js"></script>
  </head>
  <body>
    <button id="highlight">Highlight</button>
  </body>
</html>

popup.js

window.onload = function(){
  document.getElementById('highlight').onclick = highLight;
  function = highLight(){
   //How can I make all the text  highlighted
 }
};

How can I access the DOM so that each word is highlighted?

Thanks in advance!

Highlight All Words in Chrome Extension

2 Answers