ferdium / ferdium-recipes

Recipes encapsulate your favourite apps into Ferdium for unified notifications handling and more
MIT License
83 stars 192 forks source link

Feature: Option to toggle target="_blank" to target="_self" #196

Closed Fritigern closed 2 years ago

Fritigern commented 2 years ago

Preflight Checklist

Problem Description

I have added a custom service (just a website) to Ferdium which by default wants to open all links in a new browser window. Because Ferdium (or Electron?) does not support new windows, it opens my web browser. In my case, this is undesired behavior because I would like to keep the service contained to Ferdium rather than have my browser opened.

Proposed Solution

My request is a toggle in the (general?) options to rewrite href target links in websites to target="_self" instead of target="_blank" to allow open in Ferdium by default. Javascript-based links should also be rewritten in this way.

Alternatives Considered

I am not aware of any alternatives that can keep newly browser windows contained to Ferdium, instead of opening them in a new browser tab/instance.

Additional Information

A long time ago I dabbled with HTML4 and CSS. I know that in HTML one can add the tag <base target="_self"> and I seem to remember being able to do the same in CSS but I am not 100% certain. If not CSS, then perhaps Javascript can be leveraged to do this?

vraravam commented 2 years ago

There's already an option in each service to open the links in Ferdium. Doesn't that solve your ask?

Screenshot 2022-08-27 at 6 51 44 AM
Fritigern commented 2 years ago

I am using that, but it doesn't seem to be working on https://www.seraphimsl.com Every link on that page opens a new browser window/browser tab, even with the "open URLs in Ferdium" option toggled on and a full restart of Ferdium. I am not sure if the option itself is broken, or if something on the page breaks the option. I am not equipped to make that determination but, assuming that the option itself is not broken, perhaps it can be improved so that pages like the one that I mentioned above will also obey the option to open links in Ferdium.

vraravam commented 2 years ago

Is that a custom service? I don't see such a service recipe in the repo.

Fritigern commented 2 years ago

I think you already figured out from the context that YES this is a custom service.

Add new service -> search service -> Custom website. Enter title, enter https://www.seraphimsl.com, Toggle "open URLs within Ferdium" to ON. Observe that URLs are NOT opened within Ferdium.

I feel like I am being trolled now.

vraravam commented 2 years ago

Sorry - just getting back to Ferdium contribution. The "trap links and open within Ferdium" is only implemented for certain services, though it shows up as a user-configurable item in the global Settings ui. The relevant code in the custom service should be similar to: https://github.com/vraravam/ferdium-recipes/blob/main/recipes/steamchat/webview.js#L33-L50 - so, if you want to try this out, please copy-paste those same lines into the custom service recipe and check whether it works.

Fritigern commented 2 years ago

It does not work. Adding the highlighted code to the end or in the middle of https://github.com/vraravam/ferdium-recipes/blob/main/recipes/franz-custom-website/webview.js makes none of the links respond.

Removing or commenting the code (and reloading the service) makes the links on https://www.seraphimsl.com/ work again but they open in my browser, not in Ferdium.

Re-adding or uncommenting that bit of code (and reloading the service) renders the links non-functional again.

vraravam commented 2 years ago

Can you please share your edited file? Its tough trying to follow along without that. Also, I'm not going to sign up to that service just to debug this issue. If someone else wants to, then they can chime in here to help.

Fritigern commented 2 years ago

Unedited (this is from your own repo) : https://github.com/vraravam/ferdium-recipes/blob/main/recipes/franz-custom-website/webview.js

Edited: https://gist.github.com/Fritigern/877625af9f506581320ab6907c589f7c

Note that I have also tried inserting the code at line 6 instead of line 11

Also, it is not a service, it is a website. No signup.

vraravam commented 2 years ago

in your file, line 9 (the ending }) should contain the lines that I had highlighted. Please be aware of the indentation

vraravam commented 2 years ago

I have verified that it is indeed working - with the following full contents of the webview.js file:

const _path = _interopRequireDefault(require('path'));

function _interopRequireDefault(obj) {
  return obj && obj.__esModule ? obj : { default: obj };
}

module.exports = (Ferdium, settings) => {
  Ferdium.injectCSS(_path.default.join(__dirname, 'style.css'));

  // TODO: See how this can be moved into the main ferdium app and sent as an ipc message for opening with a new window or same Ferdium recipe's webview based on user's preferences
  document.addEventListener('click', event => {
    const link = event.target.closest('a[href^="http"]');
    const button = event.target.closest('button[title^="http"]');

    if (link || button) {
      const url = link ? link.getAttribute('href') : button.getAttribute('title');

      if (!Ferdium.isImage(link)) {
        event.preventDefault();
        event.stopPropagation();

        if (settings.trapLinkClicks === true) {
          window.location.href = url;
        } else {
          Ferdium.openNewWindow(url);
        }
      }
    }
  }, true);
};
Fritigern commented 2 years ago

Did you verify that with that website I mentioned (which does not require to sign up)? Because with this code not a single link will open. Not in Ferdium and not the web browser. Without your addition, at least it opens in a new browser window.

vraravam commented 2 years ago

Yes, I have verified with https://www.seraphimsl.com/ The "Home", "Recurring events", "Fairs and One-time Events" - all those links open within Ferdium Remember, that once you inject this code, you will have to go to the service settings, check the "Open urls in Ferdium", reload the whole service or quit and restart ferdium for the changes to take effect.

Fritigern commented 2 years ago

Interesting because they don't do a single thing for me when left-clicked.

And yes, I ensured that "Open URLs within Ferdium" is enabled. I've reloaded the service. I restarted Ferdium and the result of the code is that the links no longer seem to respond to my left clicks. Right-clicking a link and choosing "Open Link in Ferdium" does exactly that, so links do work, but left-clicking the links does not.

Disabling the code and reloading the service immediately lets me click the links again but then they open in a new browser window.

BTW, have you tested with links lower on the page? Like the one for "Hello Tuesday"? Because the links across the top of the page will open in Ferdium just fine without the modification of webview.js (they fail to respond to left clicks after modifying it), the ones lower down are the ones which insist on opening in a new page but they too won;t respond to left clicks after adding the modifications to the code.

vraravam commented 2 years ago

Sorry - there was 1 addition to the module.exports line - please try with that. I have tested that the "Hello Tuesday" link works with this.

Fritigern commented 2 years ago

Thank you, that did the trick. It took me a moment to realize that you had edited the post with the code but after updating webview.js with the updated code, all the links open in Ferdium the way I expect them to :D

Thank you so much and may this code land in the nightlies soon! :D