Chrome 扩展：如何正确地将脚本添加到 popup.html 并使用 localStorage [重复]答案

【问题标题】：Chrome Extension: how to correctly add script to popup.html and use localStorage [duplicate]Chrome 扩展：如何正确地将脚本添加到 popup.html 并使用 localStorage [重复]
【发布时间】：2019-06-25 22:12:01
【问题描述】：

我是 Javascript 新手，我现在正在开发 Chrome 扩展程序。此扩展程序必须为用户提供从 Vtiger CRM 页面创建 Trello Board 获取内容（用于董事会名称、成员等）的能力。

步骤：

在 Chrome 扩展中使用 Trello 登录（完成）
从 Vtiger CRM 页面解析内容
创建卡片

现在我可以从 settings.html 页面创建 Trello Card（无需解析 CRM 页面）。

但是当我尝试将“创建卡片”链接添加到 popup.html 时，将 popup.js 包含到 popup.html（包含处理点击链接的脚本），然后我点击此链接 - 没有任何反应。

这是我对该项目的第一个 PR：https://github.com/AnatolySt/chrome-roonyx/pull/1/files（包含通过 Trello 进行的 oauth 授权以及从设置页面创建卡片的能力）。

popup.html

<html>
<head>
    <meta charset="utf-8"/>
    <link rel="stylesheet" typ="text/css" href="css/style.css"/>
    <script src="scripts/jquery-2.1.1.js"></script>
    <script src="popup.js"></script>
</head>
<body>
    <div class="native">
        <h1>Chrome Roonyx</h1>
        <a id="trello_create_card" href="#">Create Card</a>
        <a id="sign-in-trello" href="/settings/index.html" target="_blank">Settings</a>
    </div>
</body>

popup.js（用于测试的简单示例，popup.js 包含在 manifest.json 中）

function popup() {
    $("#trello_create_card").click(function () {
        console.log('You have clicked the link!');
    });
}

$(document).ready(popup);

为什么当我点击 popup.html 中的“创建卡片”链接时没有任何反应？

首先我想让 popup.js 成功运行。然后我想将 settings.js 中的函数移动到 popup.js，以便从 popup.html 成功创建卡片。

谁能解释我需要哪些步骤来重现此功能？

对不起我的英语。提前谢谢！

【问题讨论】：

@wOxxOm 谢谢！你是对的。

标签： javascript jquery google-chrome-extension trello

【解决方案1】：

看起来您忘记在 popup.html 中包含 jQuery。您可以包含 jQuery 或将 popup.js 更改为 vanilla JS。

【讨论】：

对不起，我已经尝试添加 settings.html 中包含的所有脚本（包括 Jquery），但这对我没有帮助。现在添加了 Jquery。问题仍然存在。