Javascript- Chrome 扩展中的数据传递问题

Question

我创建了一个 javascript 函数并保存在 pop.js 个文件中。

这是我的 popup.html 文件：

<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 文件:


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


}

manifest.json 文件:

{
    "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"
    ]
}

理想情况下，只要我点击“验证”，我的函数就会被调用，我应该会弹出一个弹出窗口，其中应该显示在文本框中输入的值，但每当我点击 'verify' 时什么都没有发生在所有。我没有收到任何弹出框。

感谢您抽出宝贵的时间来解决我的问题。谢谢

Answer 1

有2个错误：

onclick 拼写为 onlick（尚不存在；）)
输入submit 将提交相关表格，使用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>

Javascript- Chrome 扩展中的数据传递问题

Problem in Data Passing in Javascript- Chrome Extension

javascript

textbox

google-chrome

google-chrome-extension

content-security-policy