MozillaZine

Thunderbird 68 Extension: Search Button

Talk about add-ons and extension development.
C-E
 
Posts: 6
Joined: October 31st, 2019, 11:33 am

Post Posted October 31st, 2019, 11:50 am

I'm completely new to Thunderbird extension programming - so please be patient with me! :-)

I try to set up a very simple extension that implements a button, which when clicked, invokes the message search window.
(i.e. does the same as clicking the menu commands "Edit" -> "Find" -> "Search Messages")

I was able to build a manifest.json
Code: Select all
{
    "manifest_version": 2,
    "name": "Search Button",
    "description": "Button to invoke message search window.",
    "version": "1.0",
    "author": "C-E",
    "applications": {
        "gecko": {
            "id": "SearchButton@pharqcon.com",
            "strict_min_version": "68.0"
        }
    },

  "background": {
    "scripts": [
       "background.js"
    ]
  },

    "browser_action": {
        "default_title": "Search",
        "default_icon": "search.svg"
    },
    "permissions": [
    ]
}


and a background.js
Code: Select all
function klickaktion() {
   var controller = document.commandDispatcher.getControllerForCommand("cmd_search");
   if (controller && controller.isCommandEnabled("cmd_search")){
      controller.doCommand(command);
      }
   }
browser.browserAction.onClicked.addListener(klickaktion);


The button works, but I cannot find how to implement the execution of a command.

After clicking my search button, the following error is logged in the console:
"document.commandDispatcher is undefined"

Any help (for bloody beginners) is highly appreciated!


C-E
 
Posts: 6
Joined: October 31st, 2019, 11:33 am

Post Posted November 1st, 2019, 12:06 pm

Dear morat, thank you for your reply!

It was not my intension to use legacy code, and I really don't want to create a legacy addon.

I think the manifest.json is okay, i.e. not legacy but according to the current requirements.

So the question is: Which code can be used in background.js which is "current" (not legacy) in order to execute the menu command "Edit" -> "Find" -> "Search Messages"?

(Before I posted my original questions I did a lot of hours internet research, therefore I already knew most of the links you provided, but I could not find an answer to my question.)

morat
 
Posts: 3438
Joined: February 3rd, 2009, 6:29 pm

Post Posted November 1st, 2019, 5:32 pm

I don't know the new APIs that well. I guess it's not possible without creating a legacy or experiment_apis addon.

When I say legacy addon, I mean a Thunderbird 68 compatible WebExtension using a manifest.json file with the legacy property.

I can't help you create an experiment_apis addon because I don't know how.

WebExtension Experiments
http://thunderbird-webextensions.readthedocs.io/en/68/how-to/experiments.html
http://firefox-source-docs.mozilla.org/ ... xperiments

C-E
 
Posts: 6
Joined: October 31st, 2019, 11:33 am

Post Posted November 2nd, 2019, 4:31 am

Dear morat, once again thank you!

Really, not possible without creating a legacy or experiment_apis addon?
And I thought my "project" could not be smaller and simpler ...
(What did the Thunderbird 68 developers do? It sounds to me as if a big computer manufacturer presents his all new notebook pc and says: it has an extension port. And a user asks: Can I connect an external keyboard? Manufacturer: No.)

Uff, WebExtension Experiments seem to be quite complicated ... and the crucial point is:
"And finally, the implementation. In this file, you’ll put all the code that directly interacts with Thunderbird UI or components."

Where can I find the documentation how to interact with Thunderbird UI or components?

morat
 
Posts: 3438
Joined: February 3rd, 2009, 6:29 pm

Post Posted November 2nd, 2019, 8:47 am

Thunderbird Docs
http://developer.mozilla.org/docs/Mozilla/Thunderbird

I would create a legacy xul addon for now, then convert it to a legacy bootstrap addon, then later convert it to an experiment_apis addon. I read that a legacy bootstrap addon should be fairly easy to convert to an experiment_apis addon.

* manifest.json

Code: Select all
{
  "manifest_version": 2,
  "name": "Tweaks",
  "description": "Personalize Thunderbird.",
  "version": "1.0",
  "author": "morat",
  "icons": {
    "32": "chrome/skin/classic/icon32.png"
  },
  "legacy": {
    "type": "xul"
  },
  "applications": {
    "gecko": {
      "id": "tweaks@example.com",
      "strict_min_version": "68.0"
    }
  }
}

* chrome.manifest

Code: Select all
content tweaks chrome/content/
locale tweaks en-US chrome/locale/en-US/
skin tweaks classic/1.0 chrome/skin/classic/

overlay chrome://messenger/content/messenger.xul chrome://tweaks/content/overlay.xul

style chrome://messenger/content/customizeToolbar.xul chrome://tweaks/skin/overlay.css

* chrome\content\overlay.xul

Code: Select all
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://tweaks/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://tweaks/locale/overlay.dtd">
<overlay id="tweaks-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
  <script type="application/javascript" src="chrome://tweaks/content/overlay.js"/>
  <toolbarpalette id="MailToolbarPalette">
    <toolbarbutton id="tweaks-example-button"
                   class="toolbarbutton-1"
                   label="&tweaks.example.label;"
                   tooltiptext="&tweaks.example.tooltiptext;"
                   oncommand="Tweaks.example();"/>
  </toolbarpalette>
</overlay>

* chrome\content\overlay.js

Code: Select all
var Tweaks = {
  init: function () {
  },
  example: function () {
    Services.prompt.alert(window, "Tweaks", document.location.href);
  },
};
window.addEventListener("load", function () { Tweaks.init(); }, false);

* chrome\skin\classic\overlay.css

Code: Select all
#tweaks-example-button {
  list-style-image: url("chrome://tweaks/skin/example.png");
  -moz-image-region: auto;
}

* chrome\locale\en-US\overlay.dtd

Code: Select all
<!ENTITY tweaks.example.label "Example">
<!ENTITY tweaks.example.tooltiptext "This is an example">

note: icon32.png and example.png are in the chrome\skin\classic folder

note: replace oncommand="Tweaks.example();" with oncommand="goDoCommand('cmd_search');" to open the Search Messages window

morat
 
Posts: 3438
Joined: February 3rd, 2009, 6:29 pm

Post Posted November 2nd, 2019, 10:13 am

There is a simple way to test the extension.

* open the extensions folder

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

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

e.g. C:\Tweaks

note: last character cannot be a newline or space

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

i.e. tweaks@example.com

note: do not use .txt extension

* restart the application

If the new code changes aren't taking effect, then try using the -purgecaches command line option.

More info
http://forums.mozillazine.org/viewtopic.php?f=19&t=3043597

C-E
 
Posts: 6
Joined: October 31st, 2019, 11:33 am

Post Posted November 2nd, 2019, 5:00 pm

morat, you are great!!!

I made some slight modifications and now it works like a charm ... A special thanks once more to you!

(The only thing which I could not properly resolve was an error in overlay.xul regarding the reference to overlay.dtd in
<toolbarbutton id="search-button" class="toolbarbutton-1" label="&SearchButton.label;" tooltiptext="&SearchButton.tooltiptext;" oncommand="goDoCommand('cmd_search');"/>

XML Parsing Error: undefined entity
but I replaced it by
<toolbarbutton id="search-button" class="toolbarbutton-1" label="Search" tooltiptext="Shortcut to 'Edit' -> 'Find' -> 'Search Messages'" oncommand="goDoCommand('cmd_search');"/>)


The following is the working code:

/SearchButton/manifest.json
Code: Select all
{
  "manifest_version": 2,
  "name": "SearchButton",
  "description": "Toolbar button to invoke message search window.",
  "version": "1.0",
  "author": "morat & C-E",
  "icons": {
      "16": "skin/search.svg",
      "24": "skin/search.svg",
      "48": "skin/search.svg",
      "96": "skin/search.svg"
  },
  "legacy": {
    "type": "xul"
  },
  "applications": {
    "gecko": {
      "id": "SearchButton@pharqcon.com",
      "strict_min_version": "68.0"
    }
  }
}


/SearchButton/chrome.manifest
Code: Select all
content SearchButton content/
locale SearchButton en-US locale/en_US/
skin SearchButton classic/1.0 skin/

overlay chrome://messenger/content/messenger.xul chrome://SearchButton/content/overlay.xul

style chrome://messenger/content/customizeToolbar.xul chrome://SearchButton/skin/overlay.css


/SearchButton/content/overlay.js
Code: Select all
var SearchButton = {
  init: function () {
  },
  example: function () {
    Services.prompt.alert(window, "SearchButton", document.location.href);
  },
};
window.addEventListener("load", function () { SearchButton.init(); }, false);


/SearchButton/content/overlay.xul
Code: Select all
<?xml version="1.0"?>
<?xml-stylesheet href="chrome://SearchButton/skin/overlay.css" type="text/css"?>
<!DOCTYPE overlay SYSTEM "chrome://SearchButton/locale/en_US/overlay.dtd">
<overlay id="tweaks-overlay" xmlns="http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul">
   <script type="application/javascript" src="chrome://SearchButton/content/overlay.js"/>
   <toolbarpalette id="MailToolbarPalette">
      <toolbarbutton id="search-button" class="toolbarbutton-1" label="Search" tooltiptext="Shortcut to 'Edit' -> 'Find' -> 'Search Messages'" oncommand="goDoCommand('cmd_search');"/>
   </toolbarpalette>
</overlay>


/SearchButton/skin/overlay.css
Code: Select all
#search-button {
  list-style-image: url("chrome://SearchButton/skin/search.svg");
  -moz-image-region: auto;
}


/SearchButton/skin/search.svg
http://pharqcon.bplaced.net/dl/search.svg

/SearchButton/locale\en_US/overlay.dtd
Code: Select all
<!ENTITY SearchButton.label "Search">
<!ENTITY SearchButton.tooltiptext "Shortcut to 'Edit' -> 'Find' -> 'Search Messages'">


If you want to try this extension, you can download the .xpi (packed into .zip) from here:
http://pharqcon.bplaced.net/dl/SearchButton.zip

morat
 
Posts: 3438
Joined: February 3rd, 2009, 6:29 pm

Post Posted November 2nd, 2019, 5:36 pm

I think the greater than sign character is invalid in a dtd file.

Greater than sign ">" (dec 0062) (hex 003e)
http://www.fileformat.info/info/unicode/char/3e/index.htm

Try using &#0062; or &#x003e; for the greater than sign character in the dtd file.

Unicode code converter
http://r12a.github.io/app-conversion/

You can use &#8230; or &#x2026; for the horizontal ellipsis character in a dtd file.

Horizontal ellipsis "…" (dec 8230) (hex 2026)
http://www.fileformat.info/info/unicode/char/2026/index.htm

And remember to save the files in ANSI or UTF-8 without a BOM.

BOM
http://en.wikipedia.org/wiki/Byte_Order_Mark
Last edited by morat on November 9th, 2019, 7:28 am, edited 1 time in total.

C-E
 
Posts: 6
Joined: October 31st, 2019, 11:33 am

Post Posted November 3rd, 2019, 11:42 am

Dear morat, you were right (and I tend to say: as always), "angle brackets" like "<" and ">" cannot be used in the strings of the .dtd-file.

I updated my extension and also added a German locale (as I am German).

So this is the final extension:
http://pharqcon.bplaced.net/dl/SearchButton.zip

Once again thank you very much for your help ... greatly appreciated!

P.S.
The remaining question is, how to realize this extension without legacy code, but that seems really complicated. I for myself decided not to update Thunderbird anymore until it may become really necessary.

C-E
 
Posts: 6
Joined: October 31st, 2019, 11:33 am

Post Posted November 8th, 2019, 5:34 am

The remaining question, how to realize this extension without legacy code, has been resolved by Geoff Lankow, see his post on 06.11.2019 in

https://thunderbird.topicbox.com/groups/addons/Tf899f6a5bf750a1f/search-button-in-order-to-save-some-menu-clicks

morat
 
Posts: 3438
Joined: February 3rd, 2009, 6:29 pm

Post Posted November 9th, 2019, 7:25 am

Thanks for posting. That's a nice example.

Examples
http://github.com/thundernest/sample-extensions/tree/master/experiment
http://github.com/thundernest/sample-extensions/tree/master/openSearchDialog

Search for other examples
http://github.com/cleidigh/ThunderKdB/s ... ifest.json

P.S.

I can't open the following page in Chrome for some reason. I can open it in Firefox.

Experiment Generator
http://darktrojan.github.io/generator/generator.html

Return to Extension Development


Who is online

Users browsing this forum: No registered users and 1 guest