1

I am in the process of creating a chrome extension that allows you to click on context menu options when you are in an editable element. Clicking a context menu option automatically places some text where the cursor is.

The problem I am having is that the process for placing the text differs based on where the text is being placed. For example, If the text is being placed in a textarea, (like the one I am typing in now), the process is different than if I need to put the text in, say, a YouTube comment box, which is its own custom div and does not support the operations that I would use when editing the contents of a normal textarea

In my search for a flexible solution that would work the same for all elements that are in the editable category of the chrome.contextMenus API, I thought of the following Idea:

I should be able to do what I want if I store my variable in the system clipboard with document.execCommand('copy') and then paste it in wherever the cursor is with document.execCommand('paste')

The downside here is that the user would loose whatever they used to have in their clipboard.

I originally planned on just pasting the original contents into my own textarea, then restoring it once I am done with the clipboard, but there are 2 problems with this approach:

  • The user would loose whatever formatting they had originally
  • This would only work for text, not images.

Is there a way that I can save the contents of the clipboard that would allow me to copy them back to the clipboard at later time without the user noticing any modification to the content?

If I have any glaring misconceptions, please correct me as I am new to JS, the DOM and HTML

Luke
  • 5,567
  • 4
  • 37
  • 66
  • You already asked that before though: http://stackoverflow.com/questions/27908309/storing-clipboard-data-into-a-variable-with-javascript-and-the-google-chrome-api – Xan Jan 20 '15 at 19:20
  • **TL;DR version of the question:** "How to temporarily swap/stash clipboard contents regardless of their format and then put it back" – Xan Jan 20 '15 at 19:22
  • 1
    @Xan That was a separate question, at that point, I was specifically trying to store the contents into a string variable. At this point, I am looking for a way to AVOID doing that, because it does not allow me to do what I want. – Luke Jan 20 '15 at 19:23
  • I think you're overcomplicating things a lot by using the clipboard. Why do you need it? There are ways to just insert text programmatically where the cursor is, not just pasting text. E.g. see http://stackoverflow.com/questions/4418958/insert-text-in-a-textarea-text-input-at-the-cursor-when-code-is-being-executed?rq=1 – Xan Jan 20 '15 at 19:30
  • I can try that when i get home, but the main problem I was having last night was that, if you are in, say, a YouTube comment box, document.activeElement.value actually returns undefined. This leads me to believe that the solution you pointed me to does not provide the flexibility I need – Luke Jan 20 '15 at 19:34
  • Where do you test it? You need to inject a content script in response to the context menu event and do it _there_. – Xan Jan 20 '15 at 19:35
  • That is what i am doing. To be clear I do have a solution that works if you are in a normal text area, but if it is in a custom div, it does not work. I can post the code I do have later tonight if it would help. – Luke Jan 20 '15 at 19:36
  • Problem is, on YT comments are actually sandboxed in an iframe. It's certainly possible to reach there and modify the editable `
    `, but that's indeed a lot of work and corner cases.
     – Xan Jan 20 '15 at 20:28
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/69251/discussion-between-lukep-and-xan). – Luke Jan 20 '15 at 20:40

0 Answers0