Including JS files to Crossrider project - javascript

I'm working on Crossrider extension, I'm new in extension development. I've create basic project based on demos and even included Jasmine for testing.
Unfortunately I stucked on creating own resources.
Here's my debug project's structure:
resources\
lib\
spec\
test-runner.js
src\
js\
App.js
popup.html
background.js
extension.js
test-runner.js:
(function() {
appAPI.resources.includeCSS('lib/jasmine/jasmine.css');
appAPI.resources.includeJS('lib/jasmine/jasmine.js');
appAPI.resources.includeJS('lib/jasmine/jasmine-html.js');
appAPI.resources.includeJS('lib/jasmine/boot.js');
$('body').html('');
appAPI.resources.includeJS('spec/App-spec.js');
})();
And here it is how I include this file:
appAPI.resources.includeJS('spec/test-runner.js');
And everything works fine.
Problems start when I'm trying to include App.js. I read that it should be done like this:
appAPI.resources.addInlineJS('src/js/App.js');
But it's not working.
Here's my App.js:
var App = {
init: function() {
console.log('App initialized');
}
};
$(document).ready(App.init);
Is it possible to include resources files inside extension.js or background.js, and also how to add more js files to project resources?

If I understand what you are trying to achieve correctly (i.e. add a resource script to the extension code), I think you have a scope issue.
appAPI.resources.addInlineJS adds the resource script to the HTML Page scope and once added, the code is not accessible by the Extension Page scope. To add the resource script to your extension code (i.e. extension.js code), use appAPI.resources.includeJS as follows:
appAPI.resources.includeJS('src/js/App.js');
[Disclosure: I am a Crossrider employee]

Related

Integration of angular 10 with existing PHP project

I have PHP project with having AngularJs plugins. I am migrating them to angular 10. It has functions implemented at PHP project controllers which has mechanism to load script files as below.
public function getJsFiles(&$jsFiles)
{
$jsFiles[] = "angular-plugins/dist/runtime.js";
$jsFiles[] = "angular-plugins/dist/polyfills.js";
$jsFiles[] = "angular-plugins/dist/styles.js";
$jsFiles[] = "angular-plugins/dist/vendor.js";
$jsFiles[] = "angular-plugins/dist/main.js";
}
So, I have create root level NG10 project & migrated few components in few modules and successfully integrated with single build files(main.js, polyfills.js, vendors.js,runtime.js, styles.js) mentioned above.
Project has functionality that when user disable that module it won't load relevant Js files on the page.
So Problem here is, to fulfil that I have generated module wise chunk files with lazy loading (e.g core-home.js, multisites.js), But when I try to integrate with PHP project, neither it's loading component on the page not giving any console errors.
Our main goal is to load project with PHP, anguarJs and angular 10 all together.
Note : Project runs on wamp server. Please check below image for folder structure & files loaded on PHP file.
project-structure
Thanks in advance.

Project structure in meteor and problems with import

I am new to meteor and i use it to create a webgl application for mobile devices.
My problem is the file structure. I already read the manuals so pls dont link to them.
1.The lib gets loaded first , so i put all my code that should be executed in main.js there?(i.g. for my webgl project i use a lot of oop, so does it make sense to put my code here?)
2.Consider the following structure
Everything i use for the webgl application is in the src folder, but if i want to Application.run(); i always get the error Uncaught Error: Cannot find module 'src/Application.js'. This problem occurs in every folder i put the src folder in, wether it is lib or import or whatever.
My Application.js looks like this:
var Application={};
Application.run = function () {
//code
}
module.exports = Application;
But what i really want for Application.js is:
function Application(){
//some stuff
}
Application.prototype.run = function(){
//some stuff
}
So how can i use the second approach of application.js in main.js AND if its not possible how should i do it instead?
From your screenshot, it looks like your Application.js file is actually named just Application (without the .js extension).
That may be the reason why your project does not find 'src/Application.js'.

Firefox add-on to add a .css and a .js file to a page

I want to make a Firefox add-on that adds a custom CSS and JavaScript file to the pages on http://*.example.com. Doing it with Chrome Extensions is pretty simple, but Firefox add-ons are a little bit confusing. What is the most simple way to do that? How can I make that add-on, step by step?
You should use the page-mod api, here is the documentation ( including simple code examples ):
https://developer.mozilla.org/en-US/Add-ons/SDK/High-Level_APIs/page-mod
In particular, you add js files using the contentScriptFile option, and css files using the contentStyleFile option. Here's a very simple example:
var data = require('sdk/self').data;
require('sdk/page-mod').PageMod({
include: ["*"],
contentScriptFile: [data.url('script.js')],
contentScriptFile: [data.url('style.css')],
attachTo: ["existing", "top"]
});
This code should be in ./lib/main.js in your add-on project directory and the files script.js and style.css should be located in the ./data/ sub-folder of your add-on project directory.

Requiring external JavaScript file

After reading all the relevant answers in SO and posts in the Appcelerator forums I still can't get this to work:
I have an application developed in Appcelerator, and I want to load an external JavaScript file in some of my controllers.
My App structure is as follows:
+ app
- assets
- controllers
- models
+ lib
- IndicatorWindow.js
...
Inside a controller I have the following code:
var uie = require('lib/IndicatorWindow');
But when I run this on an Android phone I get:
Uncaught Error: Requested module not found: lib/IndicatorWindow
I have also tried placing the lib folder outside of app, and using other paths such as /lib/IndicatorWindow and app/lib/IndicatorWindow.
I even tried using Ti.include() instead, with the same result. But I would rather use require() since I prefer using CommonJS modules.
Make a lib folder inside assets folder and paste the js file there and you would be able to require file just like you do in classic :)
Thanks
just use var uie = require('IndicatorWindow');
Also make sure it uses exports inside the JS

sdk/pageload-require is not defined

I have SDK 1.13 and I want to use pageload API to give the alert message when html form is loaded in firefox browser. but I'm getting an error on console: require is not defined.
I have linked cfx file of add on SDK to file system directory:
ln -s PATH_TO_SDK/bin/cfx ~/bin/cfx
Still, I am not able to solve this error. Here is my code (Included in XUL file):
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: "*.html",
contentScript: 'window.alert("Page matches ruleset");'
});
I assume you've installed the SDK and have run bin\activate within your extension before trying cfx run, right?
You can't run this stuff from an XUL file, which is why require... wont work. All of this needs to be in a main.js (in the lib folder). You'll need to communicate via the content script that you'll write (in the data folder). When the html loads (I'd add a window.listener or something from the content script) you'll use port.emit("loaded") or something similar and then you'll have to listen in the main.js with something like addon.port("loaded",somefunction). There's a lot of good documentation on this!
XUL files is quite an opposite of SDK modules. SDK and XUL Comparison.

Categories