Search code examples
javascriptcross-browsercrossrider

Including JS files to Crossrider project

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?

Solution

  • 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]