在 Chrome 扩展程序中使用 CDN Javascript 库（清单 v3）-解网

问：

我有一个简单的 Chrome 扩展程序，它使用 ChatGPT 分析页面并创建 Google 日历邀请。完整的源代码在这里，但这里是代码的核心，当点击时会读取当前页面的文本：

manifest.json:

{
  "manifest_version": 3,
  "name": "Chrome AI",
  "version": "0.0.1",
  "action": {
    "default_popup": "index.html",
    "default_icon": "chrome_ai.png"
  },
  "permissions": [
    "tabs",
    "activeTab",
    "scripting",
    "storage"
  ],
  "host_permissions": ["<all_urls>"]
}

index.html:

<!doctype html>
<html lang="en">
<head>
    <title>Chrome AI</title>
    <script src="vendors/jquery-3.7.1.min.js"></script>
    <script defer src="index.js"></script>
</head>
<body>
<button id="gcal">Create Google Calendar Invite</button>
<code id="logs"></code>
</body>
</html>

index.js

$('#gcal').on('click', executeInTab(() => document.body.innerText).then(text => $('#logs').append(text)))

executeInTab = (f) => chrome.tabs.query({active: true, lastFocusedWindow: true})
  .then(([tab]) => chrome.scripting.executeScript({target: {tabId: tab.id}, function: f}))
  .then(([{ result }]) =>  result)

但是，正如你所看到的，这需要我下载并签入。由于将库依赖项签入您的存储库是一种不好的做法（与您不签入您的库的原因相同），我更喜欢简单地使用 CDN 来托管我的库。但是，当我尝试添加时，出现以下错误：jqueryvendors/jquery-3.7.1.min.jsnode_modulesjsdelivr<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.min.js"></script>

在有人将这个问题作为重复项关闭之前，以下是其他答案不起作用的原因：

在这种情况下，公认的答案是清单 v2，而我在清单 v3 上。那里发布的 v3 答案根本不起作用（我在这里发布的代码从那里做了建议）。
这询问如何将jquery加载到活动选项卡窗口中，而不是真正作为扩展本身的依赖项
This、This、this 和 this 询问如何将库加载到内容和后台工作线程中，而不是加载到弹出窗口本身中。 FWIW，这些是彼此的重复，而不是这个问题的重复！
这个措辞不好，没有答案，使用 manifest v2

javascript google-chrome-extension chrome-extension-manifest-v3 jsdelivr

使用 index.js 是正确的，但您还需要对 jquery 执行相同的操作 - 将其放入同一文件夹并以相同的方式加载它。ManifestV3 扩展不能使用外部代码，因此可以删除 .不要忘记删除您的内联，并注意弹出窗口是一个单独的窗口，因此它有自己单独的开发工具：在弹出窗口中单击鼠标右键，然后在菜单中选择“检查”。content_security_policy<script>

0赞 pathikrit 11/10/2023

@wOxxOm：但是，签入图书馆不是不好的做法吗？为什么我不能直接从 CDN 导入？

0赞 wOxxOm 11/10/2023

扩展程序是浏览器的一部分，因此它们必须可以离线使用。

0赞 pathikrit 11/10/2023

@wOxxOm：这没道理。看看 ChatGPT Chrome 扩展程序 - 它如何离线工作？它对 OpenAI 进行 ajax 调用！

0赞 wOxxOm 11/10/2023

显示 UI 所需的文件必须是本地文件，以确保至少 UI 可以脱机工作。

答：

0赞 aarvinr 11/16/2023 #1

为了提高安全性，Chrome 已删除了对 Manifest V3 扩展程序中 CDN 的支持，或使用远程托管 JavaScript 的任何其他方式。

他们推荐了一些解决方案：

您还可以在运行时加载外部库，方法是在调用时将它们添加到 files 数组中。您仍然可以在运行时远程加载数据：scripting.executeScript()
```
chrome.scripting.executeScript({
  target: {tabId: tab.id},
  files: ['jquery.min.js']
});
```
只需将文件捆绑为扩展的一部分即可。我知道根据您发现的文章，这被视为不良做法，但它对用户的影响很小，而且 Chrome 文档似乎没有问题。
```
<script src="./jquery.min.js"></script>
```

上一个：如何让jQuery效果在Firefox和Google Chrome上运行？

下一个：如何从chrome.storage [duplicate]将属性设置为主窗口对象

在 Chrome 扩展程序中使用 CDN Javascript 库（清单 v3）

Using CDN Javascript libraries in Chrome extensions (manifest v3)

评论