wbamberg

Guidelines

This section describes some guidelines to follow when writing HTML examples. It's split into two sections:

Formal guidelines cover formal aspects of the example, such as how long it should be.
Content guidelines cover the actual content of the example: that is, what it should include or exclude.

Sometimes formal and content guidelines are at odds. For example, sometimes writing a useful example means making it longer than the formal guidelines ask. Usually, when this happens, we should prioritize content guidelines.

Formal guidelines

Debugging WebExtensions

Use the Firefox devtools to debug WebExtensions.

In particular:

console
- see messages logged from your code, or error messages
- interactively examine and modify the program using a JS command line

	// background-script.js

	var responseCallback;

	function respondAsync() {
	setTimeout(() => {
	responseCallback({response: "async response from background script"});
	}, 1000);
	}

	function onGot(bookmarkItems) {
	console.log("bookmark items: " + bookmarkItems);
	console.log("lasterror: " + chrome.runtime.lastError);


	if (bookmarkItems.length) {
	console.log("bookmark exists!");
	} else {
	console.log("bookmark does not exist!");
	}

	{
	"i18n": {
	"getUILanguage": {
	"Chrome": {
	"support": "Yes"
	},
	"Opera": {
	"support": "No"
	},
	"Edge": {

	<!DOCTYPE html>

	<html>
	<head>
	<meta charset="utf-8">
	<style>
	#container {
	margin: 0.5em;
	padding: 0.5em;
	box-shadow: 1px 1px 5px #808080;


	Network monitor
	https://bugzilla.mozilla.org/show_bug.cgi?id=1251767: filter for Web Sockets

	Inspector
	https://bugzilla.mozilla.org/show_bug.cgi?id=1139187: in-content move
	https://bugzilla.mozilla.org/show_bug.cgi?id=1256422: move breadcrumbs to the bottom
	https://bugzilla.mozilla.org/show_bug.cgi?id=1168246: smarter CSS suggestions
	https://bugzilla.mozilla.org/show_bug.cgi?id=1253494: endDelay in animation inspector
	https://bugzilla.mozilla.org/show_bug.cgi?id=1259060: make shift+enter find previous

	## Guidelines

	This section describes some guidelines to follow when writing HTML examples. It's split into two sections:

	* formal guidelines cover formal aspects of the example, such as how long it should be
	* content guidelines cover the actual content of the example: that is, what it should include or exclude.

	Sometimes formal and content guidelines are at odds. For example, sometimes writing a useful example means making it longer than the formal guidelines ask. In general, when this happens, we should prioritize content guidelines.

	### Formal guidelines

	# Auth Stuff
	DOC_USERNAME="my-username" # Change this to your name
	MDN_KEY_ID="my-key-id"
	MDN_SECRET="my-secret"

	# Base Settings (for Staging Env)
	MDN_BASE_URL="https://developer.allizom.org"
	DOC_PATH="/en-US/docs/User:$DOC_USERNAME/PutExample"
	DOC_TYPE="application/json"

	JPM [info] verbose set
	JPM [info] Starting jpm xpi on My Jetpack Addon
	JPM [info] Checking compatability bootstrap.js and install.rdf for xpi
	Validating the manifest
	JPM [info] Creating fallbacks if they are necessary..
	Creating XPI
	JPM [info] Creating XPI...
	JPM [warning] .jpmignore does not exist, fallback to use default filter rules
	JPM [info] Adding: /Users/Mozilla/addons/update-rdf/bootstrap.js
	JPM [info] Adding: /Users/Mozilla/addons/update-rdf/install.rdf