how can i fire up contentscript

Question

i got a simple question i have these3 files popup.html :

<script>
    function buttonClicked(button) 
    {
        chrome.extension.sendRequest({command:button.id});
    }
</script>
    <input style="width:100%" type="button" value="Click me" id="click" onclick="buttonClicked(this)"/><br/>

background.html :

<script>
    function processRequest(request, sender, sendResponse) 
    {
        alert('hi');
        sendResponse({});
    }
    chrome.extension.onRequest.addListener(processRequest);
</script>

and contentscript.js

s = document.getElementsByClassName('st');
if (s[0].innerText != '') { 
st = new Array(); 
for (i = 0;i<s.length;i++) {
    st[i] = s[i].innerText;
}
chrome.extension.sendMessage({"message" : st}, function(response) {});
}

i would like to fire up the contentscript each time i click on the button in the popup page be cause somehow the script in the contentscript dosnt work neither or background.html nor on popup.html?

thank you

Answer 1

I've attempted to explain the solution and why to use it in the comments, three times. Since you don't understand it, I'll explain it again with references to your code:

Popup

• Move the inline script to an external file, say popup.js.
• Delete the inline event listener, and also move it to popup.js.

popup.js

function buttonClicked(button) {
    chrome.extension.sendRequest({command: button.id});
}
document.getElementById('click').addEventListener('click', function() {
    buttonClicked(this);
});

popup.html

<script src="popup.js"></script>
<input style="width:100%" type="button" value="Click me" id="click"><br>

If you test the previous code, you'll notice that it does not work. That's because the contents of popup.js is executed before the button (which occurs after the <script src> is created. This can be solved in two ways (use either method, but not both):

• Recommended: Place <script src="popup.js"></script> before the closing </body> tag in popup.html. Then, you're certain that all elements do exist when the script is executed.

• Alternative: Wrap the event listener call in a DOMContentLoaded event:

  document.addEventListener('DOMContentLoaded', function() {
      document.getElementByUd('click').addEventListener( ... );
  });
  

Background page.

For a more thorough explanation on the available options, see the middle of this answer.

• Modify the manifest file, use "background": {"scripts": ["background.js"]}.
• Rename background.html to background.js, and remove <script> and </script> from the file.