How can I inject HTML/CSS content using content scripts of my fixefox addon?

Question

I am developing an add-on and I need to inject large chunks of HTML/CSS into the DOM based on a function result in my content script. Here is my main.js script (you may want to skip this part).

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 needs to inject some html/css form data directory of my addon into DOM. how can I do this? I tried to use jQuery load and get functions but it didn't work. I wish I could do some thing like this:

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

This is the way I did it in Google Chrome but it seems to be much harder in 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

im not sure if you set pull correctly. try setting var pull to just self.data instead of self.data.url