meandavejustice/description.md

## description.md

      
    Raw
  

              description.md
            
          
    Issue

Options.html form elements (and OPTIONS button in about:addons view) not showing up.
Current Code

Code is structured as such:

webextension/options/options.html
webextension/options/options.js
webextension/manifest.json

Also made an edit to webpack.config.js (file attached) to ensure we are copying over the options/ directory to the build directory.
The steps I've taken

After checking to ensure I am followign the same patterns found on mdn and the implementation in the min vid addon.
I started poking around at the actual built xpi, it appears that everything is in its proper place, however I'm a bit confused how the optionsURL field is added to install.rdf.
It looks like this is done in the packaging process but I'm unsure, I tried to add a listing in the chrome.manifest like we are linking our
iconURL(link), but that entry gets overwritten with "options/options.html"
from manifest.json in the build.
Additionally Mdn says that webextension options should always take precedence over other types of prefs.
LINKS

link to bootstrapless-addon branch

  
## manifest.json
{
  "manifest_version": 2,
  "name": "Test Pilot",
  "author": "Les Orchard <me@lmorchard.com>",
  "applications": {
    "gecko": {
      "id": "@testpilot-addon"
    }
  },
  "version": "2.0.3",
  "icons": {
    "16": "icons/icon-16.png",
    "32": "icons/icon-32.png",
    "64": "icons/icon-64.png",
    "96": "icons/icon-96.png"
  },
  "default_locale": "en_US",
  "permissions": [
    "notifications",
    "storage",
    "cookies",
    "tabs",
    "https://example.com/",
    "https://testpilot.dev.mozaws.net/",
    "https://testpilot-l10n.dev.mozaws.net/",
    "https://testpilot.stage.mozaws.net/",
    "https://testpilot.firefox.com/"
  ],
  "background": {
    "scripts": [
      "background.js"
    ]
  },
  "browser_action": {
    "default_title": "Firefox Test Pilot",
    "browser_style": true,
    "default_icon":  "icons/icon.svg"
  },
  "options_ui": {
    "page": "options/options.html",
    "browser_style": true
  }
}

## options.html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
  </head>

  <body>
    <form>
      <label for="environment">Environment:</label>
      <select name="environment" id="environment">
        <option value="https://example.com:8000" selected>Local</option>
        <option value="https://testpilot.dev.mozaws.net">Development</option>
        <option value="https://testpilot-l10n.dev.mozaws.net">L10n</option>
        <option value="https://testpilot.stage.mozaws.net">Stage</option>
        <option value="https://testpilot.firefox.com">Production</option>
      </select>
      <button type="submit">Save</button>
    </form>
    <script src="options.js"></script>
  </body>
</html>

## options.js
/* global browser */

function saveOptions(e) {
  e.preventDefault();
  browser.storage.local.set({
    environment: {
      name: document.getElementById("environment > option:changed").textContent,
      baseUrl: document.getElementById("environment").value}
  });
}

function restoreOptions() {
  const getting = browser.storage.local.get("environment");
  getting.then((result) => {
    Array.from(document.getElementById("environment").options)
      .forEach((o) => {
        o.selected = (o.value === result.environment.value);
      });
  }, (err) => {
    console.log(`Error: ${err}`);
  });
}

document.addEventListener("DOMContentLoaded", restoreOptions);
document.querySelector("form").addEventListener("submit", saveOptions);

## webpack.config.js
/*
 * This Source Code is subject to the terms of the Mozilla Public License
 * version 2.0 (the "License"). You can obtain a copy of the License at
 * http://mozilla.org/MPL/2.0/.
 */

/* eslint-disable import/no-extraneous-dependencies, global-require */

const fs = require('fs');
const path = require('path');
const webpack = require('webpack');
const { exec, mkdir, cp } = require('shelljs');

const AfterBuildPlugin = require('./lib/webpack-after-build');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const ThrowErrorPlugin = require('./lib/webpack-error');

const WATCH_MODE = process.argv.includes('--watch');

const baseConfig = {
  output: {
    path: path.resolve(__dirname, 'build'),
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.(js|jsx)/,
        exclude: /node_modules/,
        loader: 'babel-loader',
        options: {
          // Minimal babel transforms - Firefox supports many ES2015 features
          babelrc: false,
          presets: [],
          plugins: []
        }
      }
    ]
  },
  plugins: [
    new ThrowErrorPlugin(),
    new webpack.DefinePlugin({
      'process.env.NODE_ENV': `"${process.env.NODE_ENV || 'dev'}"`
    }),
    // Package add-on when finished with build.
    // TODO: Replace with sign-addon?
    new AfterBuildPlugin(() => {
      mkdir('-p', 'dist');
      // HACK: Only perform bundling if the second half of build has been
      // performed, but we still want to rebuild & post the first half on file
      // watching.
      const buildPackagePath = './build/package.json';
      if (fs.existsSync(buildPackagePath)) {
        const frontendConfig = require('../frontend/config');
        const locales = frontendConfig.AVAILABLE_LOCALES;
        const env = Object.assign({}, process.env, {
          SUPPORTED_LOCALES: locales
        });
        exec('node bin/update-version');
        exec(
          'node ./node_modules/.bin/pontoon-to-webext ' +
            '--src ../locales --dest ./build/webextension/_locales',
          { env }
        );
        if (WATCH_MODE) {
          exec('jpm post --addon-dir=build --post-url http://localhost:8888/');
        } else {
          const packageData = require(buildPackagePath);
          exec('jpm xpi --addon-dir=build --dest-dir=dist');
          cp('./dist/testpilot-addon.xpi', './addon.xpi');
          cp(
            `./dist/@testpilot-addon-${packageData.version}.update.rdf`,
            './update.rdf'
          );
        }
      }
    })
  ]
};

module.exports = [
  // HACK: bootstrap.js needs to globally export startup & shutdown
  Object.assign({}, baseConfig, {
    entry: { bootstrap: './src/bootstrap.js' },
    output: {
      path: path.resolve(__dirname, 'build'),
      filename: '[name].js',
      library: '{ startup, shutdown }',
      libraryTarget: 'var'
    }
  }),
  // The rest of the JS can get bundled like usual
  Object.assign({}, baseConfig, {
    entry: {
      'webextension/background': './src/webextension/background.js'
    },
    plugins: [
      new CopyWebpackPlugin([
        { from: 'LICENSE' },
        { from: './src/install.rdf' },
        { from: './package.json' },
        { from: './src/chrome.manifest' },
        { from: './src/webextension/manifest.json', to: './webextension/' },
        { from: './src/webextension/icons', to: './webextension/icons' },
        { from: './src/webextension/options', to: './webextension/options' }
      ])
    ].concat(baseConfig.plugins)
  })
];
	{
	"manifest_version": 2,
	"name": "Test Pilot",
	"author": "Les Orchard <me@lmorchard.com>",
	"applications": {
	"gecko": {
	"id": "@testpilot-addon"
	}
	},
	"version": "2.0.3",
	"icons": {
	"16": "icons/icon-16.png",
	"32": "icons/icon-32.png",
	"64": "icons/icon-64.png",
	"96": "icons/icon-96.png"
	},
	"default_locale": "en_US",
	"permissions": [
	"notifications",
	"storage",
	"cookies",
	"tabs",
	"https://example.com/",
	"https://testpilot.dev.mozaws.net/",
	"https://testpilot-l10n.dev.mozaws.net/",
	"https://testpilot.stage.mozaws.net/",
	"https://testpilot.firefox.com/"
	],
	"background": {
	"scripts": [
	"background.js"
	]
	},
	"browser_action": {
	"default_title": "Firefox Test Pilot",
	"browser_style": true,
	"default_icon": "icons/icon.svg"
	},
	"options_ui": {
	"page": "options/options.html",
	"browser_style": true
	}
	}
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	</head>

	<body>
	<form>
	<label for="environment">Environment:</label>
	<select name="environment" id="environment">
	<option value="https://example.com:8000" selected>Local</option>
	<option value="https://testpilot.dev.mozaws.net">Development</option>
	<option value="https://testpilot-l10n.dev.mozaws.net">L10n</option>
	<option value="https://testpilot.stage.mozaws.net">Stage</option>
	<option value="https://testpilot.firefox.com">Production</option>
	</select>
	<button type="submit">Save</button>
	</form>
	<script src="options.js"></script>
	</body>
	</html>
	/* global browser */

	function saveOptions(e) {
	e.preventDefault();
	browser.storage.local.set({
	environment: {
	name: document.getElementById("environment > option:changed").textContent,
	baseUrl: document.getElementById("environment").value}
	});
	}

	function restoreOptions() {
	const getting = browser.storage.local.get("environment");
	getting.then((result) => {
	Array.from(document.getElementById("environment").options)
	.forEach((o) => {
	o.selected = (o.value === result.environment.value);
	});
	}, (err) => {
	console.log(`Error: ${err}`);
	});
	}

	document.addEventListener("DOMContentLoaded", restoreOptions);
	document.querySelector("form").addEventListener("submit", saveOptions);
	/*
	* This Source Code is subject to the terms of the Mozilla Public License
	* version 2.0 (the "License"). You can obtain a copy of the License at
	* http://mozilla.org/MPL/2.0/.
	*/

	/* eslint-disable import/no-extraneous-dependencies, global-require */

	const fs = require('fs');
	const path = require('path');
	const webpack = require('webpack');
	const { exec, mkdir, cp } = require('shelljs');

	const AfterBuildPlugin = require('./lib/webpack-after-build');
	const CopyWebpackPlugin = require('copy-webpack-plugin');
	const ThrowErrorPlugin = require('./lib/webpack-error');

	const WATCH_MODE = process.argv.includes('--watch');

	const baseConfig = {
	output: {
	path: path.resolve(__dirname, 'build'),
	filename: '[name].js'
	},
	module: {
	loaders: [
	{
	test: /\.(js\|jsx)/,
	exclude: /node_modules/,
	loader: 'babel-loader',
	options: {
	// Minimal babel transforms - Firefox supports many ES2015 features
	babelrc: false,
	presets: [],
	plugins: []
	}
	}
	]
	},
	plugins: [
	new ThrowErrorPlugin(),
	new webpack.DefinePlugin({
	'process.env.NODE_ENV': `"${process.env.NODE_ENV \|\| 'dev'}"`
	}),
	// Package add-on when finished with build.
	// TODO: Replace with sign-addon?
	new AfterBuildPlugin(() => {
	mkdir('-p', 'dist');
	// HACK: Only perform bundling if the second half of build has been
	// performed, but we still want to rebuild & post the first half on file
	// watching.
	const buildPackagePath = './build/package.json';
	if (fs.existsSync(buildPackagePath)) {
	const frontendConfig = require('../frontend/config');
	const locales = frontendConfig.AVAILABLE_LOCALES;
	const env = Object.assign({}, process.env, {
	SUPPORTED_LOCALES: locales
	});
	exec('node bin/update-version');
	exec(
	'node ./node_modules/.bin/pontoon-to-webext ' +
	'--src ../locales --dest ./build/webextension/_locales',
	{ env }
	);
	if (WATCH_MODE) {
	exec('jpm post --addon-dir=build --post-url http://localhost:8888/');
	} else {
	const packageData = require(buildPackagePath);
	exec('jpm xpi --addon-dir=build --dest-dir=dist');
	cp('./dist/testpilot-addon.xpi', './addon.xpi');
	cp(
	`./dist/@testpilot-addon-${packageData.version}.update.rdf`,
	'./update.rdf'
	);
	}
	}
	})
	]
	};

	module.exports = [
	// HACK: bootstrap.js needs to globally export startup & shutdown
	Object.assign({}, baseConfig, {
	entry: { bootstrap: './src/bootstrap.js' },
	output: {
	path: path.resolve(__dirname, 'build'),
	filename: '[name].js',
	library: '{ startup, shutdown }',
	libraryTarget: 'var'
	}
	}),
	// The rest of the JS can get bundled like usual
	Object.assign({}, baseConfig, {
	entry: {
	'webextension/background': './src/webextension/background.js'
	},
	plugins: [
	new CopyWebpackPlugin([
	{ from: 'LICENSE' },
	{ from: './src/install.rdf' },
	{ from: './package.json' },
	{ from: './src/chrome.manifest' },
	{ from: './src/webextension/manifest.json', to: './webextension/' },
	{ from: './src/webextension/icons', to: './webextension/icons' },
	{ from: './src/webextension/options', to: './webextension/options' }
	])
	].concat(baseConfig.plugins)
	})
	];