CODEWITHSUNDEEP
javascripthtmlgoogle-chromeeventsextjs
Arno Nymo
Arno Nymo

Reputation: 39

Use javascript in chrome extension

I'm trying to create a test Chrome extension to enter some text in a textarea and alert it, whenever the user presses Enter.

My main.html: 

<html>
<head>
<script src="jquery.js"></script>
<script>

function doAlert(e){

    if(e.which == 13) {

        alert($('.myword').val());
        e.preventDefault();

    }

}

</script>
</head>
<body>
<textarea class="myword" onkeyup="doAlert(event)"placeholder="Fill me" rows="1" cols="32" style="resize: none;"></textarea>
</body>
</html>

Executing the file in a browser normally gives the expected results. But in my extension popup, I simply don't get a reply.

Please help. Thanks in advance.

Upvotes: 0

Views: 36

Answers (1)

yugandhar kamdi
yugandhar kamdi

Reputation: 214

Inline javascript won't work in chrome extension due to content security policy. You will have to create external js file. Put your "doAlert" function in some file alertTest.js Inline event handler also won't work. You will need to bind event handler in js file. e.g.

main.html

<html>
   <head>
      <script src="jquery.js"></script>
      <script src="alertTest.js"></script>
   </head>
   <body>
     <textarea class="myword" id="textBox" placeholder="Fill me" rows="1" cols="32" style="resize: none;"></textarea>
   </body>
</html>

alertTest.js

function doAlert(e){

    if(e.which == 13) {
       alert($('.myword').val());
       e.preventDefault();
    }
 }

 document.addEventListener('DOMContentLoaded', function () {
   document.getElementById('textBox').addEventListener('keyup', doAlert);

 });

Here is the documentation for the same : https://developer.chrome.com/extensions/contentSecurityPolicy#JSExecution

Upvotes: 1

Related Questions