在 Firefox 插件中访问 html 文件答案

【问题标题】：Access a html file in firefox addon在 Firefox 插件中访问 html 文件
【发布时间】：2016-07-15 10:24:29
【问题描述】：

我正在开发一个插件，它会在单击带有特殊 html 的按钮时打开一个新选项卡。现在，html 文件位于专用的 webspace 上，但是否有解决方法，这意味着我可以将 html 文件放在插件本身的数据结构中并从那里访问它吗？问题是，当单击按钮时，我通过连接它来传递活动站点的 url，并且我在该 html 中使用 AngularJS，这似乎是一个问题。

我的代码：

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

有什么想法吗？

干杯！

【问题讨论】：

标签： html firefox-addon firefox-addon-sdk

【解决方案1】：

理论上，我认为没有任何问题。将您的 HTML 文件放在您的数据文件夹中，并通过以下方式访问它：

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

编辑：M.Onyshchuk 说这会触发

是正确的

地址无效

错误。我没有想到“：”。为了解决这个问题，只需从 URL 中删除协议信息。

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

要在您的插件中仍然使用 AngularJS，最简单的方法是简单地将当前版本与您的插件一起发布。下载最新版本，将其放入您的数据文件夹，然后像往常一样在 HTML 文件中访问它。

虽然我对 AngularJS 不熟悉，但我想不出有什么理由让这不起作用。

祝你的项目好运！

辛托

【讨论】：

【解决方案2】：

改变文件加载URI是不够的：

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

在这种情况下你会看到错误

地址无效

但是你可以修改你的代码并发送当前选项卡 url，而不是作为 URI 的查询部分，而是作为片段部分：

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

很遗憾 encodeURIComponent 不起作用：

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

您需要在overlay.html 中解析片段URI（在# 之后）

【讨论】：