We Keep Coding

Chrome Extension Redirect to Local Page with POST Request

I am building a browser extension where I try to redirect a browser request to my page with a fair amount of data that will be contained in a JSON array returned from a service I call based on the requested URL. For example, if the user goes to example.com, I have a chrome.webRequest.onBeforeRequest.addListener that intercepts it based on the urls filter, invokes a AWS API Gateway endpoint that responds with a list of things in a JSON object. I need my local page to display that list of things in a local page.
I can show some small things by invoking the local page with URL parameters (and then treat it like a GET request), but this won't work for the amount of data i want to pass. How do I create a POST request for the redirect URL?
OR, is there some other pattern I should be using to do this?
listener code:
chrome.webRequest.onBeforeRequest.addListener(
function(details) {
if(swenToggle) {
return { redirectUrl: chrome.extension.getURL("markup/simple.html?r=n&url=" + details.url) }; // This is fine for simple data
} else {
//get the base URL
var baseUrl = new URL(details.url).hostname.split(".").slice(-2).join(".")
var apiUrl = // Call AWS API here
fetch(apiUrl).then(r => r.json()).then(result => {
console.log('RESULT : ' + result.body); // I need to pass this body to the redirectUrl below...
})
return { redirectUrl: chrome.extension.getURL("markup/complex.html?sourceUrl=" + baseUrl) };
}
},
{ urls: "example.com"},
["blocking"]
);

Solved it with a slightly different approach. Instead of calling the AWS API from background.js, I pass the parameters needed for the API call to complex.html as URL params, and then invoke the AWS API in complex.html.

Accessing url parameters in sails action

I have a sails app, and I am agttempting to load a page with some data from a database, based on the id of the recipe model.
I have the route 'GET /recipes/single-recipe/:id': { action: 'recipes/view-single-recipe' } set up, and am accessing the url http://localhost:1337/recipes/single-recipe/5b8c169936f1df3439fa39c7
In my view-single-recipe action I'm attempting to load the recipe with the id of the URL parameter by accessing req.param('id') but req is showing undefined.
//view-single-recipe.js
module.exports = {
friendlyName: 'View single recipe',
description: 'Display "Single recipe" page.',
exits: {
success: {
viewTemplatePath: 'pages/recipes/single-recipe'
}
},
fn: async function(inputs, exits) {
const recipe = await Recipe.find({
id: req.param('id') //req undefiend
});
// Respond with view.
return exits.success({
recipe: recipe
});
}
};
Getting error: error: Sending 500 ("Server Error") response:
ReferenceError: req is not defined
How can I load the correct recipe using the url param?

If you have the route /recipes/single-recipe/:id', then the "id" from the URL path will be available as req.params.id. Otherwise, it defaults to {} For more info
UPDATE:
But when it comes to Actions and Controllers, Sails.js uses the machine-as-action module to automatically create route-handling functions out of machines like the example shows. See the machine-as-action docs for more information.
Note that machine-as-action provides actions with access to the request object as this.req instead of just req, otherwise, there'll be a server error of req is not defined. So, for future references don't forget the this keyword.

Angular using Http request doesn't work

I'm trying to populate data from my DB using Angular and some API services.
My code:
$http.get("/api/trips")
.then(function (response) {
angular.copy(response.data, vm.trips);
}, function (error) {
vm.errorMessage = "Failed to load data: " + error
});
And my API GET() :
[HttpGet("")]
public IActionResult Get()
{
var results = _repository.GetTripsByUsername(this.User.Identity.Name);
return Ok(Mapper.Map<IEnumerable<TripViewModel>>(results));
}
No data is showing. I'm pretty sure the errors is popping because the this.User.Identity.Name is passed wrongly, but I'm confused.
If I change the method from GetTripsByUsername to GetAllTrips , which select all the trips without filter, then the data is shown properly in the page.
The function it self works, if I use it via PostMan, it recognize my cookie and bringing me the correct trips(inside postMan) but on the page it doesn't work ..

It doesn't because your angular application is not authenticated and this.User.Identity.Name is null.
You need to send credential in your angular code like that:
$http.get("/api/trips", { withCredentials: true })
.then(function (response) {
angular.copy(response.data, vm.trips);
}, function (error) {
vm.errorMessage = "Failed to load data: " + error
});
But it depends on your authentication mecanism, This code will not work for Oauth or Basic authentication. If you use Oauth, you must send the Authorization header containing the authorization token.

Chrome app using Tumblr OAuth: error with chrome.identity.launchWebAuthFlow

I tried to perform Tumblr Authentication inside my Chrome App.
I followed Tumblr doc, so I registered my app using https://my app id.chromiumapp.org/ as URL Default callback.
Tumblr API supports OAuth 1.0a Protocol so I made a POST to https://www.tumblr.com/oauth/request_token to get an oauth_token.
I used a javascript library (OAuth) to perform the post, in order to add all the OAuth parameters needed (oauth_nonce, oauth_version, etc).
var oauth = OAuth({
consumer: {
public: key,
secret: secret
},
signature_method: 'HMAC-SHA1'
});
var request_data = {
url: 'https://www.tumblr.com/oauth/request_token',
method: 'POST',
data: {
oauth_callback: chrome.identity.getRedirectURL()
}
};
$.ajax({
url: request_data.url,
type: request_data.method,
data: oauth.authorize(request_data, {})
}).done(function(data) {
console.log(data); //data contains oauth_token and oauth_token_secret
});
This POST succeed and I get oauth_token and oauth_token_secret in the response.
After that, I try to use chrome identity API to let the user authorize my app.
chrome.identity.launchWebAuthFlow(
{
url: "https://www.tumblr.com/oauth/authorize" + "?oauth_token=" + oauth_token,
interactive: true
},
function (responseURL) {
if (chrome.runtime.lastError){
console.log(chrome.runtime.lastError.message);
}
if (responseURL) {
//everything ok
}
}
);
The call to chrome.identity.launchWebAuthFlow fails and the console shows "Authorization page could not be loaded." as chrome.runtime.lastError.message.
If I type https://www.tumblr.com/oauth/authorize?oauth_token=my oauth_token in the browser, I get the Tumblr authorize page.
Note that in my manifest.json file I have:
...
"permissions":[
"identity",
"https://www.tumblr.com/oauth/*", "https://api.tumblr.com/*"
]
but the authorization page is not loaded anyway.
I implemented the same steps for the Twitter API without errors.
I searched on StackOverflow, Tumblr documentation and Chrome API documentation, but I could not understand what I'm doing wrong.

AngularJS: Cancel overwriting values $resource object after calling save ();

var User = $resource(
'http://test/index.php'
);
var user = User.get({id:'1'});
// GET: http://test/index.php?id=1
// server returns: { "login":"foo", "name":"bar", "mail":"baz" }
user.name = "qux";
user.$save();
// POST: http://test/index.php?id=1
// server returns: { "login":"foo", "name":"bar", "mail":"qux"}
In this case, when you call the save() user object, properties will be replaced by those that came from the server.
But if the server responds like this:
{
"errors":{
"login":"too short",
"name":"is already using that name.",
"mail":"invalid email."
}
}
User object properties are overwritten and instead, property errors containing these mistakes will come up.
Is there a way to change the behavior of $resource? I would like to check the status of the response and, based on that, decide whether to update the properties of an object or report an error to the user.

Angular's $resource is meant to interact with RESTful web services.
In RESTful web services, if there's an error while saving a resource, you should return an appropriate HTTP status (for example, 400).
Then, you can optionally use the error callback:
user.$save(function (response) {
console.log("success!");
}, function (response) {
console.log("error");
});
For a full list of error HTTP statuses:
http://en.wikipedia.org/wiki/List_of_HTTP_status_codes#4xx_Client_Error