Clipboard functions not working in online html games

How do I...?
1

Hi there!

When using the Clipboard extension, it works perfectly fine when running it on my PC.

However when I run the game online (on itch), the “Write To Clipboard” Functions using the Clipboard.

Nothing gets written, the clipboard remains empty.

Does anyone know how to make it work?
Are there ways to copy to clipboard or select text, other than using the clipboard extension?

I might mention that the error cannot be fixed by using the cliipboard module version 1.0.

2

The clipboard extension works for online html5 games. It cannot bypass limitations imposed by the web platforms though:

  1. Your game needs to be in a Secure Context
  2. If your game is embedded into another website (e.g. liluo or itch.io), that site must explicitly allow clipboard access to the game in their IFrame Permission Policies.

If you cannot read the clipboard, you must either be using an old version of the extension, or not meeting one of the above criteria imposed by the web platform on clipboard access.

1 Like
3

Hello Arthur,

thank you for the information.
I am trying to make the clipboard pasting work on itch.io in an online html5.

I am wondering how I can use this information practically.
1.) Are there any settings on itch.io that I can change that allow me to establish a 'secure context/environment" on itch? I did not find any settings nor information on that online.
Do you know if itch provides a secure context?

2.) As well, I could not find anything related to itch.io’s IFrame Permission Policies. Is there anything I can do to set them the way they need to be? Or do you know of ways to set it up inside the javascript file in a manner that should work?

I want to clarify that even writing to clipboard did not work when I used your and Bouh’s latest version clipboard extension.
I’m not sure if you’re using the clipboard API with javascript in your extension, but when I write to clipboard using only pure javascript instead, it works.
I used this code within Gdevelop, and it worked perfectly:

function copyStringToClipboard (str) {
// Create new element
var el = document.createElement(‘textarea’);
// Set value (string to be copied)
el.value = str;
// Set non-editable to avoid focus and move outside of view
el.setAttribute(‘readonly’, ‘’);
el.style = {position: ‘absolute’, left: ‘-9999px’};
document.body.appendChild(el);
// Select text inside element
el.select();
// Copy text to clipboard
document.execCommand(‘copy’);
// Remove temporary element
document.body.removeChild(el);
}

Maybe it’s worth a thought to use that in the extension?

As for reading the clipboard, I know that Javascript also needs to get the user’s permission to access that, and I didn’t have the time to test it out using pure Javascript code to do that. I would hope that a permission request would pop up automatically and that it works on itch. But I still need to try it out.

In any case, even writing to clip board did not work for me on itch when I used the clipboard extension 1.0.0

4

I can answer some of these:

No to both of these. They are controlled at the itch.io level, and you as a dev cannot modify them.

If I’m reading this right (it’s been like 7 years since I dealt with JS code directly) I believe the problem is that will only work in HTML5, and won’t work crossplatform. The Extension is designed with crossplatform usage in mind.

5

Okay thanks, yes, that makes sense that the module is not in JS code directly then!

I have tested out direct javascript code for reading the clipboard and it does not work on itch.io, because you don’t have permission to access it via the web site.

I found a 6 year old suggestion for a work around on itch to get the clipboard content, using the javascript canvas.
https://itch.io/t/16097/tip-getting-clipboard-data?before=5#post-6421260

I haven’t figured out how to implement that into a workable code.
I might be able to experiment and with a little bit of luck figure out how to make it work. If I find the time.
But if anyone has an idea or an intuition how to best implement it to work it into a clean code that can store the content into a variable, I’d very much appreciate it.

This is the suggested code to use:

declare var document;
let canvas = document.getElementsByTagName(“canvas”)[0];

namespace Clipboard {
// Create a hidden input.
let content = document.body.appendChild(document.createElement(“INPUT”));
content.setAttribute(“type”, “text”);
content.style.cssText = “position:absolute;width:1px;height:1px;left:0px;z-index:-1;visibility:none;”;

// Redirect the paste event to "content".
document.onpaste = (event) => {
    content.value = "";
    content.focus();
    Sup.setTimeout(4, () => {
        canvas.focus();
    });
};

// Get the previous data in "content".
export function getData(): string {
    return(content.value);
}

// Clear the data in "content".
export function clear(): void {
    content.value = "";
}

// Continually check for content until the breakpoint is reached, or time has run out.
function waitFor(callback: (data) => void, breakpoint: () => Boolean): void
function waitFor(callback: (data) => void, timeout: number): void
function waitFor(callback: (data) => void, exit: any): void {
    if((content.value!="")||((typeof exit == "number") ? exit<0 : exit())) {
        callback(content.value);
    } else {
        Sup.setTimeout(4, () => { waitFor(callback, (typeof exit == "number") ? exit-1 : exit); });
    }
}

// The "initialization" function to wait for input.
export function onPaste(callback: (data) => void, breakpoint: Function): void
export function onPaste(callback: (data) => void, timeout: number): void
export function onPaste(callback: (data) => void, exit: any): void {
    content.value = "";
    waitFor(callback, exit);
}

}

// Breakpoint example.
Clipboard.onPaste(
(data) => { Sup.log(data); },
() => { return(Sup.Input.wasKeyJustPressed(“ESCAPE”)); }
);

// Timeout example. (30 seconds)
Clipboard.onPaste(
(data) => { Sup.log(data); },
30000
);

6

I have one more question:

arthuro555, you said it is compatible with html5, but the clipboard extension does not work on Gdevelop’s own site liluo.io either.

I used the most recent version 1.0 of the clipboard.

So if it does not run even on Gdevelop’s own online site, it basically means the clipboard functions do not actually work in html versions. Because there is no server that would provide the right circumstance for it to work.

7

I already answered this on the other topic you created.

8

Okay thanks, my reply can be found there as well.

9

This is just a summary for the solutions arturo555 provided in the other thread.
In case someone else has the same issue and comes across this thread:

Solution:
Display the text that you want to copy paste in the new experimental text input object. (not a text object or text entry object).
Text input objects can be accessed and selected directly, allowing you full control, as well as copy and paste, even in online browser games.

And if you want copy-paste in order to share long IDs to connect two peer2peer players in a multi-player game:
2. solution: avoid sharing long IDs and needing to copy-paste altogether:
You can store a long ID in firebase together with a short room name, or short representative code. Just like you would store a high score. Users can get the long ID code through Firebase without needing to copy paste anything.

1 Like