Question

我最近开始学习chrome ext。我正在遇到这个问题。基本上我只是想把一个字符串转换成相应的数字。例如a = 1，b = 2，c = 3 ......等等。因此，如果我正在尝试使用html表单来获取输入字符串，然后在提交按钮上使用onclick，我希望我的javascript文件将字符串转换为数字并在同一输入文本框上打印出值。 / p>

这是我当前的代码，如果我通过使用提示获得输入，它工作正常。我的问题是如何调用onclick，因为清单版本2限制内联js。

清单

{
  "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（我只是从教程中复制并粘贴它并修改它）

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;

}

谢谢！

Answer 1

将此按钮代码放在您想要按钮的位置：

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

并在popup.js中添加这些行以收听上方按钮的点击事件。

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

chrome扩展和javascript提交表单

1 个答案: