Firefox扩展内容脚本不加载和附加HTML [英] Firefox extension content script does not load and append HTML

问题描述

下面的所有内容都适用于Chrome扩展程序，但是在移植到Firefox时会自动失败：

1. 加载测试.html 除非我从中删除< style>< / style> code> #test_element 到正文

样式必须放入单独的文件中Firefox扩展？为什么 append（）失败？

$ b

test.js

  $（document）.ready（function（）{
 $ .get（chrome.extension.getURL（'/ html / test。 （data）{
 //除非style元素被从HTML 
中移除，否则不会被调用//并且如果被移除，它们永远不会被附加
 $（document.body）.append （$ .parseHTML（data））; 
}）; 
}）; 
  

test.html

 < style>< / style> 
< div id =test_element> 
< p>我的名字是牛< / p> 
< / div> 
  

manifest.json

  {
manifest_version：2，
name：Test，
version：1.0，
 $ b图标：{
64：图标/图标-64.png
}，
 
权限：[
标签，
存储，
空闲
]，
 
content_scripts：[
 {
 ：[< all_urls>]，
js：[lib / jquery.js，src / test.js] 
} 
]，
 
web_accessible_resources：[
html / test.html
] 
} 
  

解决方案

它并没有默默地落在我身上，而是给了我：

  XML分析错误：文档元素
之后的垃圾位置：https：//www.google.gr/ 
行号2，列1 
  

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

我的方法使其工作如下：
$ b

测试.html ：（使之有效）

 < div> 
< style>< / style> 
< div id =test_element> 
< p>我的名字是牛< / p> 
< / div> 
< / div> 
  

test.js :(使用XMLSerializer）

  $（document）.ready（function（）{
 $ .get（chrome.extension.getURL（'/ html / test.html '），函数（data）{
 res = new XMLSerializer（）。serializeToString（data）; 
 $（document.body）.append（res）; 
}）; 
}）; 
  

Everything below works in a Chrome extension but silently fails when ported to Firefox on:

1. loading the test.html unless I remove <style></style> from it
2. appending the #test_element to the body

Do styles have to go into a separate file for Firefox extension? Why does append() fail?

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

解决方案

It is not falling silently to me but gives me:

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

This is because it is not a valid XML document (one root element only should exists).

My way to make it work is the following:

test.html: (Make it valid)

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

test.js: (Use XMLSerializer)

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

这篇关于Firefox扩展内容脚本不加载和附加HTML的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！