Question

要在服务器上的dev / stage / prod之间切换，我设置了一个ENV变量。这是非常标准的。

使用离线Chrome应用，如何在dev / stage / prod之间切换？特别是围绕REST API URL？

在开发过程中，我的应用程序安装在chrome中作为＆＃34;解压缩＆＃34;应用

SOLUTION：

我将这些答案结合起来。这就是我的所作所为：

在安装时，如果解压扩展名，我在localStorage中设置了一个值。
在app运行时，我将变量设置为localstorage值，如果未定义则设置为production。

FWIW，这是代码：

background.js：

chrome.runtime.onInstalled.addListener(function () {
  console.log('onInstalled');

  // Note: this event is fired every time the "Reload" link is clicked in
  // 'Chrome Apps & Extensions Developer Tool'.  So only set if not set.

  // If unpacked extension, 
  if(!chrome.runtime.getManifest().update_url) {
    // Load existing value
    chrome.storage.local.get('APIBaseURL', function(data) {
      // Has value already been set?
      if (!data.hasOwnProperty('APIBaseURL')) {
        // set API server to localhost
        chrome.storage.local.set({'APIBaseURL': DEV_APIBASEURL }, function() {
          // Ok, notify the console.
          console.log('Installed in dev mode: APIBaseURL = '+DEV_APIBASEURL);
        } );
      }
    });
  }
});

App.js（这是Angular，但你应该看到模式。承诺是ES6）

var PROD_APIBASEURL = 'https://production.com';

angular.module('wmw', ['wmw.routes'])

// Listen for online/offline events and set status in $rootScope
.run(['$rootScope', function($rootScope){

  // Determine which server to run on
  $rootScope.isDev = chrome.runtime.getManifest().hasOwnProperty('update_url');

  // Async init code is in a Promise
  $rootScope.promiseAppReady = new Promise(function(resolve, reject) {
    // Get the Base URL
    chrome.storage.local.get('APIBaseURL', function(data) {
      // Apply it to our scope.  If not set, use PROD.
      $rootScope.$apply(function() {
        if (data.hasOwnProperty('APIBaseURL')) {
          $rootScope.APIBaseURL = data.APIBaseURL;
        } else {
          $rootScope.APIBaseURL = PROD_APIBASEURL;  
        }
        resolve($rootScope.APIBaseURL);
      });
    });
  });

}]);

$rootScope.promiseAppReady让我知道代码完成后应用程序是否准备就绪。 $rootScope.$apply()气泡会更改为其他范围。如果您不使用Angular，则可以将其删除。

我还在一些调试工具中包含了这段代码：

var debugTools = {
  setAPIBaseURL: function (url) {
    chrome.storage.local.set({'APIBaseURL': url});
  },
  showAPIBaseURL: function() {
    chrome.storage.local.get('APIBaseURL', function(data) {console.log(data)});
  }

}

所以在控制台中更改很容易。

Answer 1

在控制台chrome.runtime.getManifest().update_url中，如果从商店安装，则会有一个值。如果没有，则未定义。

参见How to distinguish between dev and production in a Firefox extension I'm building? 并Check if Chrome extension installed in unpacked mode

Answer 2

根据您的说明，我认为您不希望Chrome应用程序仅在从Chrome网上应用店安装时与远程服务器通信，并且仅在解压缩安装时与本地服务器通信。我认为你可以选择与任一服务器通信，无论它是如何安装的。

因此，我会根据本地存储中的密钥对应用程序进行编程以选择其服务器。然后，您可以从“开发人员工具”面板（“资源”）选项卡轻松设置该密钥。如果密钥未定义，则使用远程服务器。

离线Chrome打包应用程序：如何管理产品和开发模式

2 个答案: