加载库以在内容脚本中使用

Question

我创建了一个大部分工作的 Firefox 扩展。我很难导入 jQuery。我已经下载到本地了。我没有收到任何错误。所以，有时扩展会工作并且 jQuery 会加载。有时它不会。其他时候我必须重新加载页面 5 或 6 次才能使其正常工作。

我不是 JavaScript 开发人员，这是我第一次尝试扩展。我用谷歌搜索并尝试了很多东西，但都没有运气。

下面是我的 manifest.json

"web_accessible_resources" : ["/jquery-3.2.1.min.js","/jquery.csv.min.js","/ui.js"],
  "icons": {
    "128": "icon_128px.png",
    "48": "icon_48px.png"
  },
 "browser_action": {
    "default_icon": "icon_48px.png"
  },
"content_scripts": [
  {
    "matches": ["https://*****.com/*"],
    "js": ["content.js"],
    "run_at": "document_end"
  }
],
"permissions":[
    "activeTab"
    ],
"homepage_url": "https://*****.com"

}

content.js

function injectJs(link) {
    var scr = document.createElement("script");
    scr.type="text/javascript";
    scr.src=link;
    (document.head || document.body || document.documentElement).appendChild(scr);
}

injectJs(chrome.extension.getURL("/jquery-3.2.1.min.js"));
injectJs(chrome.extension.getURL("/jquery.csv.min.js"));
injectJs(chrome.extension.getURL("/ui.js"));

Answer 1

通常，您可以通过将 jQuery 包含在 manifest.json content_scripts 条目的 js 键中来加载它。例如：

"content_scripts": [
  {
    "matches": ["https://example.com/*"],
    "js": ["jquery-3.2.1.min.js", "jquery.csv.min.js", "ui.js", "content.js"]
  }
]

脚本按列出的顺序加载。因此，您需要在它们所依赖的库之后列出依赖于其他库的库（例如，"jquery-3.2.1.min.js" 在 "jquery.csv.min.js" 之前）。

你在做什么

您使用<script> 标记将脚本插入页面上下文的方式。此类标签是异步加载的。因此，不能保证依赖 jQuery 的脚本实际上是在 jQuery 之后加载的。对于您正在执行的操作，您不希望将脚本加载到页面上下文中，该页面上下文与您的内容脚本通常运行的内容脚本上下文是分开的。如果您想了解如何成功地做到这一点的更多信息，您可以查看我对How to sequentially insert scripts into the page context using tags 的回答，它具有将多个依赖库插入页面上下文的功能齐全的代码。

使用 .tabs.executeScript() 在 100% 的时间不使用脚本时动态加载脚本

但是，如果您将内容脚本加载到大量页面中（例如，matches 是 "<all_urls>"、*://*/* 等），那么您应该使用 manifest.json em> content_scripts 条目仅加载显示用户界面初始部分所需的最低限度（即仅在用户交互之前看到的静态部分）。仅当用户开始与然后，您的用户界面应该使用.runtime.sendMessage() 向您的后台脚本发送一条消息，使用.runtime.onMessage() 接收，以指示您的后台脚本注入完整用户界面所需的其余文件。然后，您的后台脚本将使用.tabs.executeScript() 加载您需要的额外脚本，或许使用tabs.insertCSS() 注入您可能需要的任何额外CSS。

执行上述操作的目的是在用户不积极使用您的扩展程序期间，最大限度地减少您的扩展程序对用户/浏览器的影响，这是大多数情况下的条件。