CODEWITHSUNDEEP
htmlfirefox-addonfirefox-addon-sdk
Janine Polster
Janine Polster

Reputation: 101

Access a html file in firefox addon

I'm working on an addon which opens a new tab on click on a button with a special html. Right now, the html file is on a dedicated webspace but is there a workaround for that that means, can I put the html file in the data structure of the addon itself and access it from there? Problem is, I deliver the url of the active site when the button is clicked to the url by concatenating it and I'm using AngularJS within that html which seems to be a problem.

My code:

index.js:

var { ActionButton } = require("sdk/ui/button/action");
var tabs = require("sdk/tabs");
var data = require("sdk/self").data; 

var button = ActionButton({
  id: "my-button",
  label: "Start LLIBrowser",
  icon: {
    "16": "./img/logo-16.png"
  },
  onClick: showPlugIn
});

function showPlugIn(state){ 
  let currUrl = tabs.activeTab.url;
  //var file = "file:///home/janine/OneDrive/Uni/OvGU/4. Semester/SoftwareProjekt/LLIBrowserGalleryAndInfo/data/overlay.html"; just for testing
  var file = "http://www-e.uni-magdeburg.de/jpolster/LLIBrowser/overlay.html";
  var completePath = file.concat("?url=").concat(currUrl);

  tabs.open(completePath)
}

any ideas?

Cheers!

Upvotes: 0

Views: 82

Answers (2)

Sintho
Sintho

Reputation: 41

In theory, I don't see any problems. Place your HTML-file in your data folder, and access it through:

var file = data.url("overlay.html");

Edit: M.Onyshchuk is correct in saying that this will trigger an

The address isn't valid

error. I didn't think of the ":". In order to fix this simply remove the protocol information from the URL.

    currUrl = currUrl.replace(/^https?\:\/\//i, "");

To still use AngularJS within your addon, the easiest way would be to simply ship the current version with your addon. Download the latest version, place it into your data folder, and simply access it in your HTML-file the way you normally would.

While I'm not familiar with AngularJS, I can't think of any reason why this shouldn't work.

Good luck with your project!

Sintho

Upvotes: 2

M.Onyshchuk
M.Onyshchuk

Reputation: 165

It is not enough to change the file loading URI:

  var file = data.url("overlay.html");

You will see error in this case as

The address isn't valid

But you can modify your code and send current tab url not as a query part of URI, but as a fragment part: 

  let currUrl = tabs.activeTab.url;
  currUrl = currUrl.replace(":", "%");
  var file = data.url("overlay.html");
  var completePath = file.concat("#").concat(currUrl);

Unfortunately encodeURIComponent does not work:

  let currUrl = encodeURIComponent(tabs.activeTab.url); // The address isn't valid

You will need parse fragment URI (after #) in overlay.html

Upvotes: 1

Related Questions