×

Give a tip

Panel hide and show event in extension javascript


orz
 Share

Recommended Posts

Hi, do we have any events to be used that I can do some update on my extension's panel html via javascript? 

I have tried DOMContebtLoaded, onload, onpageshow, all of above are only called once the panel is created. Do we have other events to be triggered whenever I click the sidebar icon to display my panel?

Thanks

Tip   Give
Link to comment
Share on other sites

Thought i'd post this before you find out the hard way.

Unfortunately there aren't very many users who are developers of extensions or know very well how they work. And MX dev's rarely (almost never) post in response to questions like this.

So unless you can find it out yourself or there is a user who does know and replies, i doubt you're going to get an answer any time soon.

Wish I could give you better info, but unfortunately that's the case.

Tip   Give
Link to comment
Share on other sites

You should create a background service in your extension in order to catch properly all of panel events.

1- Define service file in your def.json
 

[
	{
		.
		.
		"service": { main: "service.htm", debug: false }
		.
		.
	}
]

2- Catch events in service.htm.

<!DOCTYPE HTML>
<html lang="en-US">
<head>
  <meta charset="UTF-8">
  <script>
    var rt = window.external.mxGetRuntime();
    rt.onAppEvent = function (obj) {
      switch (obj.type) {
        case "ACTION_START":
          // panel started.
          break;
        case "ACTION_STOP":
          // panel stopped.
          break;
        case "ACTION_SHOW":
          // panel is shown.
          break;
        case "ACTION_HIDE":
          // panel is hidden.
          break;
        case "ERROR":
          console.log(obj.errorMessage);
          break;
        case "LOCALE_CHANGED":
          // locale changed.
          break;
        default:
          // do nothing.
      }
    };
  </script>
</head>
<body>
</body>
</html>

You can also debug your service by changing debug parameter.

Edited by bayas
missing code
  • Like 3
Tip   Give
Link to comment
Share on other sites

That is good to know. Thanks a lot. I will try that out.

One more question :-).  How can I access locale defined in en.ini file from a html defined in my extension? this local html is used for re-direction when a web url should be blocked. javascript embedded in that local html cannot load locale text from en.ini. Maybe I also missed something here?

Edited by orz
Tip   Give
Link to comment
Share on other sites

Don't use local html file like panel.$.htm
After the release of Maxthon 4.9.x, extension framework hasn't supported them. You must do it manually. For example;

en.ini

[lang]
app.title=Title
app.description=Description

panel.htm

<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <title data-lang="app.title">Title</title>
  </head>
  <body>
    <div data-lang="app.description">Description</div>
  </body>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script>
    
	var rt = window.external.mxGetRuntime();
	var i18n = rt.locale.t;
	
	jQuery(document).ready(function() {
	  // localize.
	  jQuery("[data-lang]").each(function(index, item) {
	    var key = jQuery(this).attr("data-lang");
	    jQuery(this).text(i18n(key));
	  });
	});
	
  </script>
</html>

 

Tip   Give
Link to comment
Share on other sites

4 hours ago, bayas said:

Don't use local html file like panel.$.htm
After the release of Maxthon 4.9.x, extension framework hasn't supported them. You must do it manually. For example;

en.ini


[lang]
app.title=Title
app.description=Description

panel.htm


<!DOCTYPE HTML>
<html lang="en-US">
  <head>
    <meta charset="UTF-8">
    <title data-lang="app.title">Title</title>
  </head>
  <body>
    <div data-lang="app.description">Description</div>
  </body>
  <script type="text/javascript" src="js/jquery.min.js"></script>
  <script>
    
	var rt = window.external.mxGetRuntime();
	var i18n = rt.locale.t;
	
	jQuery(document).ready(function() {
	  // localize.
	  jQuery("[data-lang]").each(function(index, item) {
	    var key = jQuery(this).attr("data-lang");
	    jQuery(this).text(i18n(key));
	  });
	});
	
  </script>
</html>

 

hmm, my panel.html can retrieve the text from en.ini file. However if I have another html like blocked.html, after I redirect current tab to this local html file, then locale cannot take any text from en.ini.

Tip   Give
Link to comment
Share on other sites

 Share