Develop Reference

How to reproduce 'paste image' with chrome extension

I'm developing a chrome extension, which can save and paste snippets.
Text items work great:
export function copyText(text: string): void {
const textarea = window.document.createElement('textarea');
textarea.style.position = 'fixed';
textarea.style.opacity = '0';
textarea.value = text;
window.document.body.appendChild(textarea);
textarea.select();
window.document.execCommand('copy');
window.document.body.removeChild(textarea);
}
export function pasteText(element: HTMLElement): void {
element.focus();
window.document.execCommand('paste');
}
Now, I'm trying to implement the same for images. When it works, this is how it looks at discord.com:
Currently, I'm stuck trying to reproduce this behavior (e.g. in Chrome console).
Do you have any idea how it can be implemented?

I'm guessing it's checking what you pasted. If it ends with an image format such as png, jpg, webp or avif. Then it will embed the url in an image element.
eg:_https://random.image/cute-dog.png would become
<img src="https://random.image/cute-dog.png" />

How to check if a iframe has text or pdf

I have a iframe, which could either have a text message or a pdf and this text or pdf is very random in nature.
$('<iframe>', {
src: myRenderUrl,
id: 'myIframe',
frameborder: 0,
scrolling: 'no',
width : '100%',
height : '100%',
}).prependTo('#myDiv');
but after rendering the same I want to check if the iframe contains a pdf or a text, Is there a way to do this using the jquery/js
I found a way using the offsetHeight
if($("#myIframe").offsetHeight != undefined){
// do something
}
But the same thing is not helpful ,
Then using the below mentioned code I get the text but for pdf I gets the error
try {
var iframe = $("#myIframe");
content = iframe.contentWindow.document.body.innerHTML;
// text message obtained
}
catch(error) {
console.error(error);
// seems like obtained a pdf ,but not sure
}
But is there any other better way where it can be categorized if the iframe has text message or a pdf.

How to add a custom button to video js player

I want to make a button which is a link to another page to the video js video player which I am using but nothing seems like working. After adding the button it got added to the control panel of the player but the button is not visible to the user. Also, I want to add a link to that button once it got pressed it should open a new page. I couldn't find good documentation of the same the code which I am trying is posted here.
var player = videojs('my-video');
var button = player.addChild('button');
var myButton = player.controlBar.addChild('button', {
text: "Press me",
// other options
});
How to extent this fuction such as onclick events like that. I guess there will be some methods which i can define inside player.controlBar.addChild('button' This itself

Text you pass in your option is available as a controlText and not a display text. ControlText creates a span in you button which is displayed when hovered. This control text is present in all the components in video js.
To add a text in videojs here is a simple way.
var player = videojs('my_video_1');
// When you pass text in options it just creates a control text,
// which is displayed as tooltip when hovered on
// this button viz the span in you div,
var myButton = player.controlBar.addChild("button");
// There are many functions available for button component
// like below mentioned in this docs
// https://docs.videojs.com/button.
// You can set attributes and clasess as well.
// Getting html DOM
var myButtonDom = myButton.el();
// Since now you have the html dom element
// you can add click events
// Now I am setting the text as you needed.
myButtonDom.innerHTML = "Hello";
myButtonDom.onclick = function(){
alert("Redirecting");
window.location.href = "https://www.google.com"
}
Instead of setting an inner html you can play around and add any html DOM attribute since at the end it is only a button.
Adding Codepen link for code demonstration
https://codepen.io/vaibhav281128/pen/NWawWjr
In case if you want to register your button as a custom component
https://codepen.io/vaibhav281128/pen/bGoYGPR

My solution in case you also want to control the position of your button:
addButtonToPlayer() {
let myButton = player.controlBar.addChild('button');
myButton.controlText('tooltip text');
player.controlBar
.el()
.insertBefore(
myButton.el(),
player.controlBar.getChild('fullscreenToggle').el()
);
let buttonDom = myButton.el();
buttonDom.innerHTML = '⬇'; // button text/emoji
buttonDom.onclick = function() {
alert('Hey');
};
}

Is there any ways to copy images to the clipboard when clicking on custom button?

I'm trying to copy an image to the clipboard and use it in my webpage. But I couldn't store the image data in the clipboard. I tried executing copy commands but I could only able to copy text. Kindly Help.
function copyThings(event){
var msgelem = event.target.previousElementSibling;
// msgelem = the element of current button
var msgcopied = theMsg(msgelem); // returns the content of text if text and url of the image if image.
var copydiv = '<div contenteditable=true id="copyhidden" style="display:block;">'+msgcopied+'</div>';
msgdiv.find('#txtarea').after(copydiv);
msgdiv.find("#copyhidden").select();
document.addEventListener(event, function(){
event.stopPropagation();
event.datatransfer.setData('URL',msgcopied); //No I18N
event.preventDefault();
});
document.execCommand('copy');//No I18N
msgdiv.find("#copyhidden").remove();
}
I just wanted when I click on a particular button the image gets stored in the DataTranferItem.(i.e) the event.clipboardData.items must contain {kind : file, type: image/png}
If I can't do that, what can be the alternate solution?
Thanks in Advance!

Paste image into rich text (like gmail)

I want to be able to copy an image from clipboard, specifically screenshots, and paste them right into a rich text editor, and/or have that file uploaded. We only use chrome so it only has to work for chrome.
http://gmailblog.blogspot.com/2011/06/pasting-images-into-messages-just-got.html
Now, when you’re running the latest version of Google Chrome, you can paste images right from your clipboard too. So if you copy an image from the web or another email, you can paste it right into your message.
Does anyone know if this new gmail feature is something javascript that Id be able to implement myself? Or any other insight into this?

I believe Na7coldwater is correct. The event.clipboardData is being utilised. Please see the following proof of concept:
<html>
<body>
<div id="rte" contenteditable="true" style="height: 100%; width: 100%; outline: 0; overflow: auto"></div>
<script type="text/javascript">
document.getElementById("rte").focus();
document.body.addEventListener("paste", function(e) {
for (var i = 0; i < e.clipboardData.items.length; i++) {
if (e.clipboardData.items[i].kind == "file" && e.clipboardData.items[i].type == "image/png") {
// get the blob
var imageFile = e.clipboardData.items[i].getAsFile();
// read the blob as a data URL
var fileReader = new FileReader();
fileReader.onloadend = function(e) {
// create an image
var image = document.createElement("IMG");
image.src = this.result;
// insert the image
var range = window.getSelection().getRangeAt(0);
range.insertNode(image);
range.collapse(false);
// set the selection to after the image
var selection = window.getSelection();
selection.removeAllRanges();
selection.addRange(range);
};
// TODO: Error Handling!
// fileReader.onerror = ...
fileReader.readAsDataURL(imageFile);
// prevent the default paste action
e.preventDefault();
// only paste 1 image at a time
break;
}
}
});
</script>
</body>
Gmail uploads the image via XMLHttpRequest instead of embedding it directly as a data URL. A search on Google or SO for drag & drop file uploads should reveal how this can be achieved.
Please bare in mind that this is just a proof of concept. Error handling and browser/feature detection code is not included.
Hope this helps!