Google chrome extension Firefox扩展内容脚本不加载和附加HTML

以下所有内容均在Chrome扩展中工作，但在上移植到Firefox时会自动失败：

加载

test.html

，除非我从中删除

将

#test_元素

附加到主体

对于Firefox扩展，样式是否必须放入单独的文件中？为什么

append（）

失败

test.js

$(document).ready(function() {
    $.get(chrome.extension.getURL('/html/test.html'), function(data) {
        // not called unless style element is removed from HTML
        // and never actually appended if it is removed
        $(document.body).append($.parseHTML(data));
    });
});

test.html

<style></style>
<div id="test_element">
    <p>my name is cow</p>
</div>

我的名字叫cow

manifest.json

{
    "manifest_version": 2,
    "name": "Test",
    "version": "1.0",

    "icons": {
        "64": "icons/icon-64.png"
    },

    "permissions": [
        "tabs",
        "storage",
        "idle"
    ],

    "content_scripts": [
        {
            "matches": ["<all_urls>"],
            "js": ["lib/jquery.js", "src/test.js"]
        }
    ],

    "web_accessible_resources": [
        "html/test.html"
    ]
}

{
“清单版本”：2，
“名称”：“测试”，
“版本”：“1.0”，
“图标”：{
“64”：“icons/icon-64.png”
},
“权限”：[
“标签”，
“存储”，
“闲置”
],
“内容脚本”：[
{
“匹配项”：[“”]，
“js”：[“lib/jquery.js”，“src/test.js”]
}
],
“网络可访问资源”：[
“html/test.html”
]
}

它不是默默地落在我身上，而是给了我：

  XML Parsing Error: junk after document element
  Location: https://www.google.gr/
  Line Number 2, Column 1

这是因为它不是有效的XML文档（应该只存在一个根元素）

我的工作方法如下：

test.html：（使其有效）

关于#1：参见Christos的解决方案。对于#2:

$.get（）

在Chrome中返回字符串，但在Firefox中返回

XMLDocument

（在追加之前必须使用

serializeToString（）

对其进行序列化）。无论如何，我删除了jQuery以使内容脚本更轻（顺便说一句，

$（document）.ready（）不是必需的，因为默认情况下，内容脚本是在DOM就绪后注入的）：

可能与此相关：@wOxxOm如果Firefox没有附加加载的元素，则没有
标记。除非需要，否则请不要将jQuery加载到每个页面（
内容\u脚本
）中。jQuery是85kiB的最小化代码。这是一个沉重的负担，每一页都要负担。我们这些打开100个标签的人怎么办？虽然您可能真的需要加载jQuery，但这样做更可能是为了不使用普通JavaScript而在自己的代码中保存几个/几百个字符。如果是这样的话（在问题的代码中），从用户的角度来看，这样做是一个非常糟糕的权衡。@Makyen是的，我以前在更复杂的页面上使用过它，比如扩展的弹出菜单，但忘记了100标签的情况。将更新解决方案和我的代码，谢谢！请将解决方案发布为答案，而不是问题的更新。这是为了避免混淆。谢谢。谢谢，
getURL（）
确实因为两个根节点而失败
XMLSerializer
在Firefox中工作，但在Chrome中失败，在“XMLSerializer”上执行“serializeToString”失败：参数1的类型不是“Node”

。我通过

$.parseXML（数据）

解决了这个问题，但是它在Firefox中停止了工作仍然在寻找一个通用的解决方案…我已经在firefox中实现了这种方式。另一种是铬合金。如果您发现跨浏览器的内容，请告诉我。主要区别在于

$。从HTML文件中获取
在Chrome中返回原始字符串，但在Firefox中返回
XMLDocument
。因此，可以在Chrome中立即
.append（data）
，但Firefox首先需要
.serializeToString（data）
。所以我只是检查
数据
是否为字符串。谢谢你的帮助！使用vanilla JS中的跨浏览器解决方案更新了该问题：D
  <div>
    <style></style>
    <div id="test_element">
        <p>my name is cow</p>
    </div>
  </div>

  $(document).ready(function() {
      $.get(chrome.extension.getURL('/html/test.html'), function(data) {
          res = new XMLSerializer().serializeToString(data);
          $(document.body).append(res);
      });
  });

var httpRequest = new XMLHttpRequest();
httpRequest.onload = function(data) {
    httpRequest.onload = null;

    var template = document.createElement('template');
    template.innerHTML = data.target.responseText;

    var element = template.content.firstChild;
    document.body.appendChild(element);
}

httpRequest.open('GET', chrome.extension.getURL('/html/test.html'));
httpRequest.send();