Parse and add url from clipboard - javascript

I need a javascript bookmark to take the url I have in the clipboard parse out the 2 numbers and create a new url, and add a link to the top of the page, that when clicked adds the url to my bookmark menu.
Say I have url's like these
http://www.website.com/frontpageeditor.jhtml?sectionID=2844&poolID=6276
javascript:getPoolPageUrl(9800,22713)
Then I need to add the numbers to this url
javascript:frames['content'].getPoolPageUrl(9800,22713)
and then add the url to the top of the frame "content".
I have tried forever on this, but I can't figure out it out.
Update
I've put something together, to show you what I need. This one doesn't work though. Any ideas why?
var url = window.clipboardData.getData('Text');
var reg = /(\d+)/g;
var matches = url.match(reg); //returns ["2844","6276"]
var newUrl = "javascript:frames['content'].getPoolPageUrl("+matches[0]+","+matches[1]+")";
var link = document.createElement('a');
link.src = newUrl;
frames['content'].document.body.appendChild(link);
Update2
This works. Any changes I can do to make it even better?
var url = window.clipboardData.getData('text');
var matches = url.match(/(\d+)/g);
var link = frames['content'].document.createElement('a');
link.href = "javascript:frames['content'].getPoolPageUrl("+matches[0]+","+matches[1]+")";
link.innerHTML = document.title;
frames['content'].document.body.appendChild(link);

Ok, first of all I think you cannot retrieve the text from clipboard from java script, my guess that it would be a major security issue if you can.
Let's assume you have the clipboard in a string you can call this function:
var url = "http://www.website.com/frontpageeditor.jhtml?sectionID=2844&poolID=6276"; //clip
var reg = /(\d+)/g;
var matches = url.match(reg); //returns ["2844","6276"]
var newUrl = "javascript:frames['content'].getPoolPageUrl("+matches[0]+","+matches[1]+")";
frames['content'].document.getElementById("linkPlaceHolderWhereYouWantToAdd").href=newUrl;

You're creating the element in one document, and then appending it to a child located in another document. This doesn't work. You need to create the element in the document that you're going to be adding it to.
Also, the a object doesn't have a src member, it uses href.
Eg:
var link = frames['content'].document.createElement('a');
link.href = newUrl;
link.innerHTML = newUrl;
frames['content'].document.body.appendChild(link);
Do note however, that window.clipboardData is IE-specific code.

JavaScript is not permitted to access the clipboard's contents for one reason alone: Security.
If you accidentally copied your credit card number or some other personally-identifying information into your clipboard, and you visited a malicious website, it could easily snatch up your clipboard and send it off to the server before you even knew there was a risk. So, browser developers explicitly forbid it.

Related

How to track bookmarklet usage using Image in Matomo?

I want to count users that use my bookmark in my Piwik/Matomo instance.
This is my code:
x = new Image();
x.src = 'https://piwik.jcubic.pl/matomo.php?idsite=7&rec=1&action_name=bookmark&urlref=' + location.href;
The problem is that when I open the statistic for today I don't see website with bookmark or reference on which the script was executed. I did this in incognito mode, so there was not cookie that disabled tracking for my browser.
The bookmark is REPL for Scheme language, so it's more likely be website that have Scheme learning resource or YouTube with video about Scheme. I think it's not the problem that I will track the url when bookmark was executed, there will be no information about the actual user so I think this is fine.
You can try to encode your href
const searchParams = new URLSearchParams({idsite: 7, rec: 1, action_name: 'bookmark', urlref: location.href});
const url = new URL('https://piwik.jcubic.pl/matomo.php')
url.search = searchParams.toString()
x.src = url.href;
Then you will have a URL like this with encoded special chars:
"https://piwik.jcubic.pl/matomo.php?urlref=https%3A%2F%2Fstackoverflow.com%2Fquestions%2F63977752%2Fhow-to-track-bookmarklet-usage-using-image-in-matomo"

Hide div based on different domains

I have two domains domainone.com and domaintwo.com both are aliases of one and another, however I'm wanting the logo of the site to change based on which URL is loaded.
The reason why is because it's a URL shortening script so there's no point me running multiple of the same scripts.
For example:
domainone.com/b should show logoone.png and domaintwo.com/b should show logotwo.png
Any help is greatly appreciated thanks.
You can probably do a switch statement or several if statements using window.location.hostname, which is the hostname of the current website (ie. domainone or domaintwo), and from there, change the source attribute of an image document.getElementById().src = whatever you want to put here
Well, you may want to use some javascript + css selectors for this.
First select your img element where you're changing the image:
let image = document.querySelector(".divClass img");
Or if you can set an id for image element that would be:
let image = document.getElementById("yourImgId");
Then check for the hostname with this:
let hostname = window.location.hostname;
And then use a regex to test domain names
if(/domain1.com/.test(hostname){
image.src = yourImage1Url;
}
else if(/domain2.com/.test(hostname){
image.src = yourImage2Url;
}
And so on you may do this further if someday there are more domains.
Edit: just to make sure everything happens when it's safe, you may wrap that code into a function and use it on an eventListener like this:
function YourFunctionName(){
let image = document.getElementById("yourImgId");
//or let image = document.getElementById("yourImgId");
let hostname = window.location.hostname;
if(/domain1.com/.test(hostname){
image.src = yourImage1Url;
}
else if(/domain2.com/.test(hostname){
image.src = yourImage2Url;
}
}
window.addEventListener("load", YourFunctionName);
I hope this helps you out.

how to update page source

I've made a simple test file for adding custom list items with hrefs to a list, it works but when I refresh the page the list items are gone because the actual page source isn't updated. How do update the page source and keep the list items?
I don't think you'll need to see the js to answer but here it is anyway.
var list = document.getElementById('list');
var input = document.getElementById('input');
var input2 = document.getElementById('input2');
var button = document.getElementById('button');
function addListItem(){
var listItem = document.createElement('li');
var inputValue = document.getElementById('input').value;
var linkValue = document.getElementById('input2').value;
var listText = document.createTextNode(inputValue);
var link = document.createElement('a')
link.href = linkValue
link.appendChild(listText)
listItem.appendChild(link);
document.getElementById('list').appendChild(listItem);
I have used LocalStorage when I want to save data to my computer.
If I did:
LocalStorage.setItem("Name","Jhon"); // Store data "Jhon" to storage "Name"
LocalStorage.getItem("Name"); // Returns "Jhon"
It will remember what "Name" is even if you reload the page.
However it will always return it as a string. So you would need to un-string it.
Hope this helps!
You don't! The page source is something that you have directly written in your html file or generated on the server side. When it comes to DOM manipulation, what happens in the client side, stays in the client side.

Alternative to XMLHttpRequest() o DOMParser.parseFromString to make a DOMobject from an external website?

I am developing an extension which needs to take the HTML of an external website and looks for all the downloadable links. The code I have written works... but only sometimes, because during the parse process, a lot of the websites makes the parser throw a parseError at some point. There are some webs (which are designed good enough to be able to be parsed without problems) where all the extension works perfectly. In some other websites, the parseerror makes the getElementsByTagName useless.
I guess one option would be to instead of using a DOMobject to find all the links by reading the strings... but that's way more complicated. The point is that using the Downloader extension sample from the chrome extensions dev website, it works perfectly (because instead of using the DOMobject from an external website, it creates the DOMobject from the current active tab).
I thought also of the alternative of opening a new tab with the website temporarily, loading the DOMobject from that tab and then close it and keep going on with the code, but it is a very ugly solution (the user would see a tab opening and closing...).
Edited with current code. Now I receive a document object as response, but when I want to put it in an object to deal with it the result is undefined.
//Get the HTML of the website
var xhr = new XMLHttpRequest();
xhr.open("GET",website.get_URL);
xhr.responseType = "document";
xhr.send();
doc = xhr.responseXML;
// if(xhr.responseXML !== null){
// doc = xhr.responseXML;
// } else {
// // var parser = new DOMParser();
// // doc = parser.parseFromString(xhr.response, "text/xml");
// };
console.log(xhr);
console.log(doc);
// Get all the links in the website and put them in an array (from Download extension from Chrome Extensions Samples)
var links = [].slice.apply(doc.getElementsByTagName("a"));
console.log(links);
links = links.map(function(element){
var href = element.href;
var hashIndex = href.indexOf('#');
if (hashIndex >= 0) {
href = href.substr(0, hashIndex);
}
return href;
});

Import to notepad using jquery

Is there any link for exporting the datas to notepad?
I have some fields like
Name,
Age, and
WorkingStatus
These are text and textarea...
I want to insert this datas to the notepad.Is there any demos or code available?
I don't know of any way to have the browser open notepad, but you can use HTML5 features to save a file as text, and then open it on your own inside notepad. Depending on the browser, you may need to trigger saving the file on the user side. Here's two references, which I'll summarize:
http://thiscouldbebetter.wordpress.com/2012/12/18/loading-editing-and-saving-a-text-file-in-html5-using-javascrip/
http://updates.html5rocks.com/2011/08/Saving-generated-files-on-the-client-side
Basically, you want to create and save a blob with your text. It should look something like this:
var arrayOfStuff = [];
arrayOfStuff.push("Name Age Working status");
arrayOfStuff.push("-----------------------------------------------");
arrayOfStuff.push(document.getElementById("name").value);
// etc
var blob = new Blob(arrayOfStuff, {type:'text/plain'});
// (the rest is copied directly from the wordpress link)
var downloadLink = document.createElement("a");
downloadLink.download = fileNameToSaveAs;
downloadLink.innerHTML = "Download File";
if (window.webkitURL != null)
{
// Chrome allows the link to be clicked programmatically.
downloadLink.href = window.webkitURL.createObjectURL(textFileAsBlob);
downloadLink.click();
}
else
{
// Firefox requires the user to actually click the link.
downloadLink.href = window.URL.createObjectURL(textFileAsBlob);
document.body.appendChild(downloadLink);
}
If notepad isn't a big deal, you should also be able to open this blob in an iframe as .txt, and then right-click and saveAs, if you prefer.
Edit
Ok, this was actually new for me to play with, so some of my older information wasn't quite right. Here's the javascript from the working fiddle:
var arrayOfStuff = [];
arrayOfStuff.push(document.getElementById("name").value + "\n");
arrayOfStuff.push(document.getElementById("email").value);
arrayOfStuff.push("\n");
arrayOfStuff.push(document.getElementById("phone").value);
arrayOfStuff.push("\n");
arrayOfStuff.push(document.getElementById("comments").value);
arrayOfStuff.push("\n");
alert(arrayOfStuff);
var blob = new Blob(arrayOfStuff, {type:'text/plain'});
var link = document.getElementById("downloadLink");
link.download = "details.txt";
link.href = window.URL.createObjectURL(blob);
The fiddle is at http://jsfiddle.net/xHH46/2/
There are a few lessons learned:
If you're on firefox, it gives you the option to open the .txt immediately in Notepad. However, notepad isn't paying attention to the linefeeds, whether they're \n or \n\r, appended to the immediate string or added separately, so I'd recommend using Wordpad instead. Or, you can save the file.
More importantly, realize that the link you display is based on whatever value is in the text when you create the blob. If you don't have defaults, you'll get an empty file, because all the fields are empty. The wordpress solution fixes this (and discusses using it within the past week), but the fix is ugly. Basically, you'd have to click on a button, and the button would then make a link appear, and that link would give you the good file.
You won't be able to do this with purely javascript. You need to generate the file server side and send it to the client.

Categories