时间戳

首页 > 解决方案 > 无法访问 chrome 扩展中的文本输入元素

javascript - 无法访问 chrome 扩展中的文本输入元素

问题描述

（我是 chrome 扩展开发和 StackOverflow 的相对初学者，所以请耐心等待）

我有一个 chrome 扩展，在弹出窗口中有一个文本输入。我正在尝试从输入字段获取“实时”文本数据馈送。

我的 JS (popup.js) 和 HTML (popup.html)：

window.addEventListener('load', function(evt) {

  document.getElementById("input_field").onkeyup = function() {
    let inputValue = document.getElementById("input_field").value;
    alert(inputValue);
    someAction(inputValue);
  }

});
<html>

<head>
  <meta charset='utf-8'>
</head>

<body>

  <input type="text" id="input_field" placeholder="Blank"/>

  <div id = "root">
    <p> Some Text </p>
  </div>

</body>

</html>

我的清单.json：

{
"name": "SampleFormApp",
"version": "1.0",
"description": "Sample Text",
"manifest_version": 2,
"browser_action": {
    "default_icon": "assets/icon.png",
    "default_title": "Sample",
    "default_popup": "src/html/popup.html"
},
"background": {
  "scripts": ["src/js/popup.js"],
  "persistent": false
},
"permissions": ["storage", "unlimitedStorage", "tabs", "<all_urls>"],
"content_scripts": [{
    "matches": ["<all_urls>"],
    "css": ["src/css/styles.css"]
}]

}

但是，当我尝试运行扩展程序时，我在调试日志中收到此错误： Uncaught TypeError: Cannot set property 'onkeyup' of null (from this line: document.getElementById("input_field").onkeyup = function() { ）。

据我了解，扩展页面（popup.html）中的“input_field”元素为空，这给了我一个错误。我应该怎么做才能解决这个问题？（我对 jQuery 也不太熟悉。）

标签： javascripthtmlgoogle-chromegoogle-chrome-extension

解决方案

正如评论中所说的 wOxxOm，我删除了 manifest.json 中的后台脚本部分，并添加了一个标准的 src 标签 (src=popup.js)。

推荐阅读