javascript - 加载内容脚本中使用的库

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 包含在 js 中来加载它。输入您的 manifest.json content_scripts入口。例如:

"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 content_scripts 条目仅加载显示用户界面初始部分所需的最低限度(即，仅在用户交互之前看到的静态部分)。仅当用户开始与您的用户界面，然后您应该使用 .runtime.sendMessage() 向使用 .runtime.onMessage() 接收的后台脚本发送一条消息，以指示您的后台脚本注入(inject)完整用户界面所需的其余文件。然后您的后台脚本将使用 .tabs.executeScript() 加载您需要的其他脚本，也许使用 tabs.insertCSS() 注入(inject)您可能需要的任何其他 CSS。

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