I'm trying to write a simple Google chrome extension. But when I try to send some dynamic data from contentscript.js to background.html, I get no result.
There is no problem with sending static data.
here is the background.html:
<html>
<head>
<script>
chrome.extension.onRequest.addListener(function(request) {
alert(request.text);
});
</script>
</head>
</html>
and here is the conentscript.js with static data that works fine:
var req = {"text": "salam"};
chrome.extension.sendRequest(req);
and this is contentscript.js that doesn't work:
var txt = getSelectedText();
var req = {"text": txt};
chrome.extension.sendRequest(req);
any help is welcomed.
When you pass an object via request you don't pass a reference to it, as with regular functions. This object is actually getting serialized into a string before a request, passed as a string, and then assembled back from a string in a background page (that's why you can't pass anything in a request that cannot be serialized). All references are lost in the process.
You probably would need to rethink your extension architecture to accommodate this.
Related
I'm running GM_xmlhttpRequest (in a Greasemonkey script) and storing the responseText into a newly created HTML element:
var responseHTML = document.createElement('HTML');
...
onload: function() { responseHTML.innerHTML = response.responseText; }
And then I am trying to find an element in responseHTML:
console.log(responseHTML.getElementsByTagName('div'));
console.log(responseHTML.getElementById('result_0'));
The first works fine, but not the second. Any ideas?
Use DOMParser() to convert responseText into a searchable DOM tree.
Also, your attempts to search/use anything derived from responseText, must occur inside the onload function.
Use code like this:
GM_xmlhttpRequest ( {
...
onload: parseAJAX_ResponseHTML,
...
} );
function parseAJAX_ResponseHTML (respObject) {
var parser = new DOMParser ();
var responseDoc = parser.parseFromString (respObject.responseText, "text/html");
console.log (responseDoc.getElementsByTagName('div'));
console.log (responseDoc.getElementById('result_0'));
}
Of course, also verify that a node with id result_0 is actually in the returned HTML. (Using Firebug, Wireshark, etc.)
getElementById is not a method of HTML elements. It is a method of the document node. As such you can't do:
div.getElementById('foo'); // invalid code
You can implement your own function to search the DOM by recursively going through children. On newer browsers you can even use the querySelector method. For minimal development you can use libraries like jQuery or sizzle.js (the query engine behind jQuery).
There is no need to store the response in an element neither use DOMParser()
Just set the responseType to 'document' and the response will be parsed automatically and stored in the responseXML
Example:
var ajax = new XMLHttpRequest();
ajax.open('get','http://www.taringa.net');
ajax.responseType = 'document';
ajax.onload = function(){
console.log(ajax.responseXML); //And this is a document which may execute getElementById
};
ajax.send();
I am very new to JavascriptFFI and will very much appreciate help here.
I have a working javascript code to grab image as FILE URI from camera (via cordova camera plugin). Now, it can return either error or file uri on success. We want to map them to Left Int Text and Right GHCJS.DOM.Types.File (not sure if I got the type of FILE URI right).
Here is the javascript code (untested since I modified it off the tested one to return just fileuri or error, instead of displaying it in the browser).
<script type="text/javascript" charset="utf-8">
var destinationType; // sets the format of returned value
// Wait for device API libraries to load
document.addEventListener("deviceready",onDeviceReady,false);
// device APIs are available
function onDeviceReady() {
pictureSource=navigator.camera.PictureSourceType;
destinationType=navigator.camera.DestinationType;
}
// Called when a photo is successfully retrieved
//
function onPhotoURISuccess(imageURI) {
console.log("success");
return imageURI;
}
// A button will call this function for testing
function capturePhotoEdit() {
// Take picture using device camera, allow edit, and retrieve image as binary data
navigator.camera.getPicture(onPhotoURISuccess, onFail, { quality: 20, allowEdit: true,
destinationType: destinationType.FILE_URI });
}
// Called if something bad happens.
//
function onFail(message) {
console.log("failure");
return[1, message];
}
</script>
I will appreciate pointers on how to do the FFI to navigator.camera.getPicture with ghcjs-dom-0.2.3.1 (I am using it with Reflex) such that returned result is in Either.
I can then wrap the File URI in ByteString (I think through Cordova file api to convert it first to arraybuffer) and send it off to remove server for persistence.
I’m writing some proxy server code which intercepts a request (originated by a user clicking on a link in a browser window) and forwards the request to a third party fileserver. My code then gets the response and forwards it back to the browser. Based on the mime type of the file, I would like to handle the file server's response in one of two ways:
If the file is an image, I want to send the user to a new page that
displays the image, or
For all other file types, I simply want the browser to handle receiving it (typically a download).
My node stack includes Express+bodyParser, Request.js, EJS, and Passport. Here’s the basic proxy code along with some psuedo code that needs a lot of help. (Mia culpa!)
app.get('/file', ensureLoggedIn('/login'), function(req,res) {
var filePath = 'https://www.fileserver.com/file'+req.query.fileID,
companyID = etc…,
companyPW = etc…,
fileServerResponse = request.get(filePath).auth(companyID,companyPW,false);
if ( fileServerResponse.get('Content-type') == 'image/png') // I will also add other image types
// Line above yields TypeError: Object #<Request> has no method 'get'
// Is it because Express and Request.js aren't using compatible response object structures?
{
// render the image using an EJS template and insert image using base64-encoding
res.render( 'imageTemplate',
{ imageData: new Buffer(fileServerResponse.body).toString('base64') }
);
// During render, EJS will insert data in the imageTemplate HTML using something like:
// <img src='data:image/png;base64, <%= imageData %>' />
}
else // file is not an image, so let browser deal with receiving the data
{
fileServerResponse.pipe(res); // forward entire response transparently
// line above works perfectly and would be fine if I only wanted to provide downloads.
}
})
I have no control over the file server and the files won't necessarily have a file suffix so that's why I need to get their MIME type. If there's a better way to do this proxy task (say by temporarily storing the file server's response as a file and inspecting it) I'm all ears. Also, I have flexibility to add more modules or middleware if that helps. Thanks!
You need to pass a callback to the request function as per it's interface. It is asynchronous and does not return the fileServerResponse as a return value.
request.get({
uri: filePath,
'auth': {
'user': companyId,
'pass': companyPW,
'sendImmediately': false
}
}, function (error, fileServerResponse, body) {
//note that fileServerResponse uses the node core http.IncomingMessage API
//so the content type is in fileServerResponse.headers['content-type']
});
You can use mmmagic module. It is an async libmagic binding for node.js for detecting content types by data inspection.
Small problem with my chrome extension.
I just wanted to get a JSON array from another server. But manifest 2 doesn't allow me to do it. I tried specify content_security_policy, but the JSON array is stored on a server without SSL cert.
So, what should I do without using manifest 1?
The CSP cannot cause the problem you've described. It's very likely that you're using JSONP instead of plain JSON. JSONP does not work in Chrome, because JSONP works by inserting a <script> tag in the document, whose src attribute is set to the URL of the webservice. This is disallowed by the CSP.
Provided that you've set the correct permission in the manifest file (e.g. "permissions": ["http://domain/getjson*"], you will always be able to get and parse the JSON:
var xhr = new XMLHttpRequest();
xhr.onload = function() {
var json = xhr.responseText; // Response
json = json.replace(/^[^(]*\(([\S\s]+)\);?$/, '$1'); // Turn JSONP in JSON
json = JSON.parse(json); // Parse JSON
// ... enjoy your parsed json...
};
// Example:
data = 'Example: appended to the query string..';
xhr.open('GET', 'http://domain/getjson?data=' + encodeURIComponent(data));
xhr.send();
When using jQuery for ajax, make sure that JSONP is not requested by using jsonp: false:
$.ajax({url:'...',
jsonp: false ... });
Or, when using $.getJSON:
$.getJSON('URL which does NOT contain callback=?', ...);
I'd like to read (not modify) the response body for all requests that match some pattern in a Chrome extension. I'm currently using chrome.devtools.network.onRequestFinished, which gives you a Request object with a getContent() method. This works just fine, but of course requires the devtools to be open for the extension to work. Ideally the extension would be a popup, but chrome.webRequest.onCompleted doesn't seem to give access to the response body. There is a feature request to allow the webRequest API to edit response bodies - but can webRequest even read them? If not, is there any other way to read response bodies outside of devtools extensions?
The feature request you linked to implies that there is no support for reading either:
Unfortunately, this request is not trivial. (...) Regarding reading the Response Body: This is challenging from a performance perspective. (...) So overall, this is just not easy to achieve...
So, no, there doesn't seem to be a way for an extension to access network response bodies, except for devtools.
Here is what I did
I used the chrome.webRequest & requestBody to get the post requests body
I used a decoder the parse the body into a string
Here is an example
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
if(details.method == "POST")
// Use this to decode the body of your post
var postedString = decodeURIComponent(String.fromCharCode.apply(null,
new Uint8Array(details.requestBody.raw[0].bytes)));
console.log(postedString)
},
{urls: ["<all_urls>"]},
["blocking", "requestBody"]
);
If you have the this pattern of requests you can run something like that in your background.html file:
var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/" + yourStringForPattern, true);
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
var body = xhr.responseText;
// call some function to do something with the html body
}
}
xhr.send();