在 Chrome 扩展程序中加载 JavaScript答案

【问题标题】：Loading JavaScript in a Chrome Extension在 Chrome 扩展程序中加载 JavaScript
【发布时间】：2026-01-04 14:50:01
【问题描述】：

这是我在 SO 上的第一篇文章，也是我第一次制作 Chrome 扩展程序。我已经阅读了很多文档，但我仍然不确定如何让它工作。下面是我的 html 和 js 文件。我希望能够在源框中输入一些内容，并在结果区域中实时打印出单词。我已经在本地主机上测试了这段代码，所以我知道它可以工作，但由于某种原因，它充当了 chrome 扩展。

popup.html

<!doctype html>
<html>
<head>
<title>Getting Started Extension Popup</title>
<style>
  body {
  min-width: 357px;
  overflow-x: hidden;
  }

img {
   margin: 5px;
   border: 2px solid black;
   vertical-align: middle;
   width: 75px;
   height: 75px;
}
</style>

<script src="popup.js"></script>

</head>
<body>

<textarea id="source"></textarea>

<div id="result">
</div>

</body>
</html>

这是 js：

 function main() {
  document.getElementById('source').keydown(function() {
    var source = document.getElementById('source').value;
    var outputValue = source.replace(/command/gi, "⌘")
                            .replace(/tab/gi, "⇥")
                            .replace(/return/gi, "⏎")
                            .replace(/option/gi, "⌥")
                            .replace(/control/gi, "⌃")
                            .replace(/esc/gi, "⎋")
                            .replace(/left/gi, "←")
                            .replace(/down/gi, "↓")
                            .replace(/up/gi, "↑")
                            .replace(/right/gi, "→")
                            .replace(/shift/gi, "⇧")
                            .replace(/eject/gi, "⏏")
                            .replace(/caps\s\(lock\)/gi, "⇪")
                            .replace(/save/gi, "⌘ + S")
                            .replace(/print/gi, "⌘ + P")
                            .replace(/find/gi, "⌘ + F");
  document.getElementById("result").innerHTML = outputValue;
 } 
}

【问题讨论】：

纯js中没有element.keydown(function() { ... })这样的东西。使用element.addEventListener("keydown", function(e) { ... }); 如果这是您对DOM 的自定义扩展，那么问题中发布的代码不足以诊断问题。也不清楚究竟发生了什么。您可以编辑问题并添加 manifest.json 吗？而且我认为整个扩展 zip 的链接将有助于对其进行实时测试。
非常感谢。我解决了这个问题。我认为keydown是JS的东西。我已经习惯了 jQuery，仅此而已
利用开发工具debugger，您可以通过设置断点和/或单步执行代码（F10/F11 键）并检查周围的上下文（选择任何可以在当前执行的函数链中计算并悬停鼠标的表达式）。

标签： javascript html google-chrome google-chrome-extension

【解决方案1】：

1) wOxxOm 在评论中所说的：element.keydown(function() { ... }) 不存在。这肯定来自一些 jQuery 代码——如果你将它添加到你的扩展中，你可以使用它，或者你可以use addEventListener。

2) 你声明了一个函数main()，但没有人调用它。调用它的好地方是document 上的DOMContentLoaded 事件监听器：

document.addEventListener("DOMContentLoaded", main);

function main() {
  /* ... */
}

【讨论】：

谢谢！您和 wOxxOm 的解决方案和解释很到位！谢谢！ :)
@RaquelHosein 顺便说一句，在扩展中使用 jQuery 没有任何问题 - 只需确保包含它的副本，而不是尝试从 CDN 加载它。