Question

我正在尝试为Chrome创建一个简单的串行端口阅读器。没什么大不了的，只是收到输入所以我可以解析它。我遇到了一些问题，jQuery在某一点上工作，但后来两行是“$ undefined”。

清单：

{
    "name": "Serial Reader",
    "description": "Read Serial barcode scanners with Google Chrome.",
    "version": "0.1",
    "manifest_version": 2,
    "app": {
        "background": {
            "scripts": ["background.js", "script.js", "jquery.js"],
            "transient": true
        }
    },
    "permissions": [
        "serial"
    ],
    "icons": { "16": "icon-16.png", "128": "icon-128.png" }
}

的script.js：


    var onGetDevices = function(ports) {
      for (var i=0; iNo ports were found.");
        } else {
            //Works
            $("#portList").append("" + ports[i].path + "");
        }
      }
    };
    chrome.serial.getDevices(onGetDevices);

    var connectionId = -1;
    var portSelected = $("#portList").val(); //Returns undefined $

    var connectCallback = function() { console.log("Connected") };

    chrome.serial.connect(portSelected, null , connectCallback);

    var stringReceived = '';

    var onReceiveCallback = function(info) {
        if (info.connectionId == expectedConnectionId && info.data) {
          var str = convertArrayBufferToString(info.data);
          if (str.charAt(str.length-1) === '\n') {
            stringReceived += str.substring(0, str.length-1);
            $('#member').val(onLineReceived(stringReceived));
            stringReceived = '';
          } else {
            stringReceived += str;
          }
        }
      };

    chrome.serial.onReceive.addListener(onReceiveCallback);

Background.js：

chrome.app.runtime.onLaunched.addListener(function() {
    chrome.app.window.create('window.html', {
        'bounds': {
            'width': 1024,
            'height': 768
        },
        "resizable": false
    });
});

Window.html：

<!DOCTYPE html>
<html>
    <head>
        <title>Serial Reader</title>
        <script type="text/JavaScript" src="jquery.js"></script>
        <style>
            body {
                background-image: url(/images/checkin_green.png);
            }
        </style>
    </head>

    <body>
        <center><strong style="font-size: 16px;">Account Number:</strong> &nbsp;&nbsp;&nbsp;&nbsp; <input id="member" /></center>
        <br /><br /><br />
        <center><strong style="font-size: 16px;">Avaliable Ports:</strong> &nbsp;&nbsp;&nbsp;&nbsp; <select id="portList"></select></center>
        <br />
        <center><span id="notFound"></span></center>

        <script type="text/JavaScript" src="script.js"></script>
    </body>
</html>

我已经玩了很长时间了，并且无法提出解决方案。我不明白它如何填充端口列表，但三行下来说它是未定义的。任何帮助将不胜感激！谢谢！

Answer 1

我认为问题在于，当您查询#portList时，DOM还没有完全准备好，所以它返回一个空列表，并且您正在尝试设置尚不存在的元素的值。

我怀疑在DOM准备好后调用onGetDevices，所以没有问题。考虑在$(document).ready(function(){ ... })

中包装DOM相关代码

另一个问题可能是您没有查询扩展程序的DOM，而是查询触发扩展程序的任何页面的DOM。

Answer 2

问题是脚本的实际清单加载。清单应如下所示：

{
    "name": "Serial Reader",
    "description": "Read Serial barcode scanners with Google Chrome.",
    "version": "0.1",
    "manifest_version": 2,
    "app": {
        "background": {
            "scripts": ["jquery.js", "background.js", "script.js"],
            "transient": true
        }
    },
    "permissions": [
        "serial"
    ],
    "icons": { "16": "icon-16.png", "128": "icon-128.png" }
}

说到这里，我把它放在这里只是为了参考。感谢@Wio的帮助

jQuery仅适用于Chrome App的某些区域

2 个答案: