I am developing a chrome extension and Im having som problem with the chrome.runtime.sendMessage function
Here is how my code is set up:
chrome.runtime.sendMessage( { method : "getLocalStorage", key: "email" }, function ( response ) {
console.log( "the response has been received" );
});
console.log( "I am here" );
$.ajax({});
This prints out:
I am here
the response has been received
So my problem is that chrome.runtime.sendMessage runs async with the rest of the code. So what I could do is ofcourse to put the ajax in the response function of the sendMessage. The only problem with that is that I have 3 events of sendMessage to return different variables I need before I do the ajax-call, so that is unfortunately not a viable option.
Is there any way to halt the ajax call until all the sendMessage-calls have been made?
You should consider switching from the old "store data in localStorage, query background with sendMessage" paradigm to the new "store data in chrome.storage, access anywhere" paradigm; chrome.storage API was made specifically for this purpose.
The downside is that all access becomes asynchronous. But at least you can optimize a bit, for instance you can glue your calls together:
chrome.storage.local.get([key1, key2, key3], function(data) {
// Use data.key1, data.key2, etc.
$.ajax({});
});
You can even provide default values in case there are none yet:
chrome.storage.local.get({key1: default1, key2: default2, key3: default3}, function(data) {
// Use data.key1, data.key2, etc.
$.ajax({});
});
And last but not least, you've got chrome.storage.sync that will automatically propagate to other signed-in profiles.
One option would be to use Async.js. Then you could do something like this:
async.parallel([
function(done) {
chrome.runtime.sendMessage( { your first message }, function ( response ) {
done();
});
},
function(done) {
chrome.runtime.sendMessage( { your second message }, function ( response ) {
done();
});
},
function(done) {
chrome.runtime.sendMessage( { your third message }, function ( response ) {
done();
});
}
], function() {
console.log( "I am here" );
$.ajax({});
})
Related
I connect content.js with background.js to do 2 different tasks: inject local HTML and fetch data from another webpage.
Currently, the createContainer() starts after fetchweb() is done and I am not sure why (I need createContainer() to run first). I tried to transform both functions into Promise but still the same result
Content.js
function createContainer1() {
// call html file container
chrome.runtime.sendMessage({ cmd: "read_cont1" }, function (html) {
$("#container1").html(html);
});
// more code
}
function fetchWeb() {
chrome.runtime.sendMessage(
{ cmd: "send_url", url: window.location.href},
function (response) {
console.log(JSON.stringify(response));
}
);
}
createContainer1()
fetchWeb()
background.js
chrome.runtime.onMessage.addListener(function (request, sender, sendResponse) {
if (request.cmd == "read_cont1") {
$.ajax({
url: chrome.extension.getURL("container1.html"),
dataType: "html",
success: sendResponse,
});
return true;
} else if (request.cmd == "send_url") {
sendResponse({ review_url: fetchData(request.url) });
return true;
}
});
Your two sendMessages are both asynchronous functions and--unless specifically dealing with asynchronous coding through callbacks, promises, or async/await--I don't think there's any other way to guarantee which resolves first.
If fetchWeb should run every time after createContainer sends its message, you could add fetchWeb to sendMessage's callback (and then remove it from your main body):
...chrome.runtime.sendMessage({ cmd: "read_cont1" }, function (html) {
$("#container1").html(html);
fetchWeb();
});...
If fetchWeb should only sometimes run, you could pass data into the createContainer function answering that question:
function createContainer1(executeFetchWeb) {
// call html file container
chrome.runtime.sendMessage({ cmd: "read_cont1" }, function (html) {
$("#container1").html(html);
if (executeFetchWeb) {fetchWeb()}
});
// more code
}
If there's something else happening in "//more code" that needs to happen before fetchWeb runs, it would be helpful to see that. But unless that code is asynchronous as well, I imagine that code is already executing first. This could all be done with promises as well, but sendMessage is already setup to work well with callbacks. From the documentation:
chrome.runtime.sendMessage(
extensionId?: string,
message: any,
options?: object,
responseCallback?: function,
)
I am working on a project angularjs version 1.7.8 with php server side. I integrated a javascript script in my template that I use in my controller. In this script I have a callback function after which I make a redirection to another application. My problem is that often the callback function runs and often no but no error is reported when it does not work. here is my code:
//built-in script function in angularjs
function redirect(montant,callb){
//I encripte information
var dataEncrypt="51565445656040445666640666906565665606";
var id="test";
//function callback
callb(id);
//redirect site
window.location = 'http://monSite.com/template/index.php?test='+dataEncrypt;
}
//controller angularjs
redirect(montant,function (id){
$http.post('php/execution.php', {
data1: montant, data2: id, data3: $scope.data3, dat4: $scope.data4, data5: $scope.data5
})
.then(function success(e) {
}, function error(e) {
});
});
My PHP code:
$data = json_decode(file_get_contents('php://input'), TRUE);
$data1=$data['data1'];
$data2=$data['data2'];
$data3=$data['data3'];
$data4=$data['data4'];
$data5=$data['data5'];
$insererTransaction = $infos_connexion->prepare("insert into transaction (id,data1,data2,data3,data4,data5)
values(:id,:data1,:data2,:data3,:data4,:data5)");
$resultat_inserTransaction=$insererTransaction->execute(array(":id" => NULL, ":data1" => $data1, ":data2" => $data2, ":data3" => $data3, ":data4" => $data4, ":data5" => $data5));
I expected that every time the process is followed, an insertion is done in my database,but it doesn't always happen. Sometimes it does, sometimes it does not, just randomly.
Your statement "In this script I have a callback function after which I make a redirection to another application." is actually not true. You are making the redirect at the exact same time you are calling the callback function. You will probably have unpredictable behavior.
What you probably want to do is to redirect after your ajax call :
redirect(montant,function (id){
$http.post('php/execution.php', {
data1: montant, data2: id, data3: $scope.data3, dat4: $scope.data4, data5: $scope.data5
})
.then(function success(e) {
var dataEncrypt="51565445656040445666640666906565665606";
//redirect site
window.location = 'http://monSite.com/template/index.php?test='+dataEncrypt;
}, function error(e) {
});
});
In framework7 (latest version) there are some sample pages for e.g. page-loader-component.html. This page having -
<p>Hello {{name}}</p>
and at bottom, there is script
return {
data: function(){
return{
name: "Peter"
}
}
}
Now when the page is accessed, it displays - Hello Peter
Question is I want to fetch name from real database from my server. So I made this changes -
app.request.post(
'http://domain-name/page.php',
{userid: 2},
function(response){
var response = JSON.parse(response);
console.log(response); //console log shows {name: "Peter"}
return response
}
);
return {
data: function(){
return response //console log shows response is not defined
}
}
Now when try to access the page, it throws errors (in console) - ReferenceError: response is not defined. In console my request query is OK, it show - {name: "Peter"}
I did return response as well as tried replacing the position of function as well as tried many other possible fix suggested on stackoverflow.
I think one function is running before other one make finish database queries. I am not expert (just average). So please someone suggest.
I have also tried to access the page through routes.js as example given in request-and-load.html but still reference error.
return response is inside the data: section. The request is not, and they cannot reach each other.
Put the gathering of data inside the data function. You also want to save the response outside of the request function. To make sure the response variable is reachable. I'd also personally move the request itself to be defined in a separate location for usage outside of this one instances.
File: custom.js
requests = {
GetName: function () {
app.request.post(
'http://domain-name/page.php',
{ userid: 2 },
function (response) {
var response = JSON.parse(response);
console.log(response); //console log shows {name: "Peter"}
return response
}
);
},
GetNameDynamic: function (id) {
app.request.post(
'http://domain-name/page.php',
{ userid: id},
function (response) {
var response = JSON.parse(response);
console.log(response);
return response
}
);
}
}
Then inside the data: section call that function and save as a variable. Pass that in the data return.
data: function () {
// Must return an object
var result = requests.GetName();
return {
name: result.name,
}
},
There are other ways/locations to accomplish this. One being the async in the route as the other user mentioned.
In the routes array, just change the path and componentUrl to the correct ones.
{
path: '/post-entity-group/:type/:group/:public/',
async: function (routeTo, routeFrom, resolve, reject) {
var result = requests.GetName();
resolve(
{
componentUrl: './pages/post-entity.html',
},
{
context: {
name: result.name,
}
}
)
}
},
I think you have to pass by async routeto load page context (c.f. F7 doc)
You will be able to load datas via resolve callback
Maybe an example can help : async data for page
It seems to be difficult problem (or impossible??).
I want to get and read HTTP Response, caused by HTTP Request in browser, under watching Chrome Extension background script.
We can get HTTP Request Body in this way
chrome.webRequest.onBeforeRequest.addListener(function(data){
// data contains request_body
},{'urls':[]},['requestBody']);
I also checked these stackoverflows
Chrome extensions - Other ways to read response bodies than chrome.devtools.network?
Chrome extension to read HTTP response
Is there any clever way to get HTTP Response Body in Chrome Extension?
I can't find better way then this anwser.
Chrome extension to read HTTP response
The answer told how to get response headers and display in another page.But there is no body info in the response obj(see event-responseReceived). If you want to get response body without another page, try this.
var currentTab;
var version = "1.0";
chrome.tabs.query( //get current Tab
{
currentWindow: true,
active: true
},
function(tabArray) {
currentTab = tabArray[0];
chrome.debugger.attach({ //debug at current tab
tabId: currentTab.id
}, version, onAttach.bind(null, currentTab.id));
}
)
function onAttach(tabId) {
chrome.debugger.sendCommand({ //first enable the Network
tabId: tabId
}, "Network.enable");
chrome.debugger.onEvent.addListener(allEventHandler);
}
function allEventHandler(debuggeeId, message, params) {
if (currentTab.id != debuggeeId.tabId) {
return;
}
if (message == "Network.responseReceived") { //response return
chrome.debugger.sendCommand({
tabId: debuggeeId.tabId
}, "Network.getResponseBody", {
"requestId": params.requestId
}, function(response) {
// you get the response body here!
// you can close the debugger tips by:
chrome.debugger.detach(debuggeeId);
});
}
}
I think it's useful enough for me and you can use chrome.debugger.detach(debuggeeId)to close the ugly tip.
sorry, mabye not helpful... ^ ^
There is now a way in a Chrome Developer Tools extension, and sample code can be seen here: blog post.
In short, here is an adaptation of his sample code:
chrome.devtools.network.onRequestFinished.addListener(request => {
request.getContent((body) => {
if (request.request && request.request.url) {
if (request.request.url.includes('facebook.com')) {
//continue with custom code
var bodyObj = JSON.parse(body);//etc.
}
}
});
});
This is definitely something that is not provided out of the box by the Chrome Extension ecosystem. But, I could find a couple of ways to get around this but both come with their own set of drawbacks.
The first way is:
Use a content script to inject our own custom script.
Use the custom script to extend XHR's native methods to read the response.
Add the response to the web page's DOM inside a hidden (not display: none) element.
Use the content script to read the hidden response.
The second way is to create a DevTools extension which is the only extension that provides an API to read each request.
I have penned down both the methods in a detailed manner in a blog post here.
Let me know if you face any issues! :)
To get a XHR response body you can follow the instructions in this answer.
To get a FETCH response body you can check Solution 3 in this article and also this answer. Both get the response body without using chrome.debugger.
In a nutshell, you need to inject the following function into the page from the content script using the same method used for the XHR requests.
const constantMock = window.fetch;
window.fetch = function() {
return new Promise((resolve, reject) => {
constantMock.apply(this, arguments)
.then((response) => {
if (response) {
response.clone().json() //the response body is a readablestream, which can only be read once. That's why we make a clone here and work with the clone
.then( (json) => {
console.log(json);
//Do whatever you want with the json
resolve(response);
})
.catch((error) => {
console.log(error);
reject(response);
})
}
else {
console.log(arguments);
console.log('Undefined Response!');
reject(response);
}
})
.catch((error) => {
console.log(error);
reject(response);
})
})
}
If response.clone().json() does not work, you can try response.clone().text()
I show my completed code if it can be some help. I added the underscore to get the request url, thanks
//background.js
import _, { map } from 'underscore';
var currentTab;
var version = "1.0";
chrome.tabs.onActivated.addListener(activeTab => {
currentTab&&chrome.debugger.detach({tabId:currentTab.tabId});
currentTab = activeTab;
chrome.debugger.attach({ //debug at current tab
tabId: currentTab.tabId
}, version, onAttach.bind(null, currentTab.tabId));
});
function onAttach(tabId) {
chrome.debugger.sendCommand({ //first enable the Network
tabId: tabId
}, "Network.enable");
chrome.debugger.onEvent.addListener(allEventHandler);
}
function allEventHandler(debuggeeId, message, params) {
if (currentTab.tabId !== debuggeeId.tabId) {
return;
}
if (message === "Network.responseReceived") { //response return
chrome.debugger.sendCommand({
tabId: debuggeeId.tabId
}, "Network.getResponseBody", {
"requestId": params.requestId
//use underscore to add callback a more argument, passing params down to callback
}, _.partial(function(response,params) {
// you get the response body here!
console.log(response.body,params.response.url);
// you can close the debugger tips by:
// chrome.debugger.detach(debuggeeId);
},_,params));
}
}
I also find there is a bug in chrome.debugger.sendCommand. If I have two requests with same URI but different arguments. such as:
requests 1:https://www.example.com/orders-api/search?limit=15&offer=0
requests 2:https://www.example.com/orders-api/search?limit=85&offer=15
The second one will not get the corrected responseBody, it will show:
Chrome Extension: "Unchecked runtime.lastError: {"code":-32000,"message":"No resource with given identifier found"}
But I debugger directly in background devtools, it get the second one right body.
chrome.debugger.sendCommand({tabId:2},"Network.getResponseBody",{requestId:"6932.574"},function(response){console.log(response.body)})
So there is no problem with tabId and requestId.
Then I wrap the chrome.debugger.sendCommand with setTimeout, it will get the first and second responseBody correctly.
if (message === "Network.responseReceived") { //response return
console.log(params.response.url,debuggeeId.tabId,params.requestId)
setTimeout(()=>{
chrome.debugger.sendCommand({
tabId: debuggeeId.tabId
}, "Network.getResponseBody", {
"requestId": params.requestId
//use underscore to add callback a more argument, passing params down to callback
}, _.partial(function(response,params,debuggeeId) {
// you get the response body here!
console.log(response.body,params.response.url);
// you can close the debugger tips by:
// chrome.debugger.detach(debuggeeId);
},_,params,debuggeeId));
},800)
}
I think the setTimeout is not the perfect solution, can some one give help?
thanks.
I've had no problems sorting out mocking the success condition, but cannot seem to fathom how to mock the failure/timeout conditions when using Sinon and Qunit to test and ajax function:
My set up is this:
$(document).ready( function() {
module( "myTests", {
setup: function() {
xhr = sinon.sandbox.useFakeXMLHttpRequest();
xhr.requests = [];
xhr.onCreate = function (request) {
xhr.requests.push(request);
};
myObj = new MyObj("#elemSelector");
},
teardown: function() {
myObj.destroy();
xhr.restore();
}
});
});
and my success case test, running happily and receiving/passing through the received data to the success method is this:
test("The data fetch method reacts correctly to receiving data",
function () {
sinon.spy(MyObject.prototype, "ajaxSuccess");
MyObject.prototype.fetchData();
//check a call got heard
equal(1, xhr.requests.length);
//return a success method for that obj
xhr.requests[0].respond(200, {
"Content-Type": "application/json"
},
'[{ "responseData": "some test data" }]'
);
//check the correct success method was called
ok(MyObj.prototype.ajaxSuccess.calledOnce);
MyObj.prototype.ajaxSuccess.restore();
}
);
However, I cannot work out what I should be putting instead of this:
xhr.requests[0].respond(200, { "Content-Type": "application/json" },
'[{ "responseData": "some test data" }]');
to make my ajax call handler hear a failure or timeout method? The only thing I could think to try was this:
xhr.requests[0].respond(408);
But it doesn't work.
What am I doing wrong or what have I misunderstood? All help much appreciated :)
For the timeout, sinon’s fake timers could help. Using them you wouldn’t need to set the timeout to 1ms. As for the failures, your approach looks correct to me. Can you give us more code, especially the failure handler?
Doing something like this
requests[0].respond(
404,
{
'Content-Type': 'text/plain',
'Content-Length': 14
},
'File not found'
);
works to trigger the 'error' callback in jQuery AJAX requests.
As for the timouts, you can use sinons fake clock like this:
test('timeout-test', function() {
var clock = sinon.useFakeTimers();
var errorCallback = sinon.spy();
jQuery.ajax({
url: '/foobar.php',
data: 'some data',
error: errorCallback,
timeout: 20000 // 20 seconds
});
// Advance 19 seconds in time
clock.tick(19000);
strictEqual(errorCallback.callCount, 0, 'error callback was not called before timeout');
// Advance another 2 seconds in time
clock.tick(2000);
strictEqual(errorCallback.callCount, 1, 'error callback was called once after timeout');
});
The main idea that I would use is to wrap everything related to the request inside "another function" that returns a promise.
Then in the test, when I mock the "another function" I just return a Promise.reject({}).
If some endpoint is going to give me a timeout, that is equivalent to a failed promise.
Set a timeout on your $.ajax() call and use Sinon fake timers to move the clock ahead before responding.