Exporting/Packaging Firefox add-on to web extension xpi

Question

I'm recently looking into Firefox web extension development and I have no prior extension development skills therefore, accept my apologies in advance if this is a silly question.

I have developed an extension to manipulate certain elements in a certain domain. It works great in Firefox about:debugging environment. I've only used jQuery and Javascript to manipulate my settings on DOM. No SDK or XUL has been used. storage.local and browser tabs API used to store & transfer my data.

My questions are how to export this source code to test amongst few friends to verify functionality before signed by AMO and my approach in here is right or wrong.

manifest.json

{
    "content_scripts": [
        {
            "matches": [
                "*://*.domain.com/*"
            ], 
            "run_at": "document_start", 
            "js": [
                "jquery.js", 
                "flat_ui_min.js", 
                "application.js"
            ]
        }
    ], 
    "name": "Extension name goes here", 
    "icons": {
        "48": "icons/extension-icon-48.png"
    }, 
    "description": "Sample description goes here", 
    "homepage_url": "URL to the extension info", 
    "version": "1.2", 
    "manifest_version": 2, 
    "browser_action": {
        "default_icon": {
            "32": "icons/browser-icon-32.png"
        }, 
        "browser_style": true, 
        "default_title": "Extension short name", 
        "default_popup": "popup/layout.html"
    }, 
    "permissions": [
        "activeTab", 
        "storage", 
        "tabs"
    ]
}

install.rdf

<?xml version="1.0"?>
<RDF xmlns="http://www.w3.org/1999/02/22-rdf-syntax-ns#" xmlns:em="http://www.mozilla.org/2004/em-rdf#">
  <Description about="urn:mozilla:install-manifest">

    <em:id>name@domain.org</em:id>

    <em:type>2</em:type>

    <em:name>Extension name</em:name>

    <em:version>1.2</em:version>

    <em:description>Extension description</em:description>

    <em:creator>Creator's name</em:creator>

    <em:homepageURL>Extension homepage</em:homepageURL>

    <em:optionsType>1</em:optionsType>

    <em:targetApplication>
      <Description>
        <em:id>Some random string</em:id>
        <em:minVersion>46.0</em:minVersion>
        <em:maxVersion>57.*</em:maxVersion>
      </Description>
    </em:targetApplication>
  </Description>
</RDF>

Directory Structure

Extension Folder
    └─── install.rdf
    └─── manifest.json
    └─── jquery.js
    └─── application.js
    └─── flat_ui_min.js
    └─── popup/
            └─── css/
                  └─── bootstrap.min.css
                  └─── flat-ui.min.css
                  └─── style.css
            └─── fonts/
                  └─── glyphicons/
                  └─── lato/
            └─── layout.html
    └─── icons/
            └─── browser-icon-32.png
            └─── browser-icon-48.png

Appreciate your thoughts in advance.

Cheers!

A WebExtension should not have an *install.rdf*. Why do you believe you should have one? — Makyen, Aug 06 '17 at 15:46
As i said, picked up couple of things from here and there. I couldn't find a complete tutorial related to my coding style though. I suppose i could remove that and zip the files again. When trying to install that zip file or xpi file in `about:addons` it gives me `this addon could not be installed because it appears to be corrupt` error. — CodeMonkey, Aug 06 '17 at 15:48
As you've mentioned, you have not yet had it signed by Mozilla, so you should be using `about:debugging`, not `about:addons`. Please see: [Firefox extension .xpi file structure: description, contents, creation, and installation](https://stackoverflow.com/a/31043045) for info on packaging add-ons and [Add-on "appears to be corrupt" when trying to install my add-on's .xpi file in Firefox](https://stackoverflow.com/a/39856780) specifically for the most common cause of the "appears to be corrupt". However, we really *can't* answer with anything but guesses/general info without actually having acce — Makyen, Aug 06 '17 at 15:58
Thank you for your comprehensive reply. The reason i'm trying to install this as it is now is to handout `.xpi` to few friends and get their opinion. I've allowed Firefox's unsigned extension add-on exception. I'll look at your docs and see how it goes. Meanwhile shall I submit what i have now to `AMO` and see what happens? — CodeMonkey, Aug 06 '17 at 16:02
You should get it to the point that you can install it as a temporary add-on from `about:debugging` using the *.xpi* file prior to submitting it. There is no other way to get it signed, other than to submit it to AMO. The only ways to allow an unsigned add-on to be installed from about:addons is to be running Nightly or Developer Edition, or to completely disable the add-on signing requirement (which can be done on a per Firefox install basis; see: [How can I disable signature checking for Firefox add-ons?](https://stackoverflow.com/a/42403531)) — Makyen, Aug 06 '17 at 16:13
Found a small mistake from my end. I will update the comment once i resolve that. :) — CodeMonkey, Aug 06 '17 at 16:17
Is the *manifest.json* in the root directory of the *.xpi*? In other words, there should be no subdirectory between the top of the *.xpi* file and the *manifest.json*. You can have subdirectories under that (as you do), but the *xpi* root should contain your *manifest.json*. Without the actual *.xpi* file, we *can't* do anything other than guess here. — Makyen, Aug 06 '17 at 16:24
Sorry yes, 7zip made a folder inside the .xpi file and i've removed that. Now having a trouble when installing the extension follows by `There was an error during installation: Add-on Author@domain.com is not compatible with application version.` This is just in under `Author@domain.com` Full install manifest is posted under my question. :) — CodeMonkey, Aug 06 '17 at 16:26
Thank you sir, You're amazing. removing the rdf file made the extension working under `about:debugging` so shall i submit this to `AMO` and get it signed? +1 for your help :) — CodeMonkey, Aug 06 '17 at 16:31
Submitting to AMO is up to you. It's a required step if you're wanting to distribute it. You've past the most important part of what you need prior to submission: a functional extension package. — Makyen, Aug 06 '17 at 16:36

CodeMonkey · Accepted Answer · 2017-08-09T04:17:12.563

SO user makyen has given his thoughts and ideas of making this extension to test upto my standards. Posting those here as an answer is to make it as a guide to other beginner developers to overcome my question.

Following changes were done:

new settings for manifest.json

{
    "description": "brief intro about the extension",
    "manifest_version": 2,
    "version": "1.2",
    "name": "Extension name",
    "homepage_url": "Developer or extension website",
    "icons": {
        "32": "icons/browser-icon-32.png",
        "48": "icons/browser-icon-48.png",
        "96": "icons/browser-icon-96.png",
        "128": "icons/browser-icon-128.png"
    },    
    "content_scripts": [
        {
            "js": [
                "jquery.js",
                "flat_ui_min.js",
                "application.js"
            ],
            "matches": [
                "*://*.somedomain.com/*",
                "*://*.somedomain.org/*"
            ]
        }
    ],
    "browser_action": {
        "default_title": "Extension browser title",
        "default_popup": "popup/layout.html",
        "browser_style": true,
        "default_icon": {
            "32": "icons/browser-icon-32.png"
        }
    },
    "permissions": [
        "activeTab",
        "storage",
        "tabs"
    ]
}

I removed install.rdf as web extension don't need one. When it comes to packing the extension, Follow this guide. More info can be found here.

After that simply change file extension from filename.zip to filename.xpi to distribute.

Happy coding everyone.!

Exporting/Packaging Firefox add-on to web extension xpi

1 Answers1