Google Chrome扩展程序：如何在以编程方式注入的内容脚本中包含jQuery？

8 浏览
0 Comments

Google Chrome扩展程序：如何在以编程方式注入的内容脚本中包含jQuery？

当用户点击浏览器操作按钮时，我会从后台页面中注入我的内容脚本，像这样：

chrome.browserAction.onClicked.addListener(function (tab) {
    chrome.tabs.executeScript(null, { file: "content.js" });
});

那么我该如何在content.js中访问jQuery呢？我没有找到同时注入的方法。

0

3 答案

0 Comments

问题的出现原因是在程序中注入的内容脚本中无法使用jQuery。

解决方法是通过在程序中注入的内容脚本中先加载jQuery，然后再加载其他脚本。

具体的解决方法是使用chrome.tabs.executeScript函数，在回调函数中加载jQuery和其他脚本文件。如果使用的是本地的jQuery文件，可以通过文件路径加载；如果使用的是托管在googleapis.com的jQuery文件，可以通过下载该文件并加载。

然而，即使按照上述方法加载了jQuery，仍然可能出现"$ is still not defined"的问题。这可能是因为在注入的内容脚本中，jQuery与页面的全局作用域隔离开来，导致无法直接使用"$"来调用jQuery的方法。

为了解决这个问题，可以通过将jQuery加载到页面的全局作用域中，使其与注入的内容脚本共享相同的作用域。具体的方法是在加载jQuery之前，先将"$"定义为jQuery的别名。

解决问题的步骤如下：

1. 使用chrome.tabs.executeScript函数，在回调函数中加载jQuery和其他脚本文件。

2. 如果使用的是本地的jQuery文件，可以通过文件路径加载；如果使用的是托管在googleapis.com的jQuery文件，可以通过下载该文件并加载。

3. 在加载jQuery之前，将"$"定义为jQuery的别名。

这样就可以在程序中注入的内容脚本中使用jQuery了。

0
0 Comments

问题的出现原因：在注入的内容脚本中使用jQuery时，需要先注入jQuery库文件，然后再注入自定义的脚本文件。否则，脚本的执行顺序可能不正确。

解决方法：使用chrome.tabs.executeScript方法，先注入jQuery库文件，再注入自定义的脚本文件。确保通过回调函数的方式，让第一个脚本文件执行完毕后再执行第二个脚本文件，以确保脚本的执行顺序正确。

更新后的示例代码如下：

chrome.tabs.executeScript(null, {file:'js/jquery-2.1.1.min.js'}, function(result){
    chrome.tabs.executeScript(null, {file:'js/myscript.js'});
});

注：在执行脚本注入时，可以通过设置allFrames属性来控制脚本注入的范围，如果希望将脚本注入到文档的所有框架中，可以将该属性设置为true。忽略该属性则只会将脚本注入到顶层框架中。在其他回答中没有提到该属性，希望对你有所帮助。另外，可以通过将脚本添加到manifest中来始终注入脚本，具体方法可以参考这里的说明。

0
0 Comments

问题的原因是作者想要在通过程序注入的内容脚本中包含jQuery，但是通过在manifest文件中添加"content_scripts"的方式会使得Chrome在每个标签页中都解析jQuery，即使它并不需要。解决方法是添加一个"matches"属性来控制在哪些域上执行jQuery。

要找到"jquery.js"，你需要从code.jquery.com下载它，并将其命名为"jquery.js"，然后放在与代码相同的目录中。

然而，这个答案并不是问题的解决方法。问题的提问者需要的是一种程序化注入的方式（通过点击浏览器操作按钮触发），而不是在符合manifest文件中模式的每个页面上都注入。

为了在所有匹配模式的页面上使用jq，我将其修复为以下方式：prntscr.com/evhfj2

0