How to detect which option from hyperlink's right-clicked contextmenu was clicked?

Question

Let's assume I'm using default browser's contextmenu.

How can I find out that user for example has chosen "Copy link Location" from right-click contextmenu?
How can I overwrite default behaviour after "Copy link Location" action? (e.g. replace the link, but if user choose "Open in a new tab", it'll still be the original link).

Edited: replacing link in the clipboard RIGHT AFTER closing the link's contextmenu (even if user had chosen different option than "Copy link location") is also acceptable solution.

Why do you want to change what the user copied to their clipboard? — guest271314, Feb 03 '19 at 14:03
_"Edited: replacing link in the clipboard RIGHT AFTER closing the link's contextmenu (even if user had chosen different option than "Copy link location") is also acceptable solution."_ Is the requirement to achieve replacing the content of the clipboard without the user's knowledge and permission? — guest271314, Feb 03 '19 at 18:33
NDA. Please no offtopics - stick to the tech context of the question. — Michal_Szulc, Feb 03 '19 at 22:46
Does not asking the question here shred the NDA? What you are asking is not possible without user action, for good reason. Kindly and ethically advise client of that. — guest271314, Feb 03 '19 at 22:48
Why do you resort to calling names? What you are essentially asking is how to subvert and sabotage the users' system without their permission. Unless am mistaken that the requirement is to change the content of the users' clipboard without user knowledge or permission. — guest271314, Feb 03 '19 at 23:45
Ok. That is why asked. If user permission is granted, yes the requirement is possible. — guest271314, Feb 03 '19 at 23:48

Bharata · Answer 1 · 2019-02-03T10:53:07.350

5

Unfortunately it is not possible to detect something what was choosen on default browser's contextmenu because of security reasons.

It is also not possible to ~~overwrite~~ override default functions / actions on default browser's contextmenu because of security reasons.

What you can do:

With browser extensions (end user should install your extension at first) you can add your own custom options with your icon and functions to default browser's contextmenu.
You can override default behaviour on mouse right click. For example after right click you can show your own custom contextmenu with your own functions.

EDIT: My answer to the first comment from OP (original poster):

The link replacement after right click and on oncotextmenu event has nothing to do what you want to achieve in your question! I wrote already above that

you can override default behaviour on mouse right click

And this means also that you can replace the link after right click, but in your question you want to replace the link after click on specific menu option from default context menu. And this is not possible because of security reasons.

You have to read about the oncontextmenu event:

The contextmenu event typically fires when the right mouse button is clicked on the window. Unless the default behavior is prevented, the browser context menu will activate.

edited Feb 03 '19 at 10:53

answered Feb 01 '19 at 19:47

Bharata

13,509
6
36
50

Oh, unfortunatelly it's not true. I have already found a generic way to change the url in right-click actions: https://stackoverflow.com/a/54421841/2166188 . However right now, I'd like to change only "Copy link location" url – Michal_Szulc Feb 03 '19 at 09:50
1

Michal, you have wrong imagination about it. `oncontextmenu` event and link replacement have nothing to do with your question. I wrote the answer for you in my answer above. – Bharata Feb 03 '19 at 11:01
I'm trying to find a solution. If `oncontextmenu` is not a right place, so what are the options? Replacing link in the clipboard right after closing `contextmenu`? If so, how? – Michal_Szulc Feb 03 '19 at 23:48
Michal, "replacing the link in the clipboard after closing from contextmenu" is possible only with some permission from user and only before the opening from contextmenu because we do not have some event from closing of this menu. But some wrong code like this event you could have like **[here](https://stackoverflow.com/a/12802008/9801830)**. But if you want in all cases replace the link then why do you want to wait until the closing from contextmenu? You can replace the link in the HTML on contextmenu opening like in your code from the link above. But I personelly would never do it. – Bharata Feb 04 '19 at 08:49
I don't want to replace link in the HTML, cause if user clicks "open in new tab" or "open in new window" I would lke to use original link. I'm only interested in replacing link when user chooses "Copy link to clipboard" from contextmenu – Michal_Szulc Feb 08 '19 at 12:08
Problem with linked solution is that I can not change the clipboard when the document/window already runs `blur` or `focusout` event – Michal_Szulc Feb 08 '19 at 12:11

score 5 · Accepted Answer · answered Feb 03 '19 at 23:59

5

Edited: replacing link in the clipboard RIGHT AFTER closing the link's contextmenu (even if user had chosen different option than "Copy link location") is also acceptable solution.

If the user grants appropriate permissions you can use contextmenu event, focusout attached to window within contextmenu event handler and Async Clipboard API

<body>
  <a id="a" href="#">click</a>
  <script>
    a.addEventListener('contextmenu', e => {
      console.log(e);
      window.addEventListener("focusout", e => {
        console.log(e);
        navigator.clipboard.writeText(a.href)
          .then(() => {
            console.log('Text copied to clipboard');
          })
          .catch(err => {
            // This can happen if the user denies clipboard permissions:
            console.error('Could not copy text: ', err);
          });
        navigator.clipboard.readText()
          .then(text => {
            console.log('Pasted content: ', text);
          })
          .catch(err => {
            console.error('Failed to read clipboard contents: ', err);
          });
      }, {
        once: true
      });
    });
  </script>
</body>

plnkr

answered Feb 03 '19 at 23:59

guest271314

1
15
104
177

1

Interesting! Small hint: I don't need `navigator.clipboard.readText()` section at all. Moreover I spotted a problem with `focusout`: it's only working if user clicks one more time inside the browser's window. If user click anywhere else (e.g. on browser panel or minimise browser window and paste link into different app) - it's not working. Which event will be more generic and is triggered in such a situations? – Michal_Szulc Feb 04 '19 at 00:58
@Michal_Szulc The `focusout` event was used as an example at the POC. You can try `focus` or `setTimeout` or other means to estimate when to access the content of the clipboard. Given that this answer is for the blockquote portion of the question at the answer, there is not need for any appreciable delay when accessing the set clipboard data. `.readText()` was included to demonstrate that the content was set. Adjust the code to meet the specific requirement accordingly. – guest271314 Feb 04 '19 at 01:01
So which event will be appropriate to use after closing the contextmenu by user to ensure it will be executed? (even if closing conetextmenu operation was triggered by clicking e.g. alt-tab?) – Michal_Szulc Feb 07 '19 at 00:14
@Michal_Szulc Only tried `focusout`, `focus` and `blur`. And `setTimeout`. Which events or other approaches have you tried to accomplish what you are trying to achieve? – guest271314 Feb 07 '19 at 07:46
it seems that problem is with tab focus, cause console.log inside `focusout` or `blur` is printed to console: https://developers.google.com/web/updates/2018/03/clipboardapi `To help prevent abuse, clipboard access is only allowed when a page is the active tab. Pages in active tabs can write to the clipboard without requesting permission, but reading from the clipboard always requires permission.` – Michal_Szulc Feb 08 '19 at 12:05
@Michal_Szulc You can attach `blur` or `focusout` event to `document.activeElement`, which should be the `` element. If/when the user does focus on the `docment` then the code at the answer will execute. Or, instead of using an event, you can perform the task at `contextmenu` event. – guest271314 Feb 08 '19 at 14:48

score -1 · Answer 3 · answered Feb 08 '19 at 10:35

-1

contextmenu is used to identify the right click for example :

$('{IdOrClass}').on('click contextmenu', "a", function(event) {
   alert("Right clicked"); // do whatever you want on right click
});

answered Feb 08 '19 at 10:35

Amit Naraniwal

1,400
10
12

We're trying to identify the chosen option from contextmenu after `right click` menu is open, not opening contextmenu itself. – Michal_Szulc Feb 08 '19 at 10:49

How to detect which option from hyperlink's right-clicked contextmenu was clicked?

3 Answers3