How create panel with webextensions?

Add-ons Development
#1

Is there some function or example how to create panel similar to SDK Panel()? In webextensions.

photo

I cannot recall if there is some example on git-hub webextentions-examples? I can recall only those which were attacked to button.

#2

If I understand your question, that would be a popup, which drops down from the addon button. This is implemented as a simple web page, attached in manifest.json as a popup.

First create a page with buttons, heavily styled with CSS.

Second, include this in your manifest.json file:

"browser_action": {
    "default_popup": "/content/popup.html"
}
#3

Not connected to button. I thought panel which is centered in the middle of page. It would appear, I would create html elements to it as normal html page, and then when user clicks away, the html page auto-disappears. Similar thing is in SDK panel. I need to create the panel from content script dynamically.

#4

Have you seen my addon Form Tools? The third image on the page shows a popup. In this case I have implemented it as a pseudo modal, but the process may be what you have in mind.

If that’s the sort of idea, I can go through the process for you.

#5

I thought exactly what is described as Panel SDK. It seems there is not such thing in webextension.

So I need this:

https://mdn.mozillademos.org/files/6597/wikipedia-jetpack-panel.png

Create panel with rounded corners like on image without form elements. I plan to add document.body to it and rest of elements with Content script.

@manngoMark: Colleague, how do you check for errors in javascript (in Content Script)? When I have error so the Content debugger refuses to load the file. I add injected border to body element of the page. If the border is displayed, so no error. If it is not shown, so error. Do you have some better way to debug the errors in the injected script?