Search code examples
javascriptgoogle-chromegoogle-chrome-extensiontextboxcontent-security-policy

Problem in Data Passing in Javascript- Chrome Extension

I have created a javascript function which I saved in pop.js files.

here is my popup.html file:

<html>
<head>
    
<title>News Verifier</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="popup.js"></script>


<body>
    <div class="popupbox">
        <img src="NV.png" alt="Logo" width="100" height="100" class="image">
        <h1>News Verifier</h1>
        <form>
            <p class="instruct">Copy and paste the news below</p>
            
            <textarea id="news" class="input" name="paragraph_text" cols="50" rows="10" placeholder="Paste here"></textarea>
            <br><br><br>
            <input  type="submit" class="button"  onlick="GetResult();" value="Verify">            
            <br><br>

           
            
        </form>
        
    </div>

</body>
</head>
</html>

popup.js file:


function GetResult()
{
                    var news = document.getElementById('news').value;
                    alert(news);


}

manifest.json file:

{
    "manifest_version": 2,

    "name": "News Verifier",
    "description": "This extension Prints the news entered in textbox",
    "version": "1.0",
    "background": {
        "scripts": ["popup.js"],
        "persistent": false
    },
    "icons": {
        "128": "NV.png",
        "48": "NV.png",
        "16": "NV.png"
    },

    "browser_action": {
        "default_icon": "NV.png",
        "default_popup": "popup.html"
    },



    "permissions": [
        "storage",
        "notifications",
        "contextMenus"
    ]
}

Ideally whenever I should I click on "Verify", my function should get called and I should get a pop up in which value entered in the text box should be shown but whenever I click on 'verify' nothing happens at all. I am not getting any popup box.

Thank you for giving you an important time for my problem. Thanking you

Solution

  • There are 2 mistakes:

    • onclick is spelled onlick (that is not existing yet ;) )
    • type submit for an input will submit the related form, use type='button'

    function GetResult() {
  var news = document.getElementById('news').value;
  alert(news);
}
    <html>
<head>
    
<title>News Verifier</title>
    <link rel="stylesheet" type="text/css" href="style.css">
    <script src="popup.js"></script>


<body>
    <div class="popupbox">
        <img src="NV.png" alt="Logo" width="100" height="100" class="image">
        <h1>News Verifier</h1>
        <form>
            <p class="instruct">Copy and paste the news below</p>
            
            <textarea id="news" class="input" name="paragraph_text" cols="50" rows="10" placeholder="Paste here"></textarea>
            <br><br><br>
            <input class="button" type="button" onclick="GetResult();" value="Verify">            
            <br><br>

           
            
        </form>
        
    </div>

</body>
</head>
</html>