I have a page one my website that I'd like to emulate into a 'newtab' chrome extension.
I want to make something similar to this:
https://chrome.google.com/webstore/detail/animatedtabs-a-new-gif-on/kenhfdoiondldpcoajdbackbnmehgahl?hl=en
I have a lot of information on my server that i'd like to be able to serve as a chrome newtab extension - and this extension above loads a different GIF everytime a new tab is opened - how do they get data from their server? I don't seem to be able to find a way to do this.
I found the answer, for anyone wondering. The answer came in the form of this page:
https://developer.chrome.com/extensions/xhr
Which basically states that if you put a URL into the 'permissions' field in the manifest.json file, you can then access that URL in your application using the JS found on that page, eg:
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://api.example.com/data.json", true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
// innerText does not let the attacker inject HTML elements.
document.getElementById("resp").innerText = xhr.responseText;
}
}
xhr.send();
I've now got my chrome extension working perfectly!
Related
so I have this problem, Im trying to build a website in which people can give out links which I will then analyze using request-promise.js (so on the server side) . This analysis will try to find embed videos in the given link. If present I want to make that emebed video appear in an iframe on my current page.
So for now Ive managed to get the embed the video, and render it in an EJS template variable , but this means that I have to use res.render('page', variables) and from my understanding that means reloading the page.
What I want to know is if there is a way to do that without reloading the page ?
(my goal is to make the found video appear in a bootstrap modal div that appears after people gave the link and clicked on my upload button that trigers the scrapping of the given link)
Thanks for your help
Pardon me if my question is unclear
You can use an XMLHttpRequest to get the data from the server asynchronously and display/store them on the page without reloading the whole page.
var url = '/get-embed-video/'+link;
var xmlHttp = new XMLHttpRequest();
xmlHttp.onreadystatechange = function () {
if (xmlHttp.readyState === 4) {
// here get the response from the server
// and display your data
}
}
xmlHttp.open("GET", url, true); // false for synchronous request
xmlHttp.send(null);
I've recently been contributing to the Enhanced Steam extension and I've found that a link fetched with chrome.extension.getURL simply opens about:blank and not the link described.
I do not believe it's actually a problem with the extension, but rather a problem in chrome. The link it supplies is valid (chrome-extension://pimjhgjngccknempdnehdeaihcjbajod/options.html) and navigating directly works correctly.
I tried chrome.tabs.create, but found that I am not allowed to use it due to the script modifying pre-existing content.
Any help or work arounds would be appreciated.
I put all my required files into "web_accessible_resources", it solved my problem. See this in #4 https://bugs.chromium.org/p/chromium/issues/detail?id=310870#c4
It is Chrome's previous problem which is not secure. In build 31.0.1650.57, Chrome fixed this which is to force to put required files in "web_accessible_resources". In Chrome extension, lots of samples don't use "web_accessible_resources", those are the bugs, those samples will have this "chrome-extension:// links open about:blank" problem in build 31.0.1650.57.
Actually my chrome extension MarkView was facing this issue and I had to update its manifest.json to make it work for this Chrome update. By the way, MarkView is tool to read and write Awesome Markdown Files, it provides features including Content Outline, Sortable Tables and code block syntax highlight with line number.
Looks like a bug in Chrome to me. If you don't have too many pages like this to change then could you try using message passing to pass the page you want to open to the background page? Then use either window.open or chrome.tabs.create within the background page. Example code shown below:
//CONTENT SCRIPT
chrome.runtime.sendMessage({greeting: "OpenPage", filename:"somepage.html", querystring:"?aValue="+someVal}, function(response) {});
Then in your Background page
//BACKGROUND PAGE
chrome.runtime.onMessage.addListener(
function(request, sender, sendResponse) {
if (request.greeting == "OpenPage"){
open_page(request.filename, request.querystring)
}
});
function open_page(filename, querystring){
var pageUrl = chrome.extension.getURL(filename)+querystring;
chrome.tabs.create({'url': pageUrl }, function(tab) {
// Tab opened.
});
}
I started to program my own Chrome extension today and I'm stuck since hours with one problem.
Right now, I'm sending the current URL from the open website to my server where it's checked against some criterias and then a return value is sent back to the extension. This is working so far. I'm using only a popup.html, no background page.
The request is only sent when the user clicks on the icon in the browser.
How can I realize that the request is automatically sent, when the page is loaded?
If there is a specific return value from the server the user should be given an unannoying warning. Alert boxes and new windows are...well...annoying. Best way should be the little popup under the icon of the extension but that's not possible without a user's click. So I thought of a little -layer at the top of the page.
<html>
<head>
<script>
window.addEventListener("load", sendRequest, false);
function sendRequest() {
var q = "test";
xmlHttp=new XMLHttpRequest();
xmlHttp.open('GET', 'http://www.testurl.com/check.php?q='+q, true);
xmlHttp.onreadystatechange = function() {
if (xmlHttp.readyState == 4) {
document.getElementById("textf").innerText = xmlHttp.responseText;
chrome.tabs.executeScript(null,{code:"<div style='position: absolute; top: 0; left: 0; background-color=blue;layer-background-color: blue;'><p>test </p><p>test2 </p></div>"});
}
}
xmlHttp.send(null);
}
</script>
</head>
<body>
//Just for the popup...
<font color="blue"><p id="textf">Checking...</p></font>
</body>
</html>
If I do
chrome.tabs.executeScript(null,{code:"alert('testalert')"});
it gives me the alert. However, the isn't working and I can't figure out why :(
Do I need a background page for all this since I only want to check the URL when the page is loaded?
Why is the -thing not working but the alert is?
Thank you in advance!
chrome.tabs.executeScript is for JavaScript only. To add content to a Web page, you must write JavaScript that manipulates the DOM. A good place for you to start learning this may be Mozilla's DOM docs. (DOM is a W3C standard and Chrome has implemented it, so yes, Mozilla pages are relevant here.)
If I may say so, it sounds like the best way forward for you is to scrap this and start over with a content script defined in your manifest so that Chrome will execute it for you; check the Content Scripts documentation to learn more. Since you're trying to accomplish your goal with no background page, and would therefore need to use XMLHttpRequest directly from your content script, you should add "minimum_chrome_version": "13" to your manifest, as Chrome 12 and earlier won't let you do that.
By the way, practically no one will understand what you're talking about when you use "-layer" and "-thing" like that. Please be more careful in making sure you are using proper terminology. Ask your peers if you're unsure of the proper term for something.
I'm writing an Google Chrome extension that lets you download a backup file of your data. I want the user to be able to press a button and a "Save as" dialog box should open and they can save the file to their computer. Nothing appears to work and I have not found an answer on the internet. I have tried several approaches:
Using document.execCommand('SaveAs', null, 'filename.json'); This does not work because this command is IE-only and there does not appear to be a Webkit-alternative
Using data URIs. This was the most promising and worked in Opera and Firefox, but the problem being that neither Chrome nor Safari appear to support the Content-disposition=attachment;-header in the URI. This should work. (Chrome doesn't even allow me to ctrl/cmd+s a page from a data URI)
Using an XMLHTTPRequest. I haven't tried this, but there has to be some way in which you could relay the request around? Please note that I do not want to use an external server (in that case I could have simply sent a POST-request and applied a Content-disposition:-header)
Using an available Chrome Extension API. But there does not seem to be anything for this purpose.
The reason I don't want to use any external server is that I don't want to have to pay for the hosting, and the data sent might be sensitive to the user, and I don't want infringe on anyone's privacy.
Has anyone gotten this to work?
I did it as follows in Appmator code on Github.
The basic approach is to build your Blob, however you want (Chrome/WebKit/Firefox has a responseBlob on XmlHttpRequest so you can use that), create an iframe (hidden, display:none) then assign the src of the iframe to be the Blob.
This will initiate a download and save it to the filesystem. The only problem is, you can't set the filename yet.
var savaeas = document.getElementById("saveas");
var bb = new (window.BlobBuilder || window.WebKitBlobBuilder)();
var output = Builder.output({"binary":true});
var ui8a = new Uint8Array(output.length);
for(var i = 0; i< output.length; i++) {
ui8a[i] = output.charCodeAt(i);
}
bb.append(ui8a.buffer);
var blob = bb.getBlob("application/octet-stream");
var saveas = document.createElement("iframe");
saveas.style.display = "none";
if(!!window.createObjectURL == false) {
saveas.src = window.webkitURL.createObjectURL(blob);
}
else {
saveas.src = window.createObjectURL(blob);
}
document.body.appendChild(saveas);
Can you get the binary data from a file without the fileReader class? I'm trying to upload files and I have it working in firefox & chrome/webkit but safari 5 doesn't have filereader.
There has to be a way to get the binary data as gmail has drag and drop that works in safari 5.
I worked it out, thanks to the demo here: http://webreflection.blogspot.com/2009/03/safari-4-multiple-upload-with-progress.html
I just need to feed the dataTransfer File...
var file = e.dataTransfer.files[0];
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload_process.php", true);
xhr.send(file); //passing in file object seems to work
I have been facing the same problem but i am still not sure about the xhr.send(file). As while using the ASP.NET i got the error "Potentially dangerous data is detected ... ". I thought xhr.send(file) is not implemented by Safari considering FireReader itself is missing.
Its nice to know that xhr.send(file) works in the Safari. I will try investigate it further.
However there is a better alternative for this which works great FormData.
var file = e.dataTransfer.files[0];
var xhr = new XMLHttpRequest();
xhr.open("POST", "upload_process.php", true);
var fd= new FormData(); //its supported in the safari, chrome and firefox 4
fd.append(file.name, file);
xhr.send(fd); //passing in file object seems to work
There is one more issue i am facing right now, its HTML5 DataTransfer detection error in Chrome please let me know in case you have faced and found any solution for this.