0

I am making an addon for firefox. I want to extract a video from a HTML page and display it on a black background. Here is what i've got.

//main.js
var pageMod = require("page-mod");

pageMod.add(new pageMod.PageMod({
  include: "http://myserver.fr/*",
  contentStyleFile: data.url("modify.css"),
  contentScriptFile: data.url('hack.js'),
  contentScriptWhen: 'start'
}));
//hack.js
video = document.body.innerHTML;
document.body.innerHTML = '';
video = video.substring(video.lastIndexOf("<object"),video.lastIndexOf("</object>"));
video = "<div id='fond'></div><div id='mavideo'>"+video+"</div>"

document.body.innerHTML = video;
document.body.style.backgroundColor = "black";
document.body.style.margin = "0";

My code works but the probleme is that I have to wait "for hours" while the other javascript is beeing executed. I've tried to use contentScriptWhen: 'start' but i dosent change a thing.

Any idea to block the other script of the page ?

Wladimir Palant
  • 56,865
  • 12
  • 98
  • 126
Paul Fournel
  • 10,807
  • 9
  • 40
  • 68

1 Answers1

1

Blocking scripts from loading is going to be a little difficult, we can quickly remove them instead.

// remove all scripts
var scripts = document.getElementsByTagName("script");
var parent = null;
for (var i = 0; i < scripts.length; i += 1) {
    parent = scripts.item(i).parentNode;
    parent.removeChild(scripts.item(i));
}

This code tries to remove all the script tags from your page which would stop the loading of any scripts and allows you to run the rest of your code. Put this at the top of your hack.js script.

I don't know the page you're looking at so it's hard to know what else is going on but your use of substring, and lastIndexOf aren't going to be very fast at all either. We can get rid of those and see if you get any noticible speed increase.

Try using query selectors and Document Fragments instead. Here's an example:

//hack.js
var fragment = document.createDocumentFragment();
var objects = document.getElementsByTagName("object");
// create your div objects and append to the fragment
var fond = document.createElement("div");
fond.setAttribute("id", "fond");
fragment.appendChild(fond);
var mavideo = document.createElement("div");
mavideo.setAttribute("id", "mavideo");
fragment.appendChild(mavideo);
// append all <object> tags to your video div
for (var i = 0; i < objects.length; i += 1) {
    mavideo.appendChild(objects.item(i));
}
// clear and append it all in
document.body.innerHTML = '';
document.body.appendChild(fragment);

That code throws all the objects into a document fragment so you can wipe the whole page away and then append it all back in; no libraries required. Your divs fond & mavideo are in there as well.

I didn't really test all this code out so hopefully it works as expected.

Bryan Clark
  • 2,542
  • 1
  • 15
  • 19