Is it possible to catch the request of a page before it is sent out? I would like to check and modify the data sent out. For example if I have a text box on a page and the form was submitted I would like to get to the data of the text box using the extension modify it and then send it on it's way.
If any one can point me in the right direction that would be grate
Chrome has chrome.experimental.webRequest API module which allows to catch web requests before they are sent, but from the docs it doesn't look like you can modify them, just observe.
I think you would be better off injecting a content script to pages and listening to onbeforesubmit event on forms.
Related
How do I send images on whatsapp web, through javascript, I already have the script that sends the message, but I would like to increase this image function
Correct me if I am wrong you want to trigger send button via dom.
Short answer is you will have to get the button first then hit click like this:-
document.querySelector('button[aria-label="Send"]').click()
screenshot:- https://prnt.sc/LdKzLkVkM5YY
I am trying to build a simple chrome extension so that when a form on a webpage in a specific website is populated and the user presses Submit then the data in the form is captured and then some of that data is injected into another form running on a different website.
I have no access to edit the code for either of the forms so a chrome extension seems to be the best way to do this from what I have read.
I would like to know if this is possible and how to go about it
It is possible using Content Scripts, a Background Page, and/or Chrome.storage
You will need Content Scripts on both websites that have the forms. Use the Manifest File correctly to set up which websites to attach which Content Scripts to.
The first Content Script (the one reading the form being filled and submitted) will have to take the values of each form input, triggered by the submit button.
Then you will need to use Message Passing to send a message (containing all the form data) from that Content Script to your Background Page. The data can be held temporarily or saved into chrome.storage by the Background Page.
Then the second form's Content Script also uses Message Passing to request the data from Background Page, which is delivered from temporary holding or retrieved from chrome.storage then sent.
And finally the second Content Script modifies its website's form to fill in the values.
I'm building a website for a client (real estate), and on the website are links to a different website (adverts for properties). My client routinely activates and deactivates these adverts when he rents out a certain property.
The hrefs on my links look something like this:
<a href="https://domain.xx/estate/idxx/des-crip-tion-xx-xx-x-xx/">. If the advert is indeed active, it just takes them to the advert. If it is not active, however, the website in question redirects the user to https://domain.xx/estate-for-rent/city/, effectively sending the users to my client's competition.
I wish to implement some logic where, before handing the users over to the other website, the server checks to see if it is redirected to https://domain.xx/estate-for-rent/city/, or some similar logic, and if so, uses preventDefault, or something, and notifies the user that the advert is not available instead of sending them to the other website.
I wonder if I can use the fact that only if the advert is active does the resulting url in the users browser window (after they've been directed to the other website) match the url in my href. Can i somehow get the server to try to access the url in my href, and have it see where it gets redirected, and then do something based on that? On the back-end, I'm running NodeJS with Express by the way, and if it matters, I'm relying heavily on EJS for templating. Thanks in advance for any help!
This sounds more like a problem you could solve on the client as opposed to the server. For example, at a high level here's how I would do it:
Handle the click event for each link (really simple to do a catch-all with jQuery)
Fire off a HEAD request via AJAX to the destination URL (this would be much more efficient than a GET but depends on the external service supporting this verb)
Use the status code to determine what to do next (e.g. 2xx allow redirect, 3xx pop a message and block)
I have a great working chrome extension now.
It basically loops over a list of HTML of a web auction site, if a user has not paid for to have the image shown in the main list. A default image is shown.
My plugin use a jQuery Ajax request to load the auction page and find the main image to display as a thumbnail for any missing images. WORKS GREAT.
The plugin finds the correct image url and update the HTML Dom to the new image and sets a new width.
The issue is, that the auction site tracks all pages views and saves it to a "recently viewed" section of the site "users can see any auctions they have clicked on"
ISSUE
- My plugin uses ajax and the cookies are sent via the jQuery ajax request. I am pretty sure I cannot modify the cookies in this request so the auction site tracks the request and for any listing that has a missing image this listing is now shown in my "recently viewed" even though I have not actually navigated to it.
Can I remove cookies for ajax request (I dont think I can)
Can chrome remove the cookie (only for the ajax requests)
Could I get chrome to make the request (eg curl, with no cookie?)
Just for the curious.
Here is a page with missing images on this auction site
http://www.trademe.co.nz/Browse/SearchResults.aspx?searchType=all&searchString=toaster&type=Search&generalSearch_keypresses=9&generalSearch_suggested=0
Thanks for any input, John.
You can use the webRequest API to intercept and modify requests (including blanking headers). It cannot be used to modify requests which are created within the context of a Chrome extension though. If you want to use this API for cookie-blanking purposes, you have to load the page in a non-extension context. Either by creating a new tab, or use an off-screen tab (using the experimental offscreenTabs API.
Another option is to use the chrome.cookie API, and bind a onChanged event. Then, you can intercept cookie modifications, and revert the changes using chrome.cookies.set.
The last option is to create a new window+tab in Incognito mode. This method is not reliable, and should not be used:
The user can disallow access to the Incognito mode
The user could have navigated to the page in incognito mode, causing cookie fields to be populated.
It's disruptive: A new window is created.
Presumably this AJAX interaction is being run from a content script? Could you run it from the background page instead and pass the data to the content script? I belive the background page operates in a different context and shouldn't send the normal cookies.
I am making an extension for chrome. It fetches data from webpages and emails it via local email client. I have a toolbar button which user has to click to invoke the script.
My script works for a few selected urls. I want my toolbar button to change icon based on whether the url is among our list or not. For example for site1 it should be redicon.png and for site2 it should be blueicon.png. I can change button icon using chrome.browserAction.setIcon. But the problem is that this API does not work in content script. It works fine in the background.js file but not in content.js. Kindly tell me how to achieve this.
I know using pageAction instead would do the trick but my client requirement is that the toolbar icon should change rather than appear and disappear.
What you need to read about is message passing. You are right, content scripts have limited chrome API. However, you can contact background page from content script and tell it to execute anything from chrome API for you. First, you need to create a listener on a background page that will be waiting for messages and then send a message from a content script.