Firefox 扩展内容脚本不加载和追加 HTML

Question

下面的所有内容都在 Chrome 扩展中工作，但在移植到 Firefox 时静默失败：

加载 test.html 除非我从中删除 <style></style>
将 #test_element 附加到正文

样式是否必须放入 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>

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"
    ]
}

Answer 1

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

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

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

我的方法如下：

test.html: (使其有效)

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

test.js：（使用XML序列化器）

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

Answer 2

对于 #1：请参阅 Christos 的解决方案。对于 #2：$.get() returns Chrome 中的字符串，但 Firefox 中的 XMLDocument （在附加之前必须用 serializeToString() 序列化）。无论如何，我删除了 jQuery 以使内容脚本更轻（顺便说一下，不需要 $(document).ready() 因为默认情况下内容脚本在 DOM 准备好后注入）：

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();

Firefox 扩展内容脚本不加载和追加 HTML

Firefox extension content script does not load and append HTML

firefox-addon

google-chrome-extension

firefox-addon-webextensions