Custom button to get the URL of a message: WebExtension?

[user2018]

Until the latest versions of Thunderbird, I was successfully executing the following JavaScript function by attaching it to a custom button, following the procedure described in https://developer.mozilla.org/en-US/doc ... bar_button to associate a JavaScript script to a button:

var hdr = gFolderDisplay.selectedMessage;
var uriStr = hdr.folder.getUriForMsg(hdr);
alert(uriStr);

The problem is that the extension created is said not to be compatible with Thunderbird 68.

As far as I understand, the only possible solution is to transform this into a WebExtension (https://developer.thunderbird.net/add-o ... -extension), but if I do this I cannot find what I need in the WebExtension API (e.g., gFolderDisplay does not exist).

I can execute the JavaScript code shown above without problems in Thunderbird 68 by using Tools -> Developer Tools -> Scratchpad. However, I need to associate the code to some button, as otherwise typing or pasting the JavaScript code each time is really inconvenient (even though it works). As commented above, my previous solution (based on Custom_toolbar_button) seems not to work anymore due to some incompatibility with the latest Thunderbird versions, and with WebExtension I cannot execute the same code and I could not find any equivalent.

Any idea that can help with this is very welcome.

[morat]

I would create a Thunderbird 68 compatible WebExtension using a manifest.json file with the legacy property that creates a toolbar button using an overlay.

e.g.

ThunderKdB search
http://github.com/cleidigh/ThunderKdB/s ... e.manifest

Folder Filters Button
http://github.com/cleidigh/ThunderKdB/t ... button/src
http://addons.thunderbird.net/thunderbird/addon/5731

There is a simple way to test an unpacked extension.

* open the extensions folder

e.g. C:\ThunderbirdPortable\Data\profile\extensions

* create a text file and put the path to the extension inside

e.g. C:\Tweaks

note: last character cannot be a newline or space

* save the file with the id of the extension as its name

e.g. tweaks@example.com

note: do not use .txt extension

* restart the application

About Thunderbird
http://developer.thunderbird.net/

Thunderbird WebExtensions APIs
http://thunderbird-webextensions.readthedocs.io/
http://thunderbird-webextensions.readth ... egacy.html

[user2018]

Thank you very much for this interesting idea and the links.

I'm a bit confused about how to proceed (I have not programmed any addon, just some custom buttons). With the legacy property do you mean putting this in the manifest.json file?:

"legacy": {
"type": "xul",
...

And then I need an overlay.js file?

I tried to look at the examples, but I am still quite unsure about how I can reuse the previous custom button toolbars code (following the example at https://developer.mozilla.org/en-US/doc ... bar_button). Does re-using it require a lot of effort? As this approach would use a legacy property, could it be easily broken in an upcoming Thunderbird release?

Thank you for any idea.

[morat]

I sent a link to an example extension in a private message. It shows the selected message url in a dialog.

The following snippet in the manifest.json file...

Code: Select all

"legacy": true,

is the same as...

Code: Select all

"legacy": {
  "type" : "xul"
},

since xul is the default. (see the legacy docs for more info)

Support for legacy addons to be dropped
http://forums.mozillazine.org/viewtopic ... &t=3057657

[vasmancs]

Could you please share the manifest.json if you have managed to convert it?

[morat]

@vasmancs

Examples of manifest.json file with legacy property
http://github.com/cleidigh/ThunderKdB/s ... ifest.json

[user2018]

I had this working fine, but I accidentally updated Thunderbird and the Tweaks extension stopped working. Is there any way to make it work with Thunderbird 78.3.3?

I tried to revert to a previous Thunderbird version, but it seems that my profile was converted to a newer version, so to come back to a previous version I would need to redefine the whole profile (quite extensive in my case...).

Thank you for any suggestion.

[morat]

You would need to completely rewrite the Tweaks extension in Thunderbird 78.

...

You could use the userChromeJS extension to create a button in various windows.

* <profile directory>\chrome\userChrome.js

Code: Select all

/* Thunderbird userChrome.js */

// Thunderbird 68 uses .xul pages.
// Thunderbird 78 uses .xhtml pages.

// 3pane window > chrome://messenger/content/messenger.xul or .xhtml
// message window > chrome://messenger/content/messageWindow.xul or .xhtml
// compose window > chrome://messenger/content/messengercompose/messengercompose.xul or .xhtml
// address book window > chrome://messenger/content/addressbook/addressbook.xul or .xhtml

(function () {
  if (location == "chrome://messenger/content/messenger.xul" ||
      location == "chrome://messenger/content/messageWindow.xul" ||
      location == "chrome://messenger/content/messengercompose/messengercompose.xul" ||
      location == "chrome://messenger/content/addressbook/addressbook.xul" ||
      location == "chrome://messenger/content/messenger.xhtml" ||
      location == "chrome://messenger/content/messageWindow.xhtml" ||
      location == "chrome://messenger/content/messengercompose/messengercompose.xhtml" ||
      location == "chrome://messenger/content/addressbook/addressbook.xhtml") {
    try {
      var XUL_NS = "http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul";
      var toolbarbutton = document.createElementNS(XUL_NS, "toolbarbutton");

      toolbarbutton.addEventListener("command", function (aEvent) {
        var win = aEvent.target.ownerDocument.defaultView;
        Services.prompt.alert(win, "Example 1", document.location.href);
      }, false);

   // toolbarbutton.onclick = function (aEvent) {
   //   var win = aEvent.target.ownerDocument.defaultView;
   //   if (aEvent.button == 0) {
   //     Services.prompt.alert(win, "Example 2", document.location.href);
   //   }
   // };

      var dataUrl = "data:image/png;base64," +
        "iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAACNFBMVEXDRgDweQDnbwC0Ng" +
        "DCRQC7PQDtpTu+QQD78q3PUwDCRAD//8vbYQDLTgDocAD0iQX1jQbGSgD7iAD4gwDVaw7v" +
        "dwDyegD+igDweQDlawDyhAXveADmZwDzmBbtcwDwkhHveADmhBTkgxbweADkfRH+igD7hA" +
        "DXZQX0gADyjA/tfgvveQDiawDQVADRXgfnbwD1jAb9iQD9z0PVZAbxpinykRHtdgD5mRbE" +
        "RQDDRgDOYArCRAD9iQD3ewDxegD3dwDFRgDAQAD+hgD4fQDucgDtgQftfwTISQDCRQDvdg" +
        "D5lxb1kRb2qh7wnynkagD766LDRQDDRwDDRQDspjbtpzbuqDbvqzv//8DUZAbCRQD//83p" +
        "jhvveQbvggW+QQDfcxLlmUb//8veYADMTwDHSADVVwC8PgDwixb78q3oZgDUWADRVADCRQ" +
        "D9iQDERwDBQQDYVQC+PgC0NgDbYQDWWgDUWADSVQDFSAC+QAC7PAC0NgD+wRL+/kD+/zb+" +
        "7i3+8Cv+/DX+wBL/+DD/rwz+qgz+rwz/tAz+sQzfbAT+3iP/+jD//Dz1jwP+nwf5iwf7pB" +
        "z2tRr4lwb/ogfsdQT+2R7/9ET+2iT8yyLmgBL5iQL2egLokhP7zzT60zv1zUr0gAL1ewP5" +
        "0yn9+UL++EXooyngaAH41EPzowzyySj+xxzlhhHvvyruwjXxvTnUag3+zxrwigP+swz86U" +
        "/ZXwD75lHqegD6xzb//kn+uhPTXAG3OAD/+UC2vFeJAAAAe3RSTlMAAAAAAAAAAAAAAAAA" +
        "AAAAAAAAAACfnwAIaelpAAA2+wD7UQAAa3oArKzRzMysnwgAvPQA/gAAw3prw0oALr16vS" +
        "4AACnF6bspAAAA/mIAADQAAAAAAI8AAEwA0vv7kd2yAuuvr+vKABL23U+8Sk/d9vUDIIAQ" +
        "AAAQgCAfvupHAAABB0lEQVR4Xi3IU3fDABgA0C+u26FdZ9u2bdu2vZSzbds2/tyac3IfLx" +
        "jpGyA6MimqY6gHTNgiiNwkwRM1E7EhTrYyTfMzzsh0ZEPiH+D6+u5mV1jEhpe5haVCYW1T" +
        "4suEvUOkk7PLpVJ5WFnl7hEUDN5LPvsHJ6cazdn13f3DYxu0B35+/Y2qVSr17NzGeUgohI" +
        "VHLK/PMDa39qKieRATGxd/9cS4uU1MwnmQktqY/qGlaVr7/ZOVDTmQm5df8PwyNj4xOTVd" +
        "jOM4kCRZOr+wWFa+srpWQVEU8PnV2zu7NbV19UfHDQRBAIfTdNHc0soVdnR2dfdgGAgEvW" +
        "99/QNc4eDQ8O8Ihv0D77NPgbVLZ6kAAAAASUVORK5CYII=";
      var props = {
        id: "__unique_identifier_example_button",
        class: "toolbarbutton-1 chromeclass-toolbar-additional",
        label: "Example",
        tooltiptext: "Example",
     // oncommand: 'Services.prompt.alert(window, "Example 3", document.location.href);',
        style: 'list-style-image: url("' + dataUrl + '"); -moz-image-region: auto;',
      };
      for (var p in props) toolbarbutton.setAttribute(p, props[p]);

   // var toolbar = document.getElementById("mail-bar3");             // Mail Toolbar 3pane window
   // var appMenuButton = document.getElementById("button-appmenu");  // App Menu Button 3pane window
   // toolbar.insertBefore(toolbarbutton, appMenuButton.nextSibling);

      var a = document.getElementById("mail-toolbar-menubar2");     // Menu Bar 3pane window
      var b = document.getElementById("mail-toolbar-menubar2");     // Menu Bar message window
      var c = document.getElementById("compose-toolbar-menubar2");  // Menu Bar compose window
      var d = document.getElementById("addrbook-toolbar-menubar2"); // Menu Bar address book window
      var toolbar = a || b || c || d;
      var toolbaritem = document.getElementById("menubar-items");
      toolbar.insertBefore(toolbarbutton, toolbaritem.nextSibling);
    } catch (e) {
      Components.utils.reportError(e); // [check] Show Content Messages
    }
  }
})();

userChromeJS by jikamens (compatible with TB 68 and TB 78)
http://addons.thunderbird.net/thunderbird/addon/986610

Instructions:

1. install userChromeJS extension
2. close email client
3. create or edit the userChrome.js file in the chrome folder
4. open email client

That's a general example if you want I could rewrite it.

[user2018]

Thank you very much for the suggestion.

I'm quite lost about how to use the extension. Currently, I have a file "overlay.js" with a bunch of functions I want to keep. I imagine that I have to insert those functions into the new <profile directory>\chrome\userChrome.js file. What about the icons for the associated buttons and the other files (overlay.js, overlay.css, overlay.dtd, overlay.xul)?

I tried first with the example of file <profile directory>\chrome\userChrome.js provided above, but I do not see nothing inserted into Thunderbird. If I understand it well, new toolbar items should appear, but I do not see them. Is there anything else to do?

Thank you for any suggestion.

[morat]

Did you install the userChromeJS extension, then restart?

Did you create the userChrome.js file in the chrome folder, then restart?

Did you show the menu bar? The code inserts the button on the menu bar.

i.e. View > Toolbars > [check] Menu Bar (press Alt-V to temporarily show menu bar)

Try using the -purgecaches command line option after exiting the app and editing the userChrome.js file.

i.e.

thunderbird.exe -purgecaches
ThunderbirdPortable.exe -purgecaches

More info
http://developer.mozilla.org/docs/Exten ... _4#Caching

BTW, I still have a link to the old tweaks.xpi file in private messages, so I can rewrite the userChrome.js code using the overlay.js code if you want.

P.S.

I can't help you rewrite the Tweaks extension to the new API. I'm still learning how to do that.

Thunderbird Addon Developers Forum
http://thunderbird.topicbox.com/groups/addons

Thunderbird Addon Reference
http://developer.thunderbird.net/
http://thunderbird-webextensions.readthedocs.io/

[user2018]

Yes, I did all those steps. I guess you refer to the "Main toolbar". If it is the case, I can view it, but I do not see the additional example button, despite multiple restarts. The userChrome extension seems to be correctly installed also. I noticed that the code above refers to "mail-toolbar-menubar2": maybe the problem could be that the variable is named differently in my system (for some strange reason)?

I tried with the -purgecaches option, but I still do not see the button.

Regarding the possibility to rewrite the userChrome.js code using the overlay.js code, I am not sure about why this could help as, if I understand my situation correctly, I cannot execute the Tweaks extension anymore because it is incompatible with the current version of Thunderbird.

Just in case it might be related, I see some errors in the log console:

[Exception... "Component returned failure code: 0x80520001 (NS_ERROR_FILE_UNRECOGNIZED_PATH) [nsIXPCComponents_Utils.readUTF8URI]" nsresult: "0x80520001 (NS_ERROR_FILE_UNRECOGNIZED_PATH)" location: "JS frame :: resource://gre/modules/L10nRegistry.jsm :: L10nRegistry.loadSync :: line 658" data: no] L10nRegistry.jsm:658:19
Error while loading 'jar:file:///Applications/Thunderbird.app/Contents/Resources/omni.ja!/chrome/messenger/search-extensions/twitter/manifest.json' (NS_ERROR_FILE_NOT_FOUND) Extension.jsm:570
Error while loading 'jar:file:///Applications/Thunderbird-78.3.3.app/Contents/Resources/features/wetransfer@extensions.thunderbird.net.xpi!/manifest.json' (NS_ERROR_FILE_NOT_FOUND) Extension.jsm:570
[Exception... "Component returned failure code: 0x80520001 (NS_ERROR_FILE_UNRECOGNIZED_PATH) [nsIXPCComponents_Utils.readUTF8URI]" nsresult: "0x80520001 (NS_ERROR_FILE_UNRECOGNIZED_PATH)" location: "JS frame :: resource://gre/modules/L10nRegistry.jsm :: L10nRegistry.loadSync :: line 658" data: no] L10nRegistry.jsm:658:19
ExtensionError: No such native application cb_thunderlink ExtensionUtils.jsm:56:5
[Exception... "Component returned failure code: 0x80520001 (NS_ERROR_FILE_UNRECOGNIZED_PATH) [nsIXPCComponents_Utils.readUTF8URI]" nsresult: "0x80520001 (NS_ERROR_FILE_UNRECOGNIZED_PATH)" location: "JS frame :: resource://gre/modules/L10nRegistry.jsm :: L10nRegistry.loadSync :: line 658" data: no] L10nRegistry.jsm:658:19
[Exception... "Component returned failure code: 0x80520001 (NS_ERROR_FILE_UNRECOGNIZED_PATH) [nsIXPCComponents_Utils.readUTF8URI]" nsresult: "0x80520001 (NS_ERROR_FILE_UNRECOGNIZED_PATH)" location: "JS frame :: resource://gre/modules/L10nRegistry.jsm :: L10nRegistry.loadSync :: line 658" data: no] L10nRegistry.jsm:658:19
[Exception... "Component returned failure code: 0x80520001 (NS_ERROR_FILE_UNRECOGNIZED_PATH) [nsIXPCComponents_Utils.readUTF8URI]" nsresult: "0x80520001 (NS_ERROR_FILE_UNRECOGNIZED_PATH)" location: "JS frame :: resource://gre/modules/L10nRegistry.jsm :: L10nRegistry.loadSync :: line 658" data: no] L10nRegistry.jsm:658:19
[Exception... "Component returned failure code: 0x80004005 (NS_ERROR_FAILURE) [nsIStringBundle.GetStringFromName]" nsresult: "0x80004005 (NS_ERROR_FAILURE)" location: "JS frame :: chrome://messenger/content/about-support/aboutSupport.js :: application :: line 236" data: no] aboutSupport.js:236:27
NS_ERROR_NOT_AVAILABLE: PreferDisplayName: undefined - not a boolean AddrBookCard.jsm:199
InvalidAccessError: InspectorUtils.parseStyleSheet: Cannot reparse still-loading sheet browsing-context.js:1144

Thanks a lot for any ideas!

[user2018]

Now I have seen the button! The problem is that it does not appear in the main window, but when composing a message (in my case, I would need the buttons in the main window, as most of my functions act on a selected message in the inbox).

Besides, I noticed that the icon seems to appear quite below the button, which is actually like hidden (I left a snapshot at https://imgur.com/F9vdcwB); so you need to click quite above the icon, in a strange position, to execute the associated code.

Any suggestion is welcome. Thank you.

[morat]

The example userChrome.js code inserts an "Example" button on the menu bar in each of the following windows.

* 3pane window i.e. main window
* message window
* compose window
* address book window

Sorry, I don't know how to help since I don't use the Mac.

The userChromeJS extension may not work correctly on the Mac.

userChromeJS 0.0.10
Thunderbird 78.3.3
Windows 7 SP1 32-bit

...

Maybe ask for help in converting the Tweaks extension in the topicbox forum.

[user2018]

I'm striving to fix this. I now see the button in the main window also! This is strange, the problem is that the button is being located on the top part of the window, where the maximize, minimize and close buttons are located. In particular, it is located where the close red button is located (snapshots at https://imgur.com/eLrUdHT). So, it does not go to the main toolbar, but to a different row in the panel. Other than this, the userChrome.js seems to be working well (I can click on the button and I get the message).

Could it be the case that the name of the toolbar is different in the Mac version? Maybe the solution is just to change a name of a component in the code. Is there any way to make sure about the names of the different components in the screen?

[morat]

Here is how the button looks on Windows.

Screenshot
http://imgur.com/4tMcuSV

The menubar-items id is for the File-Edit-View-Go-Message-Tools-Help element.

...

Try something like the following style to set the order of the buttons on the menu bar.

* <profile directory>\chrome\userChrome.css

Code: Select all

/* Thunderbird userChrome.css */

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");

@-moz-document url-prefix("chrome://messenger/content/messenger.xhtml"),
               url-prefix("chrome://messenger/content/messageWindow.xhtml"),
               url-prefix("chrome://messenger/content/messengercompose/messengercompose.xhtml"),
               url-prefix("chrome://messenger/content/addressbook/addressbook.xhtml") {

  /* menu bar */

  #menubar-items                           { -moz-box-ordinal-group: 1 !important; }
  #__unique_identifier_example_button      { -moz-box-ordinal-group: 2 !important; }
  #mail-toolbar-menubar2 toolbarspring     { -moz-box-ordinal-group: 3 !important; }
  #compose-toolbar-menubar2 toolbarspring  { -moz-box-ordinal-group: 3 !important; }
  #addrbook-toolbar-menubar2 toolbarspring { -moz-box-ordinal-group: 3 !important; }
  #mailviews-container                     { -moz-box-ordinal-group: 4 !important; }

}

http://kb.mozillazine.org/UserChrome.css

Remember to set the toolkit.legacyUserProfileCustomizations.stylesheets preference to true, then restart.

...

You can run the following code snippet in the error console to show the button ids on the menu bar.

Code: Select all

document.getElementById("mail-toolbar-menubar2").currentSet;