javascript - 在 Javascript 内部执行 Javascript？

Question

所以我正在制作一个 Chrome 扩展，它使用我制作的一些 TamperMonkey 脚本。我想要一个“主”javascript 文件，您可以在其中包含并执行其他脚本。我很擅长使用以下行将其他 javascript 文件包含在此主文件中:

var s1 = document.createElement('script');
s1.src = chrome.extension.getURL('h.js');
document.head.appendChild(s1);

使用这些行时遇到的主要问题是它获取代码并将其添加到文档头，但从未执行。

控制台输出状态:

所以我想我的主要问题是；如何获取要执行的代码，以便从中运行各种方法和类？

这是“主”javascript 文件:

var s1 = document.createElement('script');
s1.src = chrome.extension.getURL('h.js');
document.head.appendChild(s1);

var posinstance = new Mark(document.querySelector("#postingbody"));
posinstance.mark(positive, {
accuracy: {
  value: "exactly",
  limiters: [".", ",", "!"]
},
separateWordSearch: false,
diacritics: false,
className: "positive"
});

这是我试图包含的脚本: http://pastebin.com/raw/ESL1xYZ7

编辑:这是manifest.json

  {  "manifest_version": 2,
    "content_scripts": [ {
        "exclude_globs":    [  ],
        "include_globs":    [ "*" ],
        "js":["jquery.user.js","globalVar.user.js","h.js", "word-highlighter.user.js"],
        "matches": ["http://*/*","https://*/*"],
        "run_at": "document_end",
        "permissions":["tabs","<all_urls>"]

    } ],
    "converted_from_user_script": true,
    "description":  "did i do it right?",
    "name":         "Car Stuffs",
    "version":      "1.00",
    "web_accessible_resources": ["jquery.user.js","h.js", "globalVar.user.js"]
}

此外，我已经阅读了您多次链接我的文档，Makyen。在我的问题中我已经包括了

• 具体问题或错误
• 足够的代码来重复问题
• 期望的行为
• 明确的声明
• 我能找到的所有错误消息

你想让我做什么？

Answer 1

<script>元素插入页面上下文，而不是内容脚本上下文

在内容脚本中，您似乎试图插入 <script>元素到文档中，然后使用源自该 <script> 的代码内容脚本中的元素。这是行不通的。从内容脚本中，任何 <script>插入到文档中的元素会导致包含/引用的脚本在页面上下文(而不是内容脚本上下文)中加载和执行。您将无法直接使用任何函数/对象/类/等。包含在插入的 <script> 中从您的内容脚本中。

如果您确实尝试将多个脚本插入到页面上下文中，则需要考虑它们是异步加载的事实。您可以执行类似 How to sequentially insert scripts into the page context using <script> tags 的答案中描述的操作。然而，对于您似乎想要做的事情，这并不是实现它的方法。您似乎想要将脚本动态加载到内容脚本上下文中，而不是页面脚本上下文中。

将脚本动态加载到内容脚本上下文中

如果您想将其他脚本动态加载到上下文脚本上下文中，您将需要 send a message到后台脚本，指示后台脚本使用 chrome.tabs.executeScript() 注入(inject)额外的脚本。这是一种理想的机制，因为将精心设计的 UI 所需的所有文件加载到每个页面中对于用户界面来说是一个沉重的负担，因为该扩展可能很少使用。如果您的 UI 准备从网页内部开始，那么最好在每个页面中加载少量代码。该代码可以监视用户开始与您的扩展程序的 UI 交互。当用户开始与您的 UI 交互时，少量代码可以向后台脚本发送消息，以注入(inject)完整 UI 所需的其余代码。