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

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 js条目中的content_scripts键中来加载jQuery。例如：

"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()接收），以指示您的后台脚本注入其余文件您的完整用户界面需要。后台脚本将使用.tabs.executeScript()加载您需要的其他脚本，或许tabs.insertCSS()注入您可能需要的任何其他CSS。

执行上述操作的目的是在用户 主动使用您的分机时，最大限度地减少您的分机对用户/浏览器的影响，这大部分时间是在大多数情况下条件。