Port the addon to WebExtensions

[SecurityFlaw]

The addon must be ported to WebExtensions!
At firefox 57 or higher it won't work anymore, because XUL/XPCOM overlays are outdated and no more provided then.

Information at developer.mozilla.org:
Starting from Firefox 53, no new legacy add-ons will be accepted on addons.mozilla.org (AMO) for desktop Firefox and Firefox for Android.
Starting from Firefox 57, only extensions developed using WebExtensions APIs will be supported on Desktop Firefox and Firefox for Android.

[plaguna]

Please, check #30

[SecurityFlaw]

Yeah, but it's closed and was not fixed i think.
For me it looks like the closed things got ignored since 2014 ...
Some guys submitted Patches for some bugs, but this issues are closed and unfixed too.

That's really pity, so what's the reason for that action?!

[plaguna]

Hi @SecurityFlaw,

The reason we can't convert the extension to a WebExtension is because the current API doesn't support modifying the actual browser user interface. The current one relies on XUL (a Mozilla UI language) to achieve that, as explained on the ticket I mentioned before.

In order to keep the same functionality the WebExtension standard (?) should allow for UI modification, which Google Chrome is against. As Mozilla/Firefox is following the same path we can't do much else.

Possible solutions (happy to see them done, happy to contribute if people jump into them):

• Create a WebDeveloper WebExtension that adds a tab to the Developer tools included now with all major browsers. This will be my preferred choice.
• Inject HTML/JavaScript on each page and draw a Hackbar-esque interface render on the actual page, handling the requests with WebExtension privileged JavaScript APIs. Good luck with getting this approved on the Marketplace.
• Create a toolbar button that displays the UI. Not too fond of this solution as it's hard to keep the focus on the contextual menu if not impossible.

Please let me know if we can help with anything else.

[johan-adriaans]

@plaguna @SecurityFlaw Also:

The addon also heavily leans on components like nsIStringInputStream and nsISeekableStream that are not available in WebExtensions. As far as i know, most of the functions we use them for cannot be emulated with webextensions (i.e. change User Agent, fetch tab post data, change tab post data)

Those open issues got imported into github when switching from Google Code and need to be cleaned up. This repo was sort of dead (more a backup) until the recent FF55+ issues.

[SecurityFlaw]

Changing User-Agent is possible: https://developer.mozilla.org/en-US/Add-ons/WebExtensions/Intercept_HTTP_requests

For managing POST data you can use this:
https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API

Correct me, if it's false information, please!

But the design of it must be changed to some of this:
https://developer.mozilla.org/en-US/Add-ons/WebExtensions/user_interface
I think the UI must be made as "Browser toolbar button with a popup" or as "Sidebar".

[johan-adriaans]

Thanks for looking that up. That actually looks like it could work :) But still, it is a lot of work rebuild the plugin and I don't have a lot of time to spare. Anyone that wants to jump in is welcome.

[jacksonbin]

Hi!
I tried to port this addon to webextensions. Almost of core functions are completed, please use and give me some comments:
https://github.com/mxcxvn/newhackbar
https://addons.mozilla.org/en-US/firefox/addon/new-hackbar/
Thanks!

[Zeecka]

I'm Also working on a new version :

[jacksonbin]

Nice! Looking forward to use it. Hope its position is under address bar!

[Zeecka]

Unfortunately no...
I know that it was the main arguement of the hackbar but the new WebExtensions format doesnt allow us to do this (as mentioned by plaguna the 28 Aug).
Plaguna also mantioned the differents solutions in this message, i chose the first one : "Create a WebDeveloper WebExtension that adds a tab to the Developer tools included now with all major browsers." because I also think that it was the best choice I had.
However, the "Developer tools" tab allow us to pin it to the bottom or use it as a new window. Moreover, this place is convenient for the new hackbar due to the others tools in the panel

[plaguna]

Nice work @Zeecka! Yes, this is the idea I had in mind but didn't manage to force myself to do tbh. I see you have mimic the UI to almost pixel perfect even. Looking forward to give it a try if you publish it somewhere. Expect pull requests 😉

[Zeecka]

I used to "dev" in CSS/Html/JS but I never made a WebExtension in the past.
I'm trying to reproduce a good GUI because I don't know if there is template or something like that...
For the moment i'm just able to load the current Web URL with it.
I'm not afraid about common manipulation such as base64 encoding and stuff like that... But I'm a bit affraid about the network/request part.
I'm quite busy for this week, december will be beter for me ;).
I'm planning to use github for this project, for the moment I'm just uploading manually.
I'm also thinking about new new functionality with my friends such as new XSS payloads, SQL payloads, Replace function (feel free to contribute in the future :p)...

https://github.com/Zeecka/HackBar-Quantum
(to try: git pull then about:debugging --> load manifest.json)

[johan-adriaans]

Nice work to you both @Zeecka and @mxcxvn! Awesome to see you working on a Webextensions version. I am also looking forward to seeing it in action.

As for the placing: When I started working on Hackbar in 2005 we only had FireBug as a separate plugin and 17-inch 3/4 monitors. The toolbar was the most logical choice. Today, (12 years later! I feel old..) the developer panel is a better place. It gives us a lot of screen space and it is easy to access.

[johan-adriaans]

having said that, the sidebar is not a bad place at all. Just a matter of taste I guess. I had a look at your plugin @mxcxvn and it looks very usable!