Universal Web Panel Mod

aminought

Video example: https://youtu.be/e5ikfdcSvgs
Github: https://github.com/aminought/vivaldi-universal-web-panel

A completely revised post due to the change in the idea of this panel.
I know that many people here don't like Yandex, so instead of my examples, you can come up with your own.

I'm not sure if this was my original idea, but I have created a Universal Web Panel (UWP) that allows you to insert any link, HTML, or JavaScript. Initially, I only wanted to focus on links, but the additional functionality I've added gives limitless possibilities to use this panel: you can execute regular JavaScript using a chain of commands, copy the results to the clipboard with this script, and display it in this panel. In other words, this turns out to be a sort of helper panel that can display absolutely any information that can be presented in the form of HTML.

Moreover, I found that the JavaScript that runs inside this panel has slightly more features than the one that runs from the address bar. For example, there are no CORS restrictions, which means you can make HTTP requests to other domains. This makes it possible to run JavaScript in this panel, which goes to some API and displays the result regardless of the page that is opened in the web panel. An example will be below.

gif

Opening a page

If you simply want to open the page in the web panel, copy the address to clipboard, open the panel, and paste the address into the input field. Focus is set automatically, so command chains will work without any issues.

HTML Display

HTML can be displayed as well. For example, you can insert the following code into the input field:

<div style="margin: 30px"> Hello, I am aminought! This is my <a href="https://forum.vivaldi.net/user/aminought/">profile</a></div>

And get this:

Running Javascript

Javascript also works quite simply, but the code must have a specific format:

(() => {
// Your code
})()

As an example, I implemented a chain of commands to summarize the article and display the result in UWP:

Open Link in Current Tab. Here, we run a script that, no matter how strange it may sound, creates a new script with access to the API of 300.ya.ru and opens provided link in the UWP. After that we copy the resulting script into the clipboard.

javascript:(() => {
    history.replaceState({}, "", location.href);
    script = `
        (() => {
        const options = {
            method: 'POST',
            headers: {
                Authorization: 'OAuth <token>',
                'Content-Type': 'application/json'
            },
            body: '{"article_url": "${location.href}"}'
        };
        fetch('https://300.ya.ru/api/sharing-url', options)
            .then(response => response.json())
            .then(response => {
                window.open(response['sharing_url'], '_self');
            });
        })()
    `;
    setTimeout(() => {
        navigator.clipboard.writeText(script);
    }, 200);
})();

Focus Page. You need to set the focus on the page, otherwise Clipboard API won't work.
Delay: 300.
Web Panel <n>. Open the web panel, which is configured as universal.
Delay: 300. We are waiting for the panel to open.
Paste. UWP will automatically pick up the inserted script and process it. The summary of the page will be displayed in the web panel.

By the way, without this panel, I just got a huge chain of commands to do about the same thing.: https://forum.vivaldi.net/topic/94743/суммаризация-страниц (ru). There I placed the summarization vertically with the current page, but the UWP option is much faster and more convenient.

Installation

You need to act as described in the post about modding:

Place universal_web_panel.js inside <YOURVIVALDIDIRECTORY>\Application\<VERSION>\resources\vivaldi.
Add line <script src="universal_web_panel.js"></script> in the <body> of window.html.
Restart Vivaldi.

Configuration

If you want to quickly access your favorite sites, you can create a folder called "UWP" in your bookmarks and add some bookmarks. Here's how it would look:
gif

Screenshots

Example of an open page:

An example of the result of a chain of commands that collects all links from a page:

I spent quite a lot of time creating this panel, some bugs could remain, so bring them to me here or in Github

Inspired by LonM's mod.

UPD 2/2/2024:

Added the ability to insert html and json of a specific format into the field.
Added a link to Github.
Updated the description.

UPD 2/9/2024:

Сompletely changed the concept of this panel, now it's a mod.
Rewrote the code from scratch.
Added the ability to run JavaScript.
No CORS restrictions now!
Updated the description.

UPD 2/10/2024:

Refactoring and optimizations.
UWP no longer uses Google to get icons. Instead, it uses chrome://favicon.
Fixed the behavior of the icon and the title.

UPD 2/11/2024:

Changed the way the mod is configured. Instead of using BUTTON_NUMBER and WEBPANEL_NUMBER, which don't work if lazy loading of web panels is enabled, you now need to specify PANEL_ID instead.
Updated the instructions for mod configuration.

UPD 2/12/2024:

Added an option to use only the default icon. @oudstand, thank you!
Also merged @oudstand's changes for cross-platform compatibility.
Added an item about the default icon to the instructions for mod configuration.

UPD 2/13/2024:

Added an option to display a combobox to select your favorite websites for quick access (adapted @oudstand's solution).
Added an option to set toolbar height: TOOLBAR_HEIGHT.
Added an option to set radius of the input field border: INPUT_BORDER_RADIUS.
Updated the description.

UPD 4/9/2024:

Now the mod does not require any configuration at all, everything works out of the box. Web panel is created automatically and is embedded in the sidebar itself.
"Favorites" are now essentially bookmarks. This means that instead of editing the mod file, it's enough to simply create a folder named "UWP" in the bookmarks, put the web pages you want to open in the universal web panel, and the mod will automatically load them with the icons.
Changed icon to a monochrome zipper, the color of which changes depending on the installed theme.
Web panel icon no longer changes depending on the open page to make it easy to find it in the panel.

oudstand

@aminought Thanks for your work. You said "put the web_panel_icon.png icon next to it", do you have a specific one? Also I get this error no matter which URL I use.

aminought

@oudstand Sorry, forgot to mention: you have to request temporary access to demo proxy here. Later, I will find another one or create one myself in Heroku. Actually, it is possible to deploy local proxy.

aminought

@oudstand And this my icon for now: https://disk.yandex.ru/i/4VuuL12LeFfs9Q. I'm going to find a better one.

oudstand

@aminought Thank you, now it's working fine

sarika78

This post is deleted!

aminought

Hi there, I really liked this idea and decided to upgrade the code and add some new features. I also posted the updated code on GitHub: https://github.com/aminought/vivaldi-universal-web-panel.

I have created several command chains using this panel. You can see an example of this in the video: https://youtu.be/HxXjkAlzxyA.

Now, in addition to the URL, you can also insert html code and json in the text field in the format {"url": <url>, "html": <html>} to open pages already loaded in the browser. In short, you can insert this:

<div style="margin: 30px"> Hello, I am aminought! This is my <a href="https://forum.vivaldi.net/user/aminought/">profile</a></div>

Or this:

{
    "url": "https://forum.vivaldi.net/topic/94754/universal-web-panel", 
    "html": "<div style=\"margin: 30px\">Hello, I am aminought! This is my <a href=\"\/user\/aminought\/\">profile<\/a><\/div>"
}

And get this:

This feature opens up a vast range of possibilities. For instance, you can run javascript code on any web page using a chain of commands, format the results in html format, and copy and paste them into this panel. As an example, I have written the following code to extract links from a website::

javascript:(() => {
    history.replaceState({}, "", location.href);
    var links = new Set();
    const as = document.body.getElementsByTagName('a');
    for (const a of as) {
        var link = a.getAttribute('href');
        if (link) {
            if (link.startsWith('//')) {
                link = 'https:' + link;
            } else if (!link.startsWith('http')) {
                domain = location.href.match(/([\w-]+\.)+([\w-]+)/)[0];
                link = 'https://' + domain + link;
            }
            links.add(link);
        }
    }
    var html = '<div style="margin: 30px">';
    for (const link of links) {
        html += `<a href=${link}>${link}</a><br>`;
    }
    html += '</div>';
    setTimeout(() => {
        navigator.clipboard.writeText(html);
    }, 200);
})()

Now, it's enough to create a simple chain of commands with running this code on your current page, opening a web panel, and inserting it. You can see the results in the video. And, all of this without any modifications, your scripts won't disappear after updating the browser.

The only downside of this panel is that javascript practically doesn't work on open pages due to browser restrictions. However, this web panel can still be used, as you might have noticed in the video I made. If you bring issues to Github and help develop this project, along with a collection of useful command chains based on it, I would be very grateful.

valiowk

Someone made this "Paste URL into panel" long ago, I don't know if it would be of any use as a reference?

oudstand

@valiowk At least it's working without the CORS problems.

oudstand

@aminought Can you share your command chain to display the current website in the panel?

aminought

@oudstand Sure.

Open Page in Universal Web Panel

Open Link in Current Tab:

javascript:(() => {
    url = location.href;
    history.replaceState({}, "", location.href);
    html = document.documentElement.innerHTML;
    json = JSON.stringify({'url': url, 'html': html});
    setTimeout(() => {
        navigator.clipboard.writeText(json);
    }, 200);
})()

Focus Page
Delay: 300
Web Panel <n>
Delay: 100
Paste as Plain Text

aminought

UPD 2/9/2024:

Сompletely changed the concept of this panel, now it's a mod.
Rewrote the code from scratch.
Added the ability to run JavaScript.
No CORS restrictions now!
Updated the description.

New video example: https://youtu.be/e5ikfdcSvgs

aminought

UPD 2/10/2024:

Refactoring and optimizations.
UWP no longer uses Google to get icons. Instead, it uses chrome://favicon.
Fixed the behavior of the icon and the title.

oudstand

I get this, if I use a different BUTTON_NUMBER and WEBPANEL_NUMBER than 0
Failed to execute 'observe' on 'MutationObserver': parameter 1 is not of type 'Node'

aminought

@oudstand I reproduced this error: it happens when WEBPANEL_NUMBER exceeds the number of web panels minus one. Are you sure you're starting to count from zero and not from one?

oudstand

@aminought yes, I'm sure ^^

aminought

@oudstand Like this?

oudstand

@aminought Yes, but document.querySelector(".webpanel-stack"); returns only the loaded web panels. For example if I clicked on 2 then the code returns 2 web panels also if my panel would be the fourth.

I tried to load by URL: const panel = document.querySelector(".webpanel-stack [src='${URL}']") and const panelButton = document.querySelectorAll(".button-toolbar-webpanel [title~='${URL}']") but then I get

aminought

@oudstand Got it, you have lazy loading enabled. It seems that, in order for this panel to function correctly, this option needs to be disabled until I find a way to work around the issue.

oudstand

@aminought yes that was the problem