Mozilla JetPack Invalid Filename - firefox-addon-sdk

Question

I'm trying to create simple Mozilla add-on which is using external JS file;
Folders & Files
/var/www/html/add-ons/hello
/var/www/html/add-ons/hello/index.js
/var/www/html/add-ons/hello/package.json
/var/www/html/add-ons/hello/script/data/test.js
/var/www/html/add-ons/hello/index.js
// Import the page-mod API
var pageMod = require("sdk/page-mod");
// Create a page-mod
pageMod.PageMod({
include : "*",
contentScriptFile : "./test.js",
contentScript: 'window.alert("loaded");'
});
/var/www/html/add-ons/hello/package.json
{
"title": "My Jetpack Addon",
"name": "test",
"version": "0.0.1",
"description": "A basic add-on",
"main": "index.js",
"author": "",
"engines": {
"firefox": ">=38.0a1",
"fennec": ">=38.0a1"
},
"license": "MIT",
"keywords": [
"jetpack"
]
}
/var/www/html/add-ons/hello/script/data/test.js
alert("Hello World");
Commands I Run to Test
cd /var/www/html/add-ons/hello
jpm init (actually package.json file was created by this command)
jpm run -b /usr/bin/firefox (I use Ubuntu so I run it this way)
I test it live and I get loaded alert however I get following error;
console.error: script:
Error opening input stream (invalid filename?): resource://script/data/test.js
The folders and file are already exist within the root folder.
If this is the root;
/var/www/html/add-ons/hello shouldn't resource://script/data/test.js be referring to /var/www/html/add-ons/hello/script/data/test.js?
Where am I doing wrong?

Answer 1

Create your folder structure as below:
root folder: /var/www/html/add-ons/hello
place index.js, package.json within root folder.
move all the data that is packaged within your add-on to: /var/www/html/add-ons/hello/data
go to root folder - /var/www/html/add-ons/hello
run jpm run -b
this will create an xpi package, launch firefox.exe with temporary profile, install add-on.
ex: this is from win 7 x64 test project:
root directory: E:\Training\using_Angular
Directory of E:\Training\using_Angular
11/01/2015 08:26 AM <DIR> .
11/01/2015 08:26 AM <DIR> ..
09/29/2015 05:04 PM <DIR> data
09/29/2015 05:02 PM 548 index.js
08/12/2015 08:26 PM 221 package.json
Directory of E:\Training\using_Angular\data
09/29/2015 05:04 PM <DIR> .
09/29/2015 05:04 PM <DIR> ..
09/29/2015 05:04 PM <DIR> images
08/12/2015 08:26 PM 446 lang.json
09/29/2015 05:04 PM <DIR> lib
09/29/2015 05:04 PM <DIR> scripts
09/29/2015 05:04 PM <DIR> styles
09/29/2015 05:04 PM <DIR> html
Directory of E:\Training\using_Angular\data\html
08/12/2015 08:26 PM 446 pagescript.html
During run, the 'resource://' folder refers to contents packaged in your add-on.
for ex: resource://caaaaaa-aaaa-aaaa-aaaa-aaaaaaaaaaaa/data/html/pagescript.html