Exporting/Packaging Firefox add-on to web extension xpi - firefox-addon

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!

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.!

Related

How to show accept terms and conditions window after click on application exe file

I am using Electron Builder to create a build for my app. I want an accept terms and condition window will show with checkbox and if user select checkbox and click on continue only then app will get installed otherwise exit the installation.How can i do it in electornjs.
As the document mentioned:
license String - The path to EULA license file. Defaults to license.txt or eula.txt (or uppercase variants). In addition to txt,rtfandhtmlsupported (don't forget to usetarget=”_blank”` for links).
https://www.electron.build/configuration/nsis
So in your package.json build part, try to use it like this:
{
"appId": "yourappid",
"productName": "your-product",
"copyright": "Copyright © 2020 your company",
"directories": {
"app": "www"
},
"nsis": {
"oneClick": false,
"perMachine": false,
"allowToChangeInstallationDirectory": true,
"license": "LICENSE.txt", // <- Put your license name here.
},
"win": {
"target": [
{
"target": "nsis"
}
]
}
}
And put the LICENSE.txt file along-side your package.json file:
LICENSE
Here is my example license.
After building:

How to get my icon to display in my Firefox Addon?

I have created an Addon and uploaded it to addons.mozilla.org and it works ok, but it's displaying a default icon instead of my icon. I don't get this problem with Chrome.
My manifest.json file looks like:
{
"manifest_version": 2,
"name": "Handcash handle converter",
"version": "1.4",
"description": "Get a receiving address for a Handcash $handle",
"icons": {
"48": "handcash48.png",
"64": "handcash64.png",
"128": "handcash128.png"
},
"browser_action": {
"default_title": "Handcash handle converter",
"default_popup": "./popup/popup.html"
},
"homepage_url": "https://www.handcash.io",
"short_name": "HandcashConv",
"content_security_policy": "script-src 'self' https://api.moneybutton.com ; object-src 'self'",
"permissions": [
"storage",
"clipboardWrite"
]
}
I tried putting the icons in their own directory and at the root of the extension but no joy. The extension looks like this in Firefox:
Full source code in case you're interested: https://github.com/markallisongit/handcash-chrome
The icons entry of the manifest.json refers to icons used in the addon listing, addon management page, etc. What you want here is to set the icon of the browserAction button in the toolbar. If you have a look at the browser_action page on the MDN, you'll notice a default_icon setting, and I believe this is what you're looking for :
Use this to specify one or more icons for the browser action. The icon
is shown in the browser toolbar by default.
Icons are specified as URLs relative to the manifest.json file itself.
You can specify a single icon file by supplying a string here:
"default_icon": "path/to/geo.svg"
To specify multiple icons in different sizes, specify an object here.
The name of each property is the icon's height in pixels, and must be
convertible to an integer. The value is the URL. For example:
"default_icon": {
"16": "path/to/geo-16.png",
"32": "path/to/geo-32.png"
}
In the end, you should update your manifest.json so that it includes this default_icon setting, something like this:
{
"manifest_version": 2,
"name": "Handcash handle converter",
...
"browser_action": {
"default_title": "Handcash handle converter",
"default_popup": "./popup/popup.html",
"default_icon": {
"48": "handcash48.png",
"64": "handcash64.png",
"128": "handcash128.png"
}
},
...
}

Make electron app smaller?

I just recently built an electron app and packaged it using electron-packager. The .exe file is 55,000kb and the rest of the folder is quite bulky as well. Is there any way to take down the size of this application at all?
Here's a github issue on it.
The comment I'm emphasizing is:
That's the expected size, there is no way to make it smaller.
The reason why it's so big is because electron is loading most of chromium inside that 50mb file.
So no unfortunately there is no way to make it smaller sorry.
A somewhat helpful post from that github thread suggests removing unnecessary node modules via electron-packager. It also offers a bit more explanation on why files are so large.
You can zip your app and if you're using electron-packager you can ignore some node modules that you don't need when the app is running, this makes it a bit smaller. For instance I have a 37MB zipped Electron app (Note Windows version is much larger as it contains a copy of Git). But Electron will always have a large part of Chrome in it so there is only so much that can be done. Electron itself right now is ~33MB.
There is a way to reduce Electron size drastically (up to 99%, depending how big is your app), by using native browser, available in each OS, instead of loading webkit. BUT as built in browsers don't have the system API's, you will also be drastically limited in what you can do. But, if you need basic web ui app, this might be the best solution out there, though, it must be mentioned, that it might have some unexpected issues, as you will need to test your app on different OS'es browsers..
The method i'm talking about is available in awesome post Put your Electron app on a diet with Electrino by Pauli Olavi Ojala
If you are using Electron Builder https://www.electron.build you should use the various methods listed to remove files and folders for specific platforms.
Example
{
"name": "Example",
"version": "1.1.2",
"description": "",
"main": "main.js",
"scripts": {},
"build": {
"appId": "com.example",
"afterSign": "notarize.js",
"fileAssociations": [{
"ext": [
"mp4"
],
"name": "Media File",
"role": "Viewer"
}],
"dmg": {
"sign": true
},
"mac": {
"hardenedRuntime": true,
"gatekeeperAssess": false,
"entitlements": "build/entitlements.mac.plist",
"entitlementsInherit": "build/entitlements.mac.plist",
"icon": "build/icon.png",
"category": "public.app-category.video",
"extraFiles": [{
"from": "resources/bin/mac",
"to": "Resources/bin/mac",
"filter": [
"**/*"
]
},
{
"from": "node_modules/platforms/darwin-x64/bin",
"to": "Resources/bin/mac",
"filter": [
"**/*"
]
}
],
"files": [
"!gruntfile.js",
"!README.md",
"!notarize.js",
"!.env",
"!minify.js",
"!src/*",
"!.git/*",
"!resources/*"
]
},
"win": {
"target": "nsis",
"signingHashAlgorithms": [
"sha1"
],
"certificateFile": "",
"certificatePassword": "",
"files": [
"!gruntfile.js",
"!README.md",
"!notarize.js",
"!.env",
"!minify.js",
"!.git/*",
"!resources/mac/*"
]
}
},
"author": "Example",
"license": "ISC",
"devDependencies": {
},
"dependencies": {
}
}

How do I set a keybinding for an extension in VSCode?

I am using VSCode to write a Swagger (OpenAPI) specification and I want to make use of a specific extension to aid in the writing of that specification.
The extension I have installed does not supply a key binding for me to easily invoke it with.
How do I go about adding the key binding? I have attempted to make it work by clicking File->Preferences->Keyboard Shortcuts and editing the keybindings.json file, but without success thus far.
It seems I have to discover the extension's command and I don't know where to find that, doesn't seem to be readily apparent on the extension summary page either when I click on the extensions hub, then on the extension I want to use.
In case somebody is writing their own extension for VSCode, you can set up a default key binding for your commands using the keybindings prop alongside with commands inside contributes prop. Example setup in package.json of a sample project inited by Yeoman yo code command:
{
"name": "static-site-hero",
"displayName": "Static site hero",
"description": "Helps with writing posts for static site generator",
"version": "0.0.1",
"engines": {
"vscode": "^1.30.0"
},
"categories": [
"Other"
],
"activationEvents": [
"onCommand:extension.helloWorld",
"onCommand:extension.insertLink",
"onCommand:extension.insertFigure"
],
"main": "./extension.js",
"contributes": {
"commands": [
{
"command": "extension.helloWorld",
"title": "Hello World"
},
{
"command": "extension.insertLink",
"title": "Insert Markdown Link to File or Image"
},
{
"command": "extension.insertFigure",
"title": "Insert HTML figure"
}
],
"keybindings": [
{
"command": "extension.insertLink",
"key": "ctrl+alt+l",
"mac": "shift+cmd+f"
},
{
"command": "extension.insertFigure",
"key": "ctrl+alt+F",
"mac": "shift+cmd+l"
}
]
},
"scripts": {
"postinstall": "node ./node_modules/vscode/bin/install",
"test": "node ./node_modules/vscode/bin/test"
},
"devDependencies": {
"typescript": "^3.1.4",
"vscode": "^1.1.25",
"eslint": "^4.11.0",
"#types/node": "^8.10.25",
"#types/mocha": "^2.2.42"
}
}
If you open your extension's information window, you might see a Contributions tab, and in there you might see a Commands list.
From there you can find the command that you want and bind to it in your keybindings.json file or File -> Preferences -> Keyboard Shortcuts
[
{
"key": "ctrl+enter",
"command": "command.execute",
"when": "editorTextFocus"
}
]

How to see or debug chrome content script in firefox nightly (webextensions)

Trying to port a working chrome extension to Firefox Nightly 46.0a1 and have a simple question! How do I get the content script to execute or see it at all?
Everything else but the content script seam to be running OK as the background script execute and the popup box is visible. I am able to debug these part of the code.
But the content script do not seam to run in any way!
As far as I understand it is supposed to be part of the normal page javascript environment and visible in the debugger - but it is not. Unable to see any error messages anywhere etc.
Might have used some unsupported API by mistake, but still strange that I get no warnings and are unable to see anything.
Any proposal about how to proceed?
Manifest file below:
{
"name": "Bla Bla",
"version": "0.0.1",
"manifest_version": 2,
"description": "A description",
"homepage_url": "https://aaa.org",
"icons":
{
"16": "icons/lock_red16.png",
"48": "icons/lock_red48.png",
"128": "icons/lock_red128.png"
},
"default_locale": "en",
"background":
{
"scripts":
[
"js/lib/jserror/jserror.js",
"js/lib/lang/languagedb.js",
"js/lib/lz77.js",
"js/lib/pcrypt.js",
"js/lib/pcryptapi.js",
"js/lib/forge.bundle.js",
"js/lib/elliptic.js",
"js/lib/srp6a/biginteger.js",
"js/lib/srp6a/isaac.js",
"js/lib/srp6a/random.js",
"js/lib/srp6a/sha256.js",
"js/lib/srp6a/thinbus-srp6client.js",
"js/lib/srp6a/thinbus-srp-config.js",
"js/lib/srp6a/thinbus-srp6a-config-sha256.js",
"js/pcrypt_shared.js",
"js/pcrypt_extension.js",
"src/bg/background.js"
],
"persistent": true
},
"browser_action":
{
"default_icon":
{
"16": "icons/lock_red16.png",
"48": "icons/lock_red48.png",
"128": "icons/lock_red128.png"
},
"default_title": "Password Crypt",
"default_popup": "src/browser_action/popup.html"
},
"permissions":
[
"clipboardWrite",
"storage"
],
"content_scripts":
[
{
"matches":
[
"http://*/*",
"https://*/*"
],
"js":
[
"js/pcrypt_extension.js",
"src/inject/inject.js"
]
}
],
"externally_connectable":
{
"matches":
[
"https://*.aaa.dk/*",
"https://*.aaa.org/*"
]
},
"web_accessible_resources":
[
"icons/*.png"
],
"applications":
{
"gecko":
{
"id": "benny#aaa.dk",
"strict_min_version": "40.0.0",
"strict_max_version": "50.*",
"update_url": "https://aaa.org/addon"
}
}
}
As far as I understand it is supposed to be part of the normal page javascript environment and visible in the debugger - but it is not.
No, they're not. They run in slightly more privileged contexts separate from the page environment so they can access the webextension APIs.
If you have e10s off you can use the browser toolbox. If it is on you need to use the browser content toolbox instead. You can also try about:debugging, although i'm not sure whether that already works for webextensions.
MDN docs have everything you need to know about debugging WebExt, including content scripts.

Resources