When the Firefox browser was updated from 56 to 57 (Quantum) the previous browser addon technologies (XUL/XPCOM) were obsoleted and replaced with the (less powerful) Web Extensions API.

One that I could not live without was BBCodeXtra, which provided a context menu which allowed various tags in bbCode, vBulletin, Markdown, and HTML to be automated, along with users to create custom tags.

Right now, it is largely a copy of the menu structure of BBCodeXtra.

(on edit) I now have the program up on the releases page at gitHub.

As soon as this is on addons.mozilla.org, I will post the link to that here. 

I have not formally put it in the Mozilla Addons, because it is still at a preliminary state, basically alpha.

The code is released  under an MIT open source license, and you can find the source code on Github as bbCodeWebEx.

The icons are NOT under the MIT License, having been done by by Charles Saroff, and he holds the copyright under a yet as to be determined license.

While this will work with pre-Quantum (Firefox 56 and earlier) versions of the browser, the clipboard functionality does not work.

I should warn you that this is some of the ugliest JavaScript in the known world, and perusing it may lead to all sorts of physical and mental problems.

• 7 January 2019, Version 0.1.0

Beta release.  Can be downloaded from it’s GitHub release page.

• 23 December, 2018, Version 0.0.1

Alpha release to Github

(click on any image to see a larger popup)

Description
When you right click on text in a text box, it provides a context menu that allows you to apply formatting in bbCode, vBulletin, HTML, XHTML, Markdown, and user defined (custom) tags.

As you can see, I have not yet figured out how to create a color wheel for font color, so it’s just a sub menu. (I’m working on it)

Settings
The settings page allows you to activate or deactivate menus.

You simply select or deselect the check boxes, and then click “save menu options.”

Since vBulletin is a superset of bbCode, the vBulletin menu is a submenu of bbCode menu, and if you deactivate bbCode, you deactivate vbulletin as well.

Custom Tags
If you click on the “custom tags” button, the custom tags page will popup, either as a new tab or as a window depending on your browser settings.

You can re order the tags by dragging and dropping the rows, but you cannot drag anything to the bottom row. You must drag to the 2^nd row from the bottom, and then drag the bottom row up. (I’m working on it)

Once you have finished, click the “Save Tag Order” button.

To edit a tag, click, select a tag from the list, and it will populate the input boxes at the bottom of the page.

Make any changes you might want to the Menu Title and Menu Argument input boxes, and then click “Save Custom Tag”, and it will be updated in the list.

The two simplest, and most commonly used, tokens for making an argument to be used in a menu are are: (Other, more complex, tags, are described in the detailed documentation)

• {{selection}}
• {{clipboard}}

An example of the use of selection would be

<b><span style=”font-size: 100%; font-variant: small-caps;”>{{selection}}</span></b>

which makes the selected text bold and small caps.

An example of the use of clipboard would be:

<img src="{{clipboard}}">

Which takes the content of the clipboard, and pastes it into the html code for an image.

If you want to delete a tag, click on it, and it will populate the input boxes at the bottom of the page.

When you click the delete button, you will be asked to confirm, and then the custom tag will be deleted.

To create a tag, click on the “New Tag” button, and the “Menu ID” input box (you cannot change this value), and the “Parent Menu” input boxes will be filled in. (you cannot change this value either)

Enter a title for the sub menu and an argument, and then click “Save Custom Tag”, and it will be added to the bottom of the list.

To export your custom tags, click on the “Export Settings…” button, and you will be warned that things like unsaved new and edited tags will be deleted. If you are OK with that, click OK, and save the file, which will have the name “bbCode_WebEx_YYYY-MM-DD.json” will be saved to disk.

To import your custom tags, click on the “Import Settings…” button. You will be asked to confirm, because this will erase your existing tags, (Back up first) and then you can use your file dialog box to load a file.

Export and import files must/will be JSON array file format.

Available codes:

(Note: these are case sensitive, and they can be used multiple times in a single menu.)

• {{clipboard}}: This pastes in the current clipboard contents where it is placed.
• {{selection}}: This pastes in the currently selected texts where it is placed.

Example: [url={{clipboard}}]{{selection}}[/url]
So if you copy a url, and select text, this would add a link to it for bbCode, and around the code words are double curly braces, “{}“.

Here is an example of using the tag more than once.

This right justifies an image, sizes it to 200 pixels wide, and adds a link to the fullsize image that pops up in blogger:

<a href="{{clipboard}}"><img src="{{clipboard}}" style="margin: 0px 0px 10px 10px; float: right; cursor: pointer;" width="200"></a>

Nice picture, huh?

Don’t hate me because I’m beautiful.

JSON array format:

It is basically a text format (UTF-8 character set) that this extension uses to externally save data.

Here are the first three standard custom tags that come with the extension.

Note that the last one does NOT have a comma after the closing curly brace.

Theoretically, you could manually edit these, and if you wanted to combine two sets of custom tags, you could with a cut and paste, making sure that all of the closing closing braces are followed by a comma, except for the last one.

[
  {
    "menuId": "bbcwbx.custom.001",
    "menuTitle": "First custom menu",
    "parentId": "bbcwbx.custom",
    "menuArg": "Arg 1",
     "icons": ""
  },
  {
    "menuId": "bbcwbx.custom.002",
    "menuTitle": "Second custom menu",
    "parentId": "bbcwbx.custom",
    "menuArg": "Arg 2",
     "icons": ""
  },
  {
    "menuId": "bbcwbx.custom.003",
    "menuTitle": "Third custom menu",
    "parentId": "bbcwbx.custom",
    "menuArg": "Arg 3",
     "icons": ""
  }
]

The indents and the new lines here just for readability.