1

I want to simulate a set text in a react form page similar to this page (the source of the page is not available to me).

I'm using the following code, which works for me in non-react forms, but it seem to not update the react model in the above case - manual click on the form after the set text clears the input for some reason.

Note that I'm running my code as a content script from an extension, so I can't change the implementation of the app. This is my sample JS code:

var e = document.body.querySelector("[placeholder='Your name']");
e.value = "my new value";
e.dispatchEvent(new Event('change', {bubbles: true, cancelable: false}));

Some clarifications:

I have no problem injecting code to the page, however I don't own the page, and my solution needs to be robust - fit as many pages as possible.
The code I wrote above runs in the original page's context, and not the extension's sandbox, so this is not a concern here.
What I'm looking for is a code snippet in the spirit of the above code that doesn't rely on a specific react form implementation, and uses native events to apply text to the input field.

Ilan
  • 11
  • 7
  • 1
    You use wrong approach. With React/Redux you **should not** trigger events, only listen for them. If you want to set input's text programmatically, just modify your Redux state respectively and it will autom'ly cause page/form re-rendering. – hindmost Jun 21 '17 at 14:40
  • @hindmost - unfortunately that's not possible in my case, as I'm running my code from an extension, and can't access the React state. – Ilan Jun 21 '17 at 14:56
  • _I'm running my code from an extension, and can't access the React state._ From whose extension? React, browser, something else? – hindmost Jun 21 '17 at 15:00
  • A react input element can be "hacked" 1) if the page script exposes its react-related variables globally, in which case you can insert a script element in the page to read/modify the variables, or 2) if it reads the state via XHR/fetch, in which case you can spoof it and substitute the value in the response. – wOxxOm Jun 21 '17 at 15:07
  • @hindmost - a browser extension – Ilan Jun 21 '17 at 15:31
  • In the case of chrome extension, its content scripts have no access to JS code executing in the current web page, obviously due to security reason. The only way to communicate with JS on web page is `window.postMessage`. Surely this only make sense if you're owner of a web page or JS code running there. – hindmost Jun 21 '17 at 16:04
  • Possible duplicate of [sending message to chrome extension from a web page](https://stackoverflow.com/questions/11431337/sending-message-to-chrome-extension-from-a-web-page) – hindmost Jun 21 '17 at 16:58
  • 1
    @hindmost - perhaps I wasn't clear enough in my original question - I have no problem injecting code to the page, however I don't own the page, and my solution needs to be robust (fit as many pages as possible). The code I wrote above runs in the original page's context, and not the extension's sandbox, so this is not a concern here. What I'm looking for is a code snippet in the spirit of the above code that actually works (e.g. - one that doesn't rely on a specific react form implementation, and uses native events to apply text to the input field) Thanks for your patience :) – Ilan Jun 21 '17 at 17:32
  • _The code I wrote above runs in the original page's context, and not the extension's sandbox.._ It doesn't matter where your code runs, in embedding page or extension itself. In any case your code is **isolated** from a web page. Read [the official docs](https://developer.chrome.com/extensions/content_scripts#execution-environment). – hindmost Jun 21 '17 at 19:31
  • 1
    I'm able to run events which affect the dom, the sample I wrote above functions perfectly on non react pages in my extension - kindly keep your answers on topic. Any code which will run from the dev tool of the above example is good enough for me. – Ilan Jun 21 '17 at 19:52
  • @hindmost, the OP tells you about code inserted in a `script` element. It's no longer a content script and doesn't run in isolated world, obviously. See [Insert code into the page context using a content script](//stackoverflow.com/a/9517879) – wOxxOm Jun 30 '17 at 19:13

1 Answers1

0

Seems like the issue is related to react 16 form handling techniques. They use property descriptors on the dom elements values (this library helped me get to the root of the issue).
Posting here just if anyone will come across this with a similar problem.

Ilan
  • 11
  • 7