-2

我試圖使用WebExtensions API將Chrome擴展程序移植到Firefox附加組件。我正在使用RequireJS加載JavaScript文件。 以下代碼在我的Chrome擴展程序中正常工作,但在Firefox中無法正常工作。RequireJS不會在Firefox中使用JavaScript WebExtensions附加組件

任何人有任何意見嗎?謝謝。

的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": "[email protected]", 
     "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; 
    }); 

編輯:console.log()內jQuery的工作。但是,console.log()裏面csApp.js不起作用。

+1

好的,當你看看Firefox提供的診斷工具和控制檯時,你在那裏看到了什麼?有*什麼*加載在所有?有些東西加載,其他加載不了?編輯您的問題以添加這些詳細信息。根據你在問題中提供的信息,一種可能性是'requireInit.js'不是由Firefox執行的,但這只是一個猜測。 – Louis

+0

感謝您的建議@Louis請參閱編輯.. – sweeta

+0

您已經消除了我在評論中表達的一種可能性。很好,但你在我的評論開始時沒有回答我提到的任何問題。請編輯您的問題以回答它們。 – Louis

回答

-1

我發現問題的來源。

它是Lodash

我正在使用lodash.js而不是underscore.js。

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

Lodash與Firefox 45-46兼容,我使用的是最新的Firefox,即47.0。所以我用下劃線代替lodash,現在我的網絡擴展工作正常。