如何使用firefox插件的内容脚本注入HTML / CSS内容？

Question

我正在开发一个附加组件，我需要根据我的内容脚本中的函数结果将大量的HTML / CSS注入到DOM中。这是我的main.js脚本（您可能希望跳过此部分）。

var pageMod = require("sdk/page-mod");
var self = require('sdk/self');
var pull = self.data.url;

pageMod.PageMod({
  include: "*",
  contentScriptFile: [ 
    pull('vendors/jQuery.js'), 
    pull('util.js'), 
    pull('views.js'), 
    pull('myScript.js')]
});

myScript.js需要将我的插件的一些html / css表单数据目录注入到DOM中。我怎样才能做到这一点？ 我试图使用jQuery加载和获取函数，但它不起作用。 我希望我能做这样的事情：

myScript.js

var html = $.get(chrome.extension.getURL("html/place-holder.html"), function (data) )
   //I will append html to the DOM 
});
var css = $.get(chrome.extension.getURL("css/style.css"), function (data) )
   //I will append css to the DOM 
});

这是我在谷歌浏览器中实现的方式，但在Firefox中似乎要难得多

Answer 1

main.js

const {data} = require('sdk/self');
require("sdk/page-mod").PageMod({
  include: "*",
  contentScriptFile: [ 
    data.url('vendors/jQuery.js'), 
    data.url('util.js'), 
    data.url('views.js'), 
    data.url('myScript.js')],
  contentStyleFile: data.url("css/style.css"),
  contentScriptOptions: {
    html: data.load("html/place-holder.html")
  }
});

myScript.js

document.body.insertAdjacentHTML('beforeend', self.options.html);

Answer 2

我不确定您是否正确设置了pull。尝试将var pull设置为self.data而不是self.data.url