Firefox Addon SDK - 如何创建 about: 页面答案

【问题标题】：Firefox Addon SDK - How to create an about: pageFirefox Addon SDK - 如何创建 about: 页面
【发布时间】：2015-12-06 11:55:37
【问题描述】：

我需要创建一个 about: 页面，以显示插件选项。我以前见过 ti 完成，但 SDK 中似乎没有允许您这样做的选项。

还有其他方法可以让用户输入 about:pagename 并访问我的页面吗？

我不希望将 URL 为 about:pagename 的所有选项卡重定向到另一个选项页面。

提前致谢

【问题讨论】：

看看这些插件，它的源代码是开源的：github.com/nmaier/about-addons-memory和github.com/leibovic/about-me
谢谢！虽然这两个插件都是引导插件，没有使用SDK，那么如何使用SDK呢？
SDK 不支持。这些插件被引导的事实只会影响它们的结构：使工作成为“about:page”的代码将在您基于 sdk 的插件中工作。
如果您展示一些您尝试过的代码会很好......
@bgmCoder 我没有尝试过任何代码，因为我无法确定这在 SDK 中是否可行。我不知道该写什么代码。

标签： firefox-addon firefox-addon-sdk about-box

【解决方案1】：

这是index.js 文件，用于使用jpm 开发的无需重启的插件：

const { Cc, Ci, Cr, Cu, Cm, components } = require("chrome");

Cm.QueryInterface(Ci.nsIComponentRegistrar);
Cu.import("resource://gre/modules/XPCOMUtils.jsm");
Cu.import("resource://gre/modules/Services.jsm");

// globals
var factory;
const aboutPage_description = 'This is my custom about page';
const aboutPage_id = '6c098a80-9e13-11e5-a837-0800200c9a66'; // make sure you generate a unique id from https://www.famkruithof.net/uuid/uuidgen
const aboutPage_word = 'foobar';
const aboutPage_page = Services.io.newChannel('data:text/html,hi this is the page that is shown when navigate to about:foobar', null, null);

function AboutCustom() {};

AboutCustom.prototype = Object.freeze({
    classDescription: aboutPage_description,
    contractID: '@mozilla.org/network/protocol/about;1?what=' + aboutPage_word,
    classID: components.ID('{' + aboutPage_id + '}'),
    QueryInterface: XPCOMUtils.generateQI([Ci.nsIAboutModule]),

    getURIFlags: function(aURI) {
        return Ci.nsIAboutModule.ALLOW_SCRIPT;
    },

    newChannel: function(aURI) {
        let channel = aboutPage_page;
        channel.originalURI = aURI;
        return channel;
    }
});

function Factory(component) {
    this.createInstance = function(outer, iid) {
        if (outer) {
            throw Cr.NS_ERROR_NO_AGGREGATION;
        }
        return new component();
    };
    this.register = function() {
        Cm.registerFactory(component.prototype.classID, component.prototype.classDescription, component.prototype.contractID, this);
    };
    this.unregister = function() {
        Cm.unregisterFactory(component.prototype.classID, this);
    }
    Object.freeze(this);
    this.register();
}

exports.main = function() {
  factory = new Factory(AboutCustom);
};

exports.onUnload = function(reason) {
  factory.unregister();
};

基本上它注册了一个自定义的关于页面，当您访问about:foobar 时将加载该页面。加载的页面只是一行文本。

看起来是这样的：

您可以在此处查看一个工作示例：https://github.com/matagus/about-foobar-addon

【讨论】：

【解决方案2】：

如果您使用 addons-sdk，我认为这是一个更好的解决方案：

功劳在这里： https://stackoverflow.com/a/9196046/1038866

var pageMod = require("page-mod");
pageMod.PageMod({
  include: data.url("options.html"),
  ...
});    
var tabs = require("tabs");
tabs.open(data.url("options.html"));

但还有其他方法。您可以查看实现此功能的 Scroll to Top 插件：https://addons.mozilla.org/firefox/addon/402816

【讨论】：

您可以使用pageMod 在about:mypage 上包含一个脚本吗？
另外，“滚动到顶部”插件并不完全创建关于页面，它只是将脚本附加到本地 HTML 页面
@Druzion 本地 html 页面与“关于”页面不一样吗？您所做的就是在其中谈论“关于”您的插件。是的，您可以使用 pageMod 在本地 html 页面上包含脚本。
好的，谢谢。我会在测试后将其更改为接受的答案
我实际上（哈哈）准备为我的插件做这件事。我将把“关于”和“选项”合并到一个页面中，并将其包含在插件的数据目录中。我不想使用网站来托管页面，因为我希望它可以离线使用。