Detect specific mouse down on links

oudstand

I just found this mod and would like to adjust it, to open links a dialog, if I click on it with CTRL + middle mouse button. My problem is, that I don't know if it is possible to detect such a specific mouse down event on a link. Maybe some one here has an idea.

barbudo2005

@oudstand

I recommend this extension:

https://addons.opera.com/extensions/details/iframe/

You can download here:

https://github.com/mataherry/iFrame/

If you click the square it opens an iframe:

barbudo2005

I use this code to modify the square icon:

#mataBox, #mataSearch

{background: transparent !important; 
height: 26px !important ; 
width: 26px !important; 
border: 1px #cfcfcf solid !important;
box-sizing: content-box !important;
border-radius: 8px  !important; 	
margin-left: 24px !important;
margin-top: 0px !important;	
cursor: pointer !important;}

oudstand

@barbudo2005 Thanks for your answer. Currently I'll try to get it managed with the JS mod without the need of an extension.

barbudo2005

@oudstand Said:

….without the need of an extension.

What is an extension but a JS Mod packaged in another form?

oudstand

@barbudo2005 said in Detect specific mouse down on links:

What is an extension but a JS Mod packaged in another form?

I can trust the mod and also I can adjust it to my needs.

barbudo2005

@oudstand

If you feel capable of modifying the Mod, do you think you are capable of doing what is indicated in this post?

https://forum.vivaldi.net/topic/91124/how-to-add-smooth-scrolling-to-web-pages-through-custom-css/13

oudstand

@barbudo2005 probably not, sorry

oudstand

I've finally made it. Maybe someone has ideas on how to improve it.
In setTimeout I created a listener that executes code inside a tab when it's loaded.

chrome.tabs.onUpdated.addListener((tabId, data) => {
  if (data.status === "complete") {
    chrome.scripting.executeScript({
      target: { tabId: tabId },
      func: setUrlClickObserver,
      args: [tabId],
    });
  }
});

Inside of the tab I react on the event if I click ctrl + alt + middle mouse on a link and fire an event.

function setUrlClickObserver() {
  document.addEventListener("mousedown", function (event) {
    // Check if the Ctrl key, Shift key, and middle mouse button were pressed
    if (event.ctrlKey && event.altKey && event.button === 1) {
      let link = getLinkElement(event.target);
      if (link) {
        event.preventDefault();
        chrome.runtime.sendMessage({ url: link.href });
      }
    }
  });

  const getLinkElement = (el) => {
    do {
      if (el.tagName != null && el.tagName.toLowerCase() === "a") {
        if (el.getAttribute("href") == "#") return null;
        return el;
      }
    } while ((el = el.parentNode));

    return null;
  };
}

In a second listener within setTimeout I listen for the messages of the injected code to show the dialog.

chrome.runtime.onMessage.addListener((message) => {
  if (message.url) {
    dialogTab(message.url);
  }
});