0

FirefoxとChrome用のクロスブラウザ拡張機能を作成しようとしています。FirefoxはcommonJS仕様を使用し、ChromeはすべてをWebページのようにグローバル名前空間にまとめます。

再利用可能なコードを記述できるようにするために、requireJSを使用してChrome拡張機能のコードを検索しようとしています。これにより、commonJSモジュールを記述して、両方の環境で動作させることができます。

条件付きでモジュールを必要とするときに問題が発生します。たとえば、Firefoxはsimple-storage、ローカルストレージへのアクセスに使用する必要があるモジュールへのアクセスを提供します。Chromeでは、彼らが提供するlocalStorageAPIを使用する必要があります。だから、私はこれをやろうとしてきました：

// storage.js
define(function(require, exports, module){
  var store;      

  try {
    // This module will only be available in the FF extension.
    store = require('simple-storage').storage
  } catch(error) {
    // If it's not available, we must be in Chrome and we
    // should use the localStorage object.
    store = localStorage
  }

  // Use the store object down here.
});

ただし、これは機能していないようです。Chrome拡張機能を読み込もうとすると、次のエラーが発生します。

Chromeエラー

フォールバック付きのモジュールを要求するより良い方法はありますか？

4

1 に答える 1

0

ここで 2 つの注意事項があります。

1) Chrome が実行されているかどうかを検出する

// detects webKit (chrome, safari, etc..)
var isChrome = 'webKitTransform' in document.documentElement.style

2) Requirejs はdefine()関数を解析し、呼び出しを検索しrequire('module')ます。クロムでエラーを防ぐために、関数本体を解析するときに、呼び出しをモジュールの依存関係として認識しないrequireように何らかの方法で記述しました。requirejs

if (isChrome)
   // use localStorage
else {
   // set the module name in a var does the trick,
   // so requirejs will not try to load this module on chrome.
   var ffStorageModule = 'simple-storage';
   return require(ffStorageModule);
}
于 2012-08-24T15:38:55.483 に答える