时间戳

首页 > 解决方案 > 在 chrome 扩展中使用 Materialize 库

javascript - 在 chrome 扩展中使用 Materialize 库

问题描述

我在使用我的 chrome 扩展中的物化库来在单击按钮时显示自定义模式时遇到问题。我已经编写了代码（在我的内容脚本中）向现有网页注入一个按钮。在我的 dialog.html 中，我有我的模式的 HTML（使用这个来自 materialize-css 的模板）。现在，我试图在$('.modal').modal('open');单击按钮时调用的函数内部调用（我已验证 onclick 工作正常，因为 console.log() 在此函数内部工作。

但是，当我尝试运行时$('.modal').modal('open');，出现此错误：Uncaught TypeError: $(...).modal is not a function. （我也尝试过运行$('.modal').modal();以及在 stackoverflow 上找到的其他实现，但无济于事。

我的 manifest.json 看起来像：

{
    "manifest_version": 2,
    "name": "MyChromeExtension",
    "version": "0.1",
    "content_scripts": [
        {
            "matches": ["*://www.messenger.com/*"],
            "css": ["/thirdParty/materialize.css"],
            "js": ["/thirdParty/jquery.min.js","/thirdParty/materialize.js", "content-final.js"]

        }
    ],
    "web_accessible_resources": ["/thirdParty/bootstrap.min.css", "/thirdParty/jquery.min.js", "/thirdParty/bootstrap.min.js", "dialog.html", "/thirdParty/materialize.css", "/thirdParty/materialize.js"],
    "permissions": ["tabs", "<all_urls>"],
    
    "background": {
        "scripts":["background.js"]
    },
    "content_security_policy": "script-src 'self' 'unsafe-eval' https://cdn.jsdelivr.net; object-src 'self'"

}

我已将 jquery、bootstrap 和 materialize 文件的本地副本保存在我的文件夹 thirdParty 中，但由于某种原因，我的代码无法正常工作。我也尝试通过 npm 安装所有这些框架并使用browserify将它们组合到我的 content-final.js 中，但这也不起作用。

有谁知道为什么会发生这种情况？

标签： javascripthtmlcssgoogle-chrome-extension

解决方案

推荐阅读