Can the Webextension greatly modify the interface style and add other input interaction methods

Specifically, it is to change the browser window and interface layout, background color, and modify and add keyboard, mouse, touch screen, and gamepad controls.

What you can do: a lot of things. What you can’t do: a lot of things.

But let’s break it apart.

  • Change the browser window
    • hard to say, depends on what you mean by that.
  • Interface layout
    • again, hard to say but most likely “no”, not in the way you envision
  • Background color
  • Modify keyboard controls
    • Nope, at least not reliably
  • Add keyboard controls
  • Add mouse controls
    • Not sure what that means, but gesture based stuff is kinda possible using content scripts.
  • Touch screen controls
    • Again, most likely content scripts, so only within web content
  • Gamepad controls
    • Actually, I think this should be doable from a background script. Never tried it.
  • Controls
    • Now, depending on what you mean with “controls” the answer overall may be yes or no. You can do whatever you want with almost everything your extension provides. For things your extension does not provide this goes to a depends. You can’t move around focus in the browser window’s native parts, for example. But you can do things in content. I guess the best reference here would be to check out some vim style control extensions.

In general you can do almost everything you want, as long as you only have a problem you want to solve and not an explicit idea of how you’ll solve it. WebExtensions are all about having a creative environment that limits you in the tools that you can use, but that doesn’t mean you can’t do something. So I encourage you to study the API reference: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API (though a lot of power also lies in the manifest: https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json)

Thank you for your reply. But the text may be inconvenient to express my thoughts, so I drew a simple picture, hope to more clearly express
Text in the image:pointer–>mouse cursor.Sorry, English is not very good


The bottom four buttons are translucent or hidden when browsing without operating functions
As input binding event is:
1.To bind the four buttons below the keys, then use the mouse or the keyboard arrow keys to select the pop-up submenusor selecting a particular button.
2.There are four buttons for touch screen touch bind click event, then you can rely on drag or click to select a particular sub-menuor selecting a particular button.
3.Binding to four buttons four buttons gamepad, joystick then rely submenu or selecting a particular button.

Can we rely on Webextension to achieve this effect?

So you wrote “hidden or replace address bar”. Sadly you can’t really do much about it. What you can do, is put Firefox in full-screen mode, where its UI is only shown when you move the cursor to the top of the page.

You can draw UI on top of webpages, however this will not work on any privileged page (many mozilla.org pages, about: pages etc.)

This UI would be written using normal web technologies, so you can do whatever web technologies can do. Plus you can augment it with extension-only features by communicating between the web UI and your extension.

Excuse me,could I understand it as follows: if the whole browser is divided into three parts, i.e. the interface and function of the browser, the interface and function of the extension, the interface and function of the web page, Webextension can only modify the interface and function of the extension and the web page, but for the browser, it can only obtain and set its state, and it cannot be modified directly?

You can not obtain and modify the entire state of the browser UI. Only very select parts. Technically having full control over the UI is equivalent to having access to all of its state, in which case that also doesn’t apply to the realm that belongs to the extension itself.

I came up with another more understandable expression: whether the extended page window of Webextension can be developed into a user interface system to replace the browser’s original interface. In order to realize it, the original user interface needs to be hidden, and its own extended page window interface should always be displayed at the upper layer of the web page and at a specific position of the software window, for example, the extended page window should be centrally displayed in the center of the browser. As well as buttons that can read information such as tab lists and redesign accessible browser functions.

As I said, you can not hide any browser UI from an extension. This is part of the security guarantees of the web extension APIs that an API can not make the browser unusable.

And also as said, you can overlay arbitrary things on webpages by injecting DOM content into tabs.