CODEWITHSUNDEEP
javascriptformsgoogle-chromegoogle-chrome-extension
stenwolf
stenwolf

Reputation: 311

chrome extension and javascript submitting form

I recently started learning chrome ext. And I'm running in to this problem. Basically I'm just trying to convert a string into corresponding number. for example a=1, b=2, c=3... and so on. So if I'm trying to use a html form to get the input string, then using onclick on the submit button, I want my javascript file to convert the string to the number and print out the value on that same input text box.

This is my current code, it is working fine if I get the input by using prompt. My question is how do I call the onclick because manifest version 2 is restricting inline js.

Manifest

{
  "name": "String converter",
  "version": "1.0",
  "manifest_version": 2,
  "description": "Convert string to number",
  "browser_action": {
    "default_icon": "icon.ico",
    "default_popup": "popup.html"
  }

}

Popup.html:

<!doctype html>
<html>
<head>
 <title>Convert string</title>
    <style>
     body {
        min-width:160px;
        overflow-x:hidden;
      } 
    </style>
    <script src="popup.js"></script>
</head>
<body>
    <input type="text" id="result" />
    <!--I need the button here-->
</body>
</html>

popup.js (i just copy and paste this from a tutorial and modify it)

var req = new XMLHttpRequest();
req.open(
    "GET",
    "http://api.flickr.com/services/rest/?" +
        "method=flickr.photos.search&" +
        "api_key=90485e931f687a9b9c2a66bf58a3861a&" +
        "text=hello%20world&" +
        "safe_search=1&" +  // 1 is "safe"
        "content_type=1&" +  // 1 is "photos only"
        "sort=relevance&" +  // another good one is "interestingness-desc"
        "per_page=20",
    true);
req.onload = test;
req.send(null);


function test(){
    var s=prompt("enter string");
    var result ="";
    for(var i =0; i<3; i++){
        if(s.charAt(i) == "a"){
            result += "1"
        }
        else if(s.charAt(i) == "b"){
            result += "2"
        }
        else if(s.charAt(i) == "c"){
            result += "3"
        }

    document.getElementById("result").value = result;

}

Thank you!

Upvotes: 3

Views: 4280

Answers (1)

Raza Ahmed
Raza Ahmed

Reputation: 2751

place this button code where u want button: 

<button id='sbmt'>Submit</button>

and in popup.js add these lines to listen to click events of above button.

function myAlert(){
 alert('Button Clicked');
}
document.addEventListener('DOMContentLoaded', function () {
document.getElementById('sbmt').addEventListener('click', myAlert);
});

Upvotes: 1

Related Questions