-2

I'm trying to port a Chrome Extension to a Firefox add-on using the WebExtensions API. I am using RequireJS to load JavaScript files. The code below is working fine in my Chrome extension, but not in Firefox.

Anyone have any advice on this? Thanks.

manifest.json:

{
"name": "Firefox WebExtension",
"version": "0.0.5",
"manifest_version": 2,
"description": "First Firefox WebExtensions",

"icons": {
    "16": "img/c-ext3.png",
    "48": "img/c-ext3.png",
    "128": "img/c-ext3.png"
},
"background": {
    "scripts": [
        "js/vendor/require.js", "js/config/loader.js", "js/config/requireInit.js"
    ]
},
"applications": {
    "gecko": {
        "id": "abc@mozilla.org",
        "strict_min_version": "44.0",
        "strict_max_version": "50.*"
    }
},
"browser_action": {
    "default_icon": "img/c-ext3.png",
    "default_title": "Firefox WebExtension",
    "default_popup": "src/browser_action/browser_action.html"
},

"permissions": [
    "contextMenus",
    "cookies",
    "http://*/*", "https://*/*", "file://*/*",
    "notifications",
    "tabs",
    "<all_urls>"
],

"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",


"content_scripts": [{
    "matches": ["http://*/*", "https://*/*"],
    "js": ["js/vendor/require.js", "js/config/loader.js", "js/config/requireInit.js"]
}],
"web_accessible_resources": [
    "js/*", "src/*", "css/*", "img/*"
]}

loader.js

  require.load = function(context, moduleName, url) {

  var xhr = new XMLHttpRequest(),
      evalResponseText = function(xhr) {
          eval(xhr.responseText);
          context.completeLoad(moduleName);

      };

  xhr.open("GET", url, true);
  xhr.onreadystatechange = function(e) {
      if (xhr.readyState === 4 && xhr.status === 200) {
          evalResponseText.call(window, xhr);
      }
  };
  xhr.send(null);


 };

requireInit.js:

var baseUrl=browser.extension.getURL("/");
requirejs.config({
    config: {
        text: {
            useXhr: function (url, protocol, hostname, port) {
                // allow cross-domain requests
                // remote server allows CORS
                return true;
            }
        }
    },
    skipDataMain: true,
    baseUrl: baseUrl,
    paths: {
        "jquery": "js/vendor/jquery",
        "underscore": "js/vendor/lodash",
        "backbone": "js/vendor/backbone",
        "marionette": "js/vendor/marionette",
        "app": "js/app"
    }
});

console.log("before loading files");//working

require(['jquery', 'app/csApp'], function ($, app) {
    console.log("all js loaded");//not working
});

csApp.js

console.log("inside cs app");//working
    define(function(require) {
      'use strict';
     var $ = require('jquery'),
        _ = require('underscore'),
        Backbone = require('backbone'),
        Marionette = require('marionette'),
        csApp = new Marionette.Application();

       console.log("csApp");//not working
          return csApp;
    });

Edit: console.log() inside jQuery works. But, console.log() inside csApp.js is not working.

4

1 に答える 1

0

問題の原因を見つけました。

ロダッシュです。

underscore.js の代わりに lodash.js を使用していました。

"underscore": "js/vendor/lodash",

Lodash は Firefox 45-46 と互換性があり、最新の Firefox 47.0 を使用しています。そのため、lodash をアンダースコアに置き換えたところ、Web 拡張機能が正常に動作するようになりました。

于 2016-06-21T09:14:49.120 に答える