I'm unable to upload my firefox extension using the form provided by mozilla. I'm constantly getting the error Your add-on failed validation with 2 errors.
No install.rdf or manifest.json foundAdd-on missing manifest, which is very misleading because my application has a manifest.json.
The manifest.json looks like this:
{
"manifest_version": 2,
"version": 1.0,
"name": "my-extension-name",
"description": "Lorem ipsum dolor sit amet",
"background": {
"scripts": ["js/background.js"]
},
"main": "popup.js",
"browser_action": {
"default_icon": "img/icon_grey.png",
"default_popup": "popup.html",
"default_title": "loremipsum"
},
"engines": {
"firefox": ">=38.0a1"
},
"permissions": [
"activeTab",
"tabs",
"background",
"http://*/*",
"https://*/*",
"notifications",
"alarms",
"storage",
"webRequest",
"webRequestBlocking",
"clipboardRead"
]
}
What is missing for this to work?
I was running into the same problem but all of these instructions didn't solve it.
What i always did was to pack the whole folder, hence the manifest.json was not on the first level, when unpacked.
SOLUTION FOR ME
Select all files, instead of the folder, and then pack them as one .zip file and it should work. At least it did for me.
Here is a link to the MDN Documentation.
The very simple answer to this is that its unable to find the manifest in your zip file. This is caused because when you take a file and zip it using the default compressor in windows it takes the file and throws it into a sub folder of the zip file you created...
before compressing
folderYouWantCompressed
-FileInFolder.html
-Manifest.json
after compressing it will look like this
nameOfZip.zip
-folderYouWantCompressed
-FileInFolder.html
-Manifest.json
but what you want is
nameOfZip.zip
-FileInFolder.html
-Manifest.json
the reason Oliver Sauter answer works is because when you select all the files within the "folderYouWantCompressed" it compresses without the sub folder meaning you dont run into this problem and it has no problem finding the manifest file.
for what I can tell the "correct answer" seems to be signing the add-on itself and is able to get the manifest file properly, so it does work but just seems like a 3rd party way of doing it (I did not look into it too deeply)
Note: that I originally had my issue solved by looking at Oliver Sauter post I just wanted to make it clear for future people looking at this post.
When you open your addon package zip file, the manifest.json file should be visible to you in order to upload it on AMO.
In your case, it looks like when you open your package zip, there is a folder and inside that folder manifest.json is located.
As I have found a solution to my problem and would like to share it for future reference I answer my own question:
The issue at hand was that I did not use the web-ext command line tool to create the .zip / .xpi package. I was able to solve the problem by installing web-ext and using web-ext build to build the extension. The result of this operation is a .xpi file that contains the project which I was then able to upload to the AMO service. Note that the manifest.json in the newly created package is identical to the manifest.json I originally provided. However, in addition to the manifest.json a directory META-INF was created which contains a mozilla.mf, mozilla.rsa and mozilla.sf file.
This however, did not entirely solve my problem. After uploading the extension to AMO, it could not be installed and was said to be damaged. Apparently, which is what I read somewhere in the interwebz (and forgot the source), Mozilla opens the .zip / .xpi package that is uploaded to test it and since my package was not signed, Mozilla could not ensure its integrity and marked it as insecure (i.e. damaged).
In order to solve the second problem I had to sign the extension. This can be done using the following command:
web-ext sign --api-secret YOUR_API_SECTER --api-key YOUR_API_KEY
After this, I was able to upload and install the extension.
Got the same problem, the problem was thats the file name is case sensitive:
Manifest.jason -> error, no manifest found
manifest.json -> susscessful
my solution (in mac os):
zip a directory using zip in terminal command zip -r example.zip example instead of right-clicking files and clicking "Compress" in mac os
Related
Is there a way to extend the supported languages/grammars in Visual Studio Code?
I'd like to add a custom language syntax, but I've not been able to find any information on how language services are provided.
Can anybody point to any references or even examples of existing language implementations?
It's possible with the new version 0.9.0. There's an official documentation on how to add a custom language: https://github.com/microsoft/vscode-docs/blob/main/release-notes/v0_9_0.md
You need a .tmLanguage file for the language you want to add. You can find existing files e.g. on GitHub or you can define your own language file. Look here to get an idea of how to create one: http://manual.macromates.com/en/language_grammars
After finding a .tmLanguage file you have two ways to create an extension based on it.
Option 1: Using a Yeoman generator
Install node.js (if you haven't already done)
Install yo (if you haven't already done) by executing npm install -g yo
Install the Yo generator for code: npm install -g generator-code
Run yo code and select New language support
Follow the instructions (define the .tmLangauge file, define the plugin name, file extensions etc.)
The generator creates a directory for your extension with the name of the plugin in your current working directory.
Option 2: Create the directory on your own
Create a directory with the name of your plugin (only lowercase letters). Let's say we call it mylang.
Add a subfolder syntaxes and place the .tmlanguage file inside of it
Create a file package.json inside the root of the extension folder with content like this
{
"name": "mylang",
"version": "0.0.1",
"engines": {
"vscode": ">=0.9.0-pre.1"
},
"publisher": "me",
"contributes": {
"languages": [{
"id": "mylang",
"aliases": ["MyLang", "mylang"],
"extensions": [".mylang",".myl"]
}],
"grammars": [{
"language": "mylang",
"scopeName": "source.mylang",
"path": "./syntaxes/mylang.tmLanguage"
}]
}
}
Finally add your extension to Visual Studio Code
Copy the extension folder to the extension directory. This is:
on Windows %USERPROFILE%\.vscode\extensions
on Mac/Linux $HOME/.vscode/extensions
Restart Code. Now your extension will run automatically everytime you open a file with the specified file extension. You can see the name of the used plugin in the down right corner. You can change it by clicking on the name of the extension. If your extension is not the only one registered for a specific file extension then Code may chooses the wrong one.
To extend Wosi's .tmLanguage answer, using a .tmLanguage file is optional. Using a regular .json is a perfectly valid and—in my opinion—better readable alternative.
For an example, see VSCode_SQF: sqf.json
Inside the package.json, you would only need to change the path from ./syntaxes/mylang.tmLanguage to ./syntaxes/mylang.json.
Using reverse engineering you can add a new language to VSCode. You can take a look on how typescript is implemented as a JavaScript plugin and how it communicates with node.exe via pipe. But it's a hard thing since it's coming all without documentation
I'll provide a really short documentation here:
You can define a new plugin in the plugins folder C:\Users\USER\AppData\Local\Code\app-0.3.0\resources\app\plugins.
Copy the typescript plugin folder and rename mentioned file extensions and language names in all files to your new language, so that your new plugin is going to be used when a .mylang file is opened.
In typescriptServiceClient.js you see that a child process is being forked and that its stdout is coupled to a new WireProtocol.Reader. Bind your own mylanguage.exe (you'll probably need to write that exe on your own). VSCode asks that binary to get more language specific information.
In typescriptMain.js you find the feature registration for the language. Delete every call to monaco.Modes.XXXXXXSupport.register except monaco.Modes.DeclarationSupport.register.
Now open a directory in VSCode that contains .mylang files and open one of them via CTRL+P + FileName. Right click on an identifier and select Go to Definition. VSCode sends now a request like this via StdIn to your exe
{"seq":1,"type":"request","command":"definition","arguments":{"file":"d:/Projects/MyProj/Source/MyFile.mylang","line":45,"offset":9}}
VSCode expects an answer like this:
Content-Length: 251
[LINE BREAK]
{ "seq" : 1, "type" : "response", "command" : "definition", "request_seq" : 1, "success" : true, "body" : [{ "file" : "d:/Projects/MyProj/Source/MyOtherFile.mylang", "start" : { "line" : 125, "offset" : 3 }, "end" : { "line" : 145, "offset" : 11} }] }
If everything works VSCode will open MyOtherFile.mylang and set the cursor to line 124 in column 3.
Try it on your own ;-)
Simplest recipe IMHO as of 2021 Q2:
Follow Option 2 in Wosi's answer. You only need two files to get started. Just create the folder structure directly in your extensions directory.
Set "path": "./syntaxes/your_language.plist" in package.json
Use IRO to build your regexes.
Make sure that in the "Scope Information" screen, anything to do with Textmate is green. Don't worry about the other editors.
Save the contents of the "Textmate" tab into the path above, i.e., .syntaxes/your_language.plist
Reload VSCode
That's it. I also save the IRO (left pane) text into my own project.
You can read the source code of the built-in language extensions online:
https://github.com/microsoft/vscode/tree/main/extensions
You can pick an extension that is close to your language's syntax and change it as you wish. (e.g. you can do some modifications to the JavaScript extension and rebrand it for use with jQuery!)
It is important to note that this would be too much work if you choose a language that is so different from your desired language! If you didn't manage to find a language that is similar to your desired language, you may want to create a whole new extension from the ground up - https://stackoverflow.com/a/32996211/14467698 -.
I've just started noticing something strange in VSCode 1.24.1 on MacOS 10.12.6 Sierra.
My file explorer has been marking my current working directories as "unresolved". This does not prevent me from doing anything I normally would though I am wondering why this is happening. The folder name will be yellow and will be marked with an ! on the right.
I've tried closing and reopening the directories in my file explorer, restarting VSCode itself and moving the folder to a separate directory. Nothing doing.
I haven't been able to find much on the issue except in the case of people working in Typescript files that aren't properly configured in a manifest file on React projects. These are mostly HTML/CSS/Sass/JS/MySQL.
Any insight would be appreciated, thank you.
I was having the same issue on Windows when I had previously created different projects on the undefined workspace (the default workdspace of VSCode).
When I create a workspace and I placed my root folders inside this one workspace, it will warn that it could not resolve workspace folder.
You have to edit your workspace config file, change the path of your folders and then restart VSCode.
On the VSCode command palette, type: workspace config - then choose "Open workspace configuration file."
You should have something like this:
{
"folders": [
{
"path": "OneProject"
},
{
"path": "AnotherProject"
}
],
"settings": {}
}
What you want is something like this:
{
"folders": [
{
"path": "C:/Somewhere/OneProject"
},
{
"path": "C:/Somewhere/AnotherProject"
}
],
"settings": {}
}
It's a known issue, it was fixed here - https://github.com/Microsoft/vscode/issues/50866
As of the 1.24.1 version it's not yet available. But the fix listed above should correct the problem you are having.
Replace ${workspaceFolder} with ${FOLDER_NAME:workspaceFolder} in your *.code-workspace file. (from here)
By the way, same goes to ${workspaceRoot}, you can replace it with ${FOLDER_NAME:workspaceRoot}.
Any more folder variables ca be fixed with this FOLDER_NAME: prefix? My workspaces did not use them so far.
Worked for me in Version: 1.44.2.
I had this issue also with VS and also showing an exclamation mark as well as the error code you have said, my solution was to go into my work folder where my file was located and in that folder i right clicked and re-arranged the folder so it was showing them as application order and it got rid of the error code and exclamation mark.
In my case I resolved this by restarting the WSL machine by writing the following in the windows cmd
wsl --shutdown
take care this might stop running docker containers and other related processes.
Then I started a new wsl terminal and vscode worked like a charm.
I deleted the folder and created a new one with a different name and it was fixed. No workspace config file fix needed as it fixes/updates itself when you change folder structure and update projects.
Please, remember to check what you opened. I struggled for this very stupid error for a day.
If you open VSCode, and then Open Folder, and then Add Folder, do not execpt theat ${workspaceFolder} will be you last folder, or the folder of your code. Its valeue will be the first folder you added...
I have a new Firefox add-on with the following directory structure:
/
package.json
data/
icons/
icon48.png
In my package.json file I have this:
"icon": "data/icons/icon48.png",
(among other things). When I run jpm run as recommended by the Firefox add-on docs, the extension loads but the icon is not visible in the add-on manager. Any idea what I'm missing? I have been referencing this page: https://developer.mozilla.org/en-US/Add-ons/SDK/Tools/package_json#icon, but no luck.
Thanks!
Apparently this is a bug. See this issue in the jpm repository.
For me, moving the icon image to the root directory (i.e. the same path as package.json) and renaming it "icon.png" fixed the problem.
I still have this bug with jpm 1.0.6 version. I solved it adding the next icon path:
{
"id": "jid1-AKuBexDY5zJsIQ#jetpack",
"icon": "resource://jid1-akubexdy5zjsiq-at-jetpack/data/images/icon48.png",
}
Note that the "path" is similar to the "id" field but there are not capital letters
All is in the title :)
How can I build css from sass file in vscode ?
In task file I just found lines for LESS not for SASS...
Thanks a lot !
I got it to work.
My root path has a /css folder underneath with my styles.scss file & the associated map file. I also had to fix my path for ruby. Once those two were working, my build showed an error where ruby couldn't find the scss file. So I fixed my task file - here is the working file. Notice the ${fileDirname} - that fixed the build errors for pathing.
{
"version": "0.1.0",
"command": "sass",
"args": ["${fileDirname}/styles.scss", "${fileDirname}/styles.css", "--trace"],
"isShellCommand": true
}
}
But this was just a test -- it doesn't watch and build more than 1 file as you would normally want to in a larger system. The docs for gulp/automation are here: https://code.visualstudio.com/Docs/languages/CSS
We don't have predefined problem matchers for SASS yet. You might want to open a feature request here https://code.visualstudio.com/Issues/List
But you can always create a problem matcher for SASS yourself. Have a look at the doc here: https://code.visualstudio.com/Docs/tasks#_defining-a-problem-matcher
Using Koala and started using it by adding the 'css' directory. My directory structure looks like
-- www
-- -- css
-- -- -- template.css
-- -- -- template.scss
I've checked 'compass mode' in Koala but it is giving error 'You must compile individual stylesheets from the project directory'.
I just had this error and resolved it by editing the Koala project settings.
In Koala, right click on your project's folder, follow the menu for Project Settings > New Settings > For SASS
Koala will ask if you want to create a koala-config.json. Answer, yes. Unless this file already exists. In that case go directly to editing it.
Edit the section of koala-config.json called Mappings. Keep in mind that koala-config.json is in the my-project-folder root and the "src" and "dest" values should be relative to that file. So, for me, all my CSS files are in my-project-folder/assets/css and I changed the config file as below:
// The mappings of source directory and output directory
"mappings": [
{
"src": "assets/css",
"dest": "assets/css"
}
],
For you, I suspect this should do it:
// The mappings of source directory and output directory
"mappings": [
{
"src": "www/css",
"dest": "www/css"
}
],
The instructions above did not help me.
SOLUTION: I simply changed the NAME of the FOLDER that held my .scss files from scss to sass, deleted the .rb and .json files (if they exist) and reloaded my file to Koala.
I hope it works for you all.
Check if your computer has Ruby installed. Then set projects paths in Koala as #helgatheviking said