Автономное Chrome Packaged App: как управлять режимами Prod и Dev

Чтобы переключиться между dev/stage/prod на сервере, я установил переменную ENV. Это довольно стандартно.

Как я могу переключаться между dev/stage/prod и автономным приложением Chrome? Особенно вокруг URL REST API?

Во время разработки мое приложение устанавливается в chrome как "распакованное" приложение.

РЕШЕНИЕ:

Я объединил эти ответы. Вот что я сделал:

  1. При установке, если распаковано расширение, я устанавливаю значение в localStorage.

  2. При запуске приложения я устанавливаю переменную на значение localalstorage или на производство, если оно не определено.

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)});
  }

}

так что было легко изменить в консоли.

Источник

2 ответа

Решение

Из вашего описания я не думаю, что вы хотите, чтобы приложение Chrome общалось только с удаленным сервером, если оно установлено из Интернет-магазина Chrome, и только с локальным сервером, когда оно распаковано. Я бы подумал, что вы захотите поговорить с любым сервером, независимо от того, как он установлен.

Итак, я бы запрограммировал приложение на выбор его сервера на основе ключа в Local Storage. Затем вы можете легко установить этот ключ на панели инструментов разработчика (вкладка Ресурсы). Если ключ не определен, он использует удаленный сервер.

Источник

В консоли chrome.runtime.getManifest().update_url будет иметь значение, если установлено из магазина. Не определено, если нет.

См. Как различать dev и production в создаваемом мною расширении Firefox? И проверьте, установлено ли расширение Chrome в распакованном режиме.

Источник
Другие вопросы по тегам