I'm developing a Safari App Extension. But my content scripts are out of Xcode project folder. Is it possible to import those script files?
I see in Apple's official document:
For each script file, add a dictionary to the array. Each dictionary must have a Script key whose value specifies the path (relative to the Resources directory of the bundle) to the script file to include.
Assume my extension project called SafariExt. Folder structure of my app:
SafariExt // Xcode project root folder
|
+-- SafariExt Extension
|
+--script.js // this is the default script file in Xcode project, and I specified path relative to this folder
Scripts // my scripts folder
|
+-- myScript.js // the file I want to import
SafariExt and Scripts are in the same base folder.
Now I'm using ../../Scripts/myScript.js in Info.plist to refer to myScript.js file, but in Safari this file doesn't get loaded.
Info.plist looks like below:
<key>SFSafariContentScript</key>
<array>
<dict>
<key>Script</key>
<string>../../Scripts/myScript.js</string>
</dict>
</array>
You should be able to load content scripts from the web using safari.addContentScriptFromURL. You could try using that in conjunction with file:// to see if it allows you to pull from outside your project directory.
Really though, you should be copying files into your extension directory with a build script if possible instead of having relative directory links.
https://developer.apple.com/documentation/safariextensions/safariextension/1635361-addcontentscriptfromurl
Related
I'm using ReactNative and I have package.json in my local directories so I can have easier imports.
Example:
I have src/components folder and I want to import all components as :
import Button from 'components/Button;
and not use relative path as
import Button from '../../../components/Button;
I created package.json file in my components folder with name 'components' and now I can access Button component as needed.
But, there is problem with PhpStorm. PhpStorm doesn't recognize this as valid path. Is there any workaround for this?
This React native hack for specifying absolute paths (not officially documented anywhere, as far as I can tell) had never been supported. If you miss this feature, please follow WEB-23221 for updates. You can try creating a dummy webpack config like it's suggested in https://youtrack.jetbrains.com/issue/WEB-23221#focus=streamItem-27-2719626.0-0 and specifying a path to it in Settings | Languages & Frameworks | JavaScript | Webpack as a workaround.
Another workaround (if you aren't renaming paths, just making it shorter) is marking a parent folder of components directory as Resource root (note: not the subdirectory itself, but its parent dir!)
This is my current folder structurebefore packaging
WRM_80.. is my downloaded folder.
I have these two lines of code inside index.js to download and show html in my electron window
fs.createReadStream('./Report.zip').pipe(unzip.Extract({ path: './'+folderName }));
LoginWindow.loadURL(`file://${__dirname}./`+folderName+`/t01s01q01.html`);
in development mode its working fine, file downloaded inside the same folder where my index.js exists. But after packaging the app file is downloading outside app folder. Packaged folder structure is given below WRM_80.. is my downloaded folder.
after packaging
That's why I can not load that downloaded file into window. How can I download file inside app folder? If that is not possible, how can I load external file from resources\app location ?
By referencing the directory as ./folder_name you are essentially telling the application to download to the working directory. In this case, the working directory is the folder that the program is contained in. While developing and using the electron command, the working directory is the root of your application. However once installed and running as a .exe, the working directory changes to the location of the executable.
To solve this problem, do not use the current working directory. Instead use the user / application data folder to store this information. It is not only a consistent location across development and deployment, but it is also the semantically correct place to store application data.
In Electron you can get the path to the application data folder for your app with:
const {app} = require('electron');
app.getPath('userData')
So your code should look something like this:
var userData = app.getPath('userData');
fs.createReadStream(`${userData}/Report.zip`).pipe(unzip.Extract({ path: `${userData}/${folderName}` }));
LoginWindow.loadURL(`file://${userData}/${folderName}/t01s01q01.html`);
I'm trying to get my head around this sass importer:
https://github.com/idcware/node-sass-jspm-importer
I'm not entirely certain I'm trying to use it correctly.
I'm trying to use the example of using it to import font-awesome.
The GitHub page provides the following example
gulp.task('build-sass', function() {
return gulp.src('src/sass/*.scss')
.pipe(sass({
errLogToConsole: true,
functions: sassJspm.resolve_function('/lib/'),
importer: sassJspm.importer
}))
.pipe(gulp.dest('dist/css'));
});
In this example I'm uncertain how much of a bearing this section has:
gulp.src('src/sass/*.scss')
How does this path make any sense when the SASS/SCSS files are to be imported from JSPM Packages which would have paths like:
jspm_packages/npm/font-aweesome#4.6.3/scss
The lib folder in this section
functions: sassJspm.resolve_function('/lib/'),
Should that be /jspm_packages/ since in the documentation it specifies
Where /lib/ is the path to your jspm_packages folder in your document
root.
In which case why did they not just specify jspm_packages?
I was thinking about this all wrong. One of the things I was missing was that with SASS/SCSS you can use import directives. As such rather than import many generated css files it makes more sense to have the SASS compiler/importer produce one single CSS File.
So I created a single SCSS file that was outside of my JSPM_Packages folder in src called SCSS.
In this SCSS file I could then place the following code
$fa-font-path: jspm_resolve("font-awesome/fonts/");
#import "jspm:font-awesome/scss/font-awesome";
The line in the gulp file:
gulp.src('src/scss/*.scss')
Can then find this single SCSS File and from there work out how to import all the SCSS Files for Font-Awesome through the JSPM_Package folder structure. A single main CSS file was then placed in the destination directory which contained the css from font-awesome.
Which in my case where I'm using ASP.NET Core looks like this:
.pipe(gulp.dest('./wwwroot/css'));
The functions line needed to be set to jspm_packages
functions: sassJspm.resolve_function('/jspm_packages/'),
I'm not sure why they have it as lib in their documentation - maybe this was an old JSPM configuration?
I am starting a new Theme from scratch and have a file called 'Assets.json' in the root directory.
It maps the LESS file from the 'Assets' directory to a CSS file in the 'Styles' directory - great.
Can anyone point me in the right direction as to how I can make use of this, as it's exactly what I want but can't find any information on how to use it.
Thanks!
The Assets.json file is a way to plug into the default gulp script that is provided with Orchard. This script is able to process .less files (and others) in order to generate minified and non-minified versions of scripts or stylesheets, and bundle your grouped assets. This way you don't have to create your own gulp file for each module, just describe the assets you want to be processed and it will do it automatically.
It will also watch the files you described and re-process them when they have changed. The simplest way to use them is to copy-paste one from the core modules, and place them in your own module or theme. Then just run the main gulp file, or enable its support in Visual Studio. You can run npm install from the root folder for this.
I am trying to figure out how I can accomplish the following using brunch. This is the current directory structure for our app:
--app
--base (theme folder, considered the master for all themes)
--sass
--js
--theme2
--sass
--js
--theme3
--sass
--js
...so on
The base folder serves as a master for all other themes. However, if another theme has a file in the sass directory or js directory that matches one in the base folder it overrides that file in the base folder (this applies for imports as well).
I have so far created this which works the way it needs to but it circumvents the brunch pipeline in that I write out the files (doesn't currently support file concatenation) and I would prefer to do this using the proper brunch pipline.
What happens is that each sass or js file it encounters in the base folder is used to generate a new file for another theme. E.g say the base theme has a file called main.scss. The path passed to compile is base/scss/main.scss. Now I want to use this same file for the other themes so I get all the theme folders and dynamically use this base main.scss file for each of the other themes. However, I also alter the inner imports to substitute files imports if they exist in the other themes directory. Its not the same file being spat into multiple locations.
The problem is that I want to dynamically generate new CSS files for brunch to render to different folders not related to the original path passed in (and thus the joinTo config option for this path). By calling the callback, it automatically uses the original path parameter passed to the compile method.
Use overrides in your brunch-config to change your joinTos to include base plus the given theme. You can also customize the build output directory or anything else for each theme if that helps. Then run each build separately using a command like brunch build --env theme1.