I have created a theme for Firefox that involve a simple stylesheet. I am currently using Stylish extension for this but would like to share my theme as an Firefox addon (since Theme are simple image).
I didn't quickly find anything about that in search engine and only find an outdated ressource on MDN.
Any tip to make share this CSS as an addon? (bonus: automate release from a git repo)
If it's a simple stylesheet as you described, then you would have to attach the stylesheet to the nsIDOMWindow. Example code with addon-sdk
const { attachTo, detachFrom } = require("sdk/content/mod");
const { Style } = require("sdk/stylesheet/style");
const { getMostRecentWindow } = require("sdk/window/utils");
const { browserWindows } = require("sdk/windows");
const { viewFor } = require("sdk/view/core");
const style = Style({
uri: "./index.css" // path to file
});
attachTo(style, getMostRecentWindow());
browserWindows.on("open", function(window) {
attachTo(style,viewFor(window));
});
require("sdk/system/unload").when(function() {
for (let window of browserWindows)
detachFrom(style, viewFor(window));
});
EDIT:
To start using addon-sdk you must have jpm. Here it is described how to install it. Once you installed it, you should create a directory that will contain your extension. Then open a terminal/console and type jpm init. Fill the prompted fields according to your needs. You can also check out these additional options available in the package.json (it's in the root of your directory with the extension) and use them aswell.
The next step is to paste my code in the index.js (you can paste the code somewhere else but then you have to import that file using require). Create a directory "data" in the extension directory and create a file with stylesheet there. Then replace "index.css" here
uri: "./index.css"
with your file name.
Once you are done, type jpm xpi in your terminal/console and your extension is ready to install! Good luck
Related
Hello fellow developers/programmers. Today I come to ask for help with something, and is that I'm making an app that if or if it has to be portable, the problem I'm having is that when writing a zip file the app does not find the directories or generates the zip corruptly.
My code that writes the zip file looks like this:
ipcMain.on("report-file", async (event, data) => {
let zipFilePath = "report.zip"
let output = fs.createWriteStream(zipFilePath);
let archive = archiver("zip")
archive.pipe(output);
if (data.saves) {
archive.directory(`game/saves`, false)
archive.directory(`game/cache`, false)
}
archive.append(fs.createReadStream(`log.txt`), {
name: `log.txt`,
})
archive.append(fs.createReadStream(`traceback.txt`), {
name: `traceback.txt`,
})
archive.finalize()
});
Electron Version: 21.2.3
SO: Windows 11
electron-builder Version: 23.6.0
Looking a little more in depth, I found that the app is using the address
C:\User\User\AppData\Local\Temp\[id]\resources\app.asar
and it is trying to compress the files as if they were in that path, however, the files to compress are located where the .exe is. (G:\myapp\dist)
I already tried to fix it by following an old post on the stackoverflow page, however, it didn't solve the problem, so today I decided to ask my question here, do you have any idea how to get the actual path of an electron js portable app?
I found the solution to this, and it was to create a dialog with electron, and load the folder location. Then use resolve together with the address of the executable, this way it loads correctly the address of the folder where the exe is located.
let dir
dir = await dialog.showOpenDialog(win, {
properties: ['openDirectory'],
defaultPath: path.resolve('.', process.env.PORTABLE_EXECUTABLE_DIR)
});
I am trying to add a custom favicon to my NestJs documentation. However, I am a bit lost on how the path file gets resolved and not sure how to achieve this.
I am using nestjs/swagger module version 3.1.0 and trying to pass the path file like so when initializing the Swagger Module.
My main.ts file
SwaggerModule.setup('/v1/docs', app, document, {
customCss: CUSTOM_STYLE,
customSiteTitle: 'My API Documentation',
customfavIcon: './public/favicon.jpg'
});
Searched on the github issues and didn't find anything useful. And as you can see from the code I was able to modify the CSS styles, but I cannot figure out how to make the favicon custom.
Appreciate any help
I have added the custom favicon to my swagger docs using following:
The first thing you make sure is, in your main.ts, the app is initialized with the following:
const app: NestExpressApplication = await NestFactory.create(...)
To serve static content you must initialize your app with NestExpressApplication.
The next thing is to allow the Nest application to look for public content using the following in your main.ts after initialization:
app.useStaticAssets(join(__dirname, '..', 'public'));
Also, create a public directory in your root of the application and paste your favicon.jpg file in it.
Now its time to initialize the Swagger in main.ts
SwaggerModule.setup('/v1/docs', app, document, {
customCss: CUSTOM_STYLE,
customSiteTitle: 'My API Documentation',
customfavIcon: '../favicon.jpg'
});
You must give a relative path to the root of the application like ../favicon.jpg in case our main.ts is in src folder in root of the application.
Alternative solution, just host your favicon and reference it with external url
SwaggerModule.setup('api', app, getSwaggerDocument(app), {
...
customfavIcon:
'https://[your-bucket-url].com/.../anything.png',
});
To iterate on pravindot17's answer, now there's the #nestjs/serve-static package for hosting static files. Which avoid us from type-casting the Nest.js client and relying on our implicit assumption that we're running an Express-backed Nest.js server.
After installing the package, you hook it into your src/app.module.ts. This configuration expects that the root of your project has a /public/ folder where you store your static assets.
import { Module } from '#nestjs/common';
import { ServeStaticModule } from '#nestjs/serve-static';
import { join } from 'path';
#Module({
imports: [
// Host static files in ../public under the /static path.
ServeStaticModule.forRoot({
/**
* Config options are documented:
* https://github.com/nestjs/serve-static/blob/master/lib/interfaces/serve-static-options.interface.ts
*/
rootPath: join(__dirname, '..', '..', 'public'),
serveRoot: '/static',
}),
// ...
})
export class AppModule {}
Now my own preference is using an absolute path rather than relative, as it makes it independent from the path we picked to host our API documentation under.
SwaggerModule.setup('/v1/docs', app, document, {
customfavIcon: '/static/favicon.jpg'
});
One last note is that this configuration hosts static files from /static/*, this is done to prevent that API calls to non-existing endpoints show an error message to the end-user that the static file cannot be found.
Otherwise, all 404's on non-existing endpoints will look something like:
{"statusCode":404,"message":"ENOENT: no such file or directory, stat '/Users/me/my-project/public/index.html'"}
I'm reading through electron and electron-builder docs, but I still do not quite understand what is the purpose of the buildResources folder?
Here's what a configuration doc for electron-builder says:
buildResources = build String - The path to build resources.
Kind of self-explanatory... But how or when they are involved in the build process, especially having that:
...build resources is not packed into the app. If you need to use some
files, e.g. as tray icon, please include required files explicitly
Can we simply put those icon files in an arbitrary folder and then copy over into the app/ manually (since we need to include buildResources manually anyway)?
TL;DR:
As far as I can tell from a quick glance at the source code, the buildResources folder is used to hold additional scripts, plugins, etc. that can be used by the package building software. Electron-builder doesn't generate the packages itself, it uses tools like NSIS.
Explanation:
I've had the same question and unfortunately find an answer for this isn't very straight-forward. The docs entry is pretty useless. I found out that someone asked about it in the GitHub issues but never got an answer.
I decided to dig in the code a bit myself to find out what it does. In NsisTargets.ts, you can see that the buildResources folder can contain custom includes and plugins for NSIS.
// NsisTargets.ts
taskManager.add(async () => {
const userPluginDir = path.join(packager.info.buildResourcesDir, pluginArch)
const stat = await statOrNull(userPluginDir)
if (stat != null && stat.isDirectory()) {
scriptGenerator.addPluginDir(pluginArch, userPluginDir)
}
})
// [...]
taskManager.add(async () => {
const customInclude = await packager.getResource(this.options.include, "installer.nsh")
if (customInclude != null) {
scriptGenerator.addIncludeDir(packager.info.buildResourcesDir)
scriptGenerator.include(customInclude)
}
})
and in pkg.ts it's used to load additional scripts to the pkg builder:
// pkg.ts
if (options.scripts != null) {
args.push("--scripts", path.resolve(this.packager.info.buildResourcesDir, options.scripts))
}
It appears as though buildResources can contain assets/scripts specifically used for the build process. That also explains why the contents of buildResources aren't included in the resulting app.asar file.
So, I'm going to say straight away that the documentation for this option is just awful.
Files included in buildResources will appear in the asar file which you can find documentation about on electron's website.
The option files will include files such as pictures which are not accessible in the asar file.
I.E.
given I have a folder called assets in my build folder I want to include with my app.
"files": [
"./build/**/*"
],
"directories": {
"buildResources": "assets"
}
This will put all folders inside build into the asar file, which you can then unpack by including,
"asarUnpack": "**/assets/*"
This will put the folder assets into the build folder in the app directory.
I am creating a Flutter project in which, I have a piece of data (JSON) that I want to Import from and Export to a location the user wants to. In order to achieve this, I require a File Picker plugin in Flutter. Now, I searched the Dart Packages repository for "file picker" but didn't find one.
Is there a way to get a File Picker that looks like this:
or even this...
The first screenshot is preferable for me as it allows file selection from different sources (like Drive).
Also, since I want to Export the data, I might want a Folder Picker too. ;)
But, if there is any other alternative to Folder Picker. I'd be happy to know...
I've created a file_picker plugin some time ago in order to make it possible to pick (both on iOS and Android) absolute paths and then loaded it with Flutter.
You can check it here: https://pub.dev/packages/file_picker
I used file_picker library to pick files. you can use this for pick images as well.
Future getPdfAndUpload(int position) async {
File file = await FilePicker.getFile(
type: FileType.custom,
allowedExtensions: ['pdf','docx'], //here you can add any of extention what you need to pick
);
if(file != null) {
setState(() {
file1 = file; //file1 is a global variable which i created
});
}
}
here file_picker flutter library.
I'm in the exact same boat as you, haha!
I noticed documents_picker 0.0.2. It allows the user to pick multiple files, and it seems to fit the need!
check it out: https://pub.dartlang.org/packages/documents_picker#-readme-tab-
Here's a better document picker. It looks like the native document picker from the Storage Access Framework, which is what you have in your picture.
flutter_document_picker
Just found the FileSelector plugin from flutter.dev. Compatible with MacOS, Windows and Web.
From its pub.dev page:
Open a single file
final typeGroup = XTypeGroup(label: 'images', extensions: ['jpg', 'png']);
final file = await openFile(acceptedTypeGroups: [typeGroup]);
Open multiple files at once
final typeGroup = XTypeGroup(label: 'images', extensions: ['jpg', 'png']);
final files = await openFiles(acceptedTypeGroups: [typeGroup]);
Saving a file
final path = await getSavePath();
final name = "hello_file_selector.txt";
final data = Uint8List.fromList("Hello World!".codeUnits);
final mimeType = "text/plain";
final file = XFile.fromData(data, name: name, mimeType: mimeType);
await file.saveTo(path);
MacOS: Provide file read or/and write privileges
On target MacOS please provide sufficient rights using Xcode:
In case you don't provide file read or/and write permissions, the call to
final XFile? file =
await openFile(acceptedTypeGroups: <XTypeGroup>[typeGroup]);
neither shows anything not returns.
I worked with CKEditor on my .Net Mvc4 project. On localhost all works well, but after publishing project to server is not initialising:
"Uncaught TypeError: Cannot set property 'dir' of undefined"
I fixed this by adding code line before editor initialization:
CKEDITOR.basePath = '//some url/ckeditor/'
After that, the ckeditor is working but refusing to open image upload dialog:
error in ckeditor plugins image.js
Uncaught Error: [CKEDITOR.dialog.openDialog] Dialog "image" failed when loading definition.
There is no any changes in my ckeditor folder. The version is: 4.4.5
Any solutions please?
Check the "Network" tab in your browser for HTTP 404 errors. It looks like the file that contains Image Dialog definition is not available. Either it is not present (e.g. has been accidentally removed) or you have some weird url rewrite issues.
Check in your CKEDITOR.basePath plugins folder image plugin is in there, if not then add it and wala working like a charm ! hope it helps !
Issue
You are getting the error from only including the ckeditor.js (or ckeditor4.js since 4.13) file on server, with this error becoming raised when CKE attempts to load other features such as plugins and languages but cannot find these files in the basepath folder. You can confirm this from the network tab in browser devtools, as CKE attempts to load features, then cannot find them.
Option 1: Link to a CDN Bundle
CKE offers 3 primary bundles (basic, standard, full) which offer a choice between features and page load. More info here.
Option 2: Include Necessary Files
Make the extra files available on your server.
Here's a gulp task which bundles everything from the ckeditor node module folder (excluding the sample).
gulp.task("copy-ckeditor", function () {
// Check and copy languages in config.ckEditorLanguages
var isIncluded = function(path) {
var found = false,
lang = path.split('lang')[1];
if (lang) {
for (var i in config.ckEditorLanguages) {
if (lang.indexOf(config.ckEditorLanguages[i]) != -1) {
found = true;
}
}
}
return found;
},
copyFile = function(stream) {
stream.pipe(gulp.dest(config.buildPath.js + "lib/ckeditor"));
};
return gulp.src([
"node_modules/ckeditor/**/*.*",
"!node_modules/ckeditor/samples",
"!node_modules/ckeditor/samples/**/*"
])
.pipe(foreach(function(stream, file){
if (file.path.indexOf("lang") != -1) {
if (isIncluded(file.path)) {
copyFile(stream);
}
} else {
copyFile(stream);
}
return stream;
}));
});
Option 3: Build and Host Your Own Custom Bundle
If you want to use a single file load, you can use the CKE4 Builder allowing you to customise built-in plugins.