在 google chrome 扩展中加载外部 javascript

Question

I'm writing a Google Chrome extension which manipulates the current page (basically adds a button).我正在编写一个 Google Chrome 扩展程序来操作当前页面（基本上是添加一个按钮）。

In my content script, I want to load the Facebook Graph API:在我的内容脚本中，我想加载 Facebook Graph API：

$fbDiv = $(document.createElement('div')).attr('id', 'fb-root');
$fbScript = $(document.createElement('script')).attr('src', 'https://connect.facebook.net/en_US/all.js');
$(body).append($fbDiv);
$(body).append($fbScript);

console.log("fbScript: " + typeof $fbScript.get(0));
console.log("fbScript parent: " + typeof $fbScript.parent().get(0));
console.log("find through body: " + typeof $(body).find($fbScript.get(0)).get(0));

However, the script doesn't seem to added to body .但是，脚本似乎没有添加到body 。 Here's the console log:这是控制台日志：

fbScript: object
fbScript parent: undefined
find through body: undefined

Any ideas on what I'm doing wrong?关于我做错了什么的任何想法？

Answer 1

The issue is that the JavaScript inside the content scripts runs in its own sandboxed environment and only has access to other JavaScript that was loaded in one of two ways:问题在于内容脚本中的 JavaScript 在其自己的沙盒环境中运行，并且只能访问以以下两种方式之一加载的其他 JavaScript：

Via the manifest :通过清单：

{
  "name": "My extension",
  ...
  "content_scripts": [
    {
      "js": ["https://connect.facebook.net/en_US/all.js"]
    }
  ],
  ...
}

Or using Programmatic injection :或者使用程序化注入：

/* in background.html */
chrome.browserAction.onClicked.addListener(function(tab) {
    chrome.tabs.executeScript(null,
                       {file:"https://connect.facebook.net/en_US/all.js"});
});

Be sure to update your manifest permissions:请务必更新您的清单权限：

/* in manifest.json */
"permissions": [
    "tabs", "https://connect.facebook.net"
 ],

Appending a script tag will in effect evaluate the JavaScript in the context of the containing page, outside of the JavaScript sandbox that your JavaScript has access to.附加脚本标签实际上会在包含页面的上下文中评估 JavaScript，在您的 JavaScript 可以访问的 JavaScript 沙箱之外。

Also, since the FB script requires the "fb-root" to be in the DOM, you will probably need to use the programmatic approach so that you can first update the DOM with the element, then pass a message back to the background page to load the Facebook script so it is accessible to the JavaScript that is loaded in the content scripts.此外，由于 FB 脚本要求“fb-root”位于 DOM 中，因此您可能需要使用编程方法，以便您可以首先使用元素更新 DOM，然后将消息传递回后台页面以加载 Facebook 脚本，以便内容脚本中加载的 JavaScript 可以访问它。

Answer 2

Google Chrome extensions no longer allow injecting external code directly, however you can still download the code with an Ajax call and feed it to the injector as if it was a code block. Google Chrome 扩展不再允许直接注入外部代码，但是您仍然可以通过 Ajax 调用下载代码并将其提供给注入器，就像它是一个代码块一样。

chrome.tabs.query({active: true, currentWindow: true}, function(tabs) {
    $.get("http://127.0.0.1:8000/static/plugin/somesite.js", function(result) {
        chrome.tabs.executeScript(tabs[0].id, {code: result});
    }, "text");
});

source: https://stackoverflow.com/a/36645710/720665来源： https : //stackoverflow.com/a/36645710/720665

Answer 3

If you want to load it as content script:如果要将其加载为内容脚本：

fetch('https://example.com/content.js')
  .then(resp => resp.text())
  .then(eval)
  .catch(console.error)

If you want to load it as background script.如果要将其作为后台脚本加载。 Take https://example.com/bg.js for example.以https://example.com/bg.js为例。

add the remote js script to the background page file, which is named background.html here将远程js脚本添加到后台页面文件中，这里命名为background.html

<!DOCTYPE html>
<html>
<head>
  <script src="https://example.com/bg.js"></script>
</head>
<body>
<div>Empty content</div>
</body>
</html>

add https://example.com to the content_security_policy of the manifest.json:将https://example.com添加到 manifest.json 的 content_security_policy：

"background": {
  "page": "background.html"
},
"content_security_policy": "script-src 'self' https://example.com ; object-src 'self'",

Requirements:要求：

The remote js script must be served via https instead of http.远程 js 脚本必须通过https而不是 http 提供。
You should specify a page rather than a scripts array in the background section您应该在后台部分指定页面而不是脚本数组

在 google chrome 扩展中加载外部 javascript

问题描述

3 个解决方案

解决方案1
50 已采纳 2012-01-14 08:56:14

解决方案2
10 2017-01-03 11:36:38

解决方案3
1 2020-09-07 15:31:27

在 google chrome 扩展中加载外部 javascript

问题描述

3 个解决方案

解决方案1 50 已采纳 2012-01-14 08:56:14

解决方案2 10 2017-01-03 11:36:38

解决方案3 1 2020-09-07 15:31:27

解决方案1
50 已采纳 2012-01-14 08:56:14

解决方案2
10 2017-01-03 11:36:38

解决方案3
1 2020-09-07 15:31:27