如何将文本插入另一个页面的输入字段？

Question

I have a list of URLs and some info on a Google Sheet and managed to open the URLs with a Google Apps Script. On the page that opens, there are 2 input fields and a confirm button. I need the script to get info from the spreadsheet (which I saved as variables) and input them into these fields. After that, I need the script to click on the submit button.

I'm not entirely sure this would be the solution, but I figured I would need to get the input field element by id and then insert the variable in it. But I wasn't able to do it because getElementById() doesn't work with Google Apps Script.

I did quite some digging and only found solutions that used the HTML file on a Google Apps Script. However, I don't know if it would help solve this issue and I honestly didn't understand much of it. I guess it would only add unnecessary steps since I already managed to open the page on another tab.

I have the ID of the first input field. The second field is one "Tab hit" away from the first one and has a dynamic ID, so it won't work when I loop the script to do it with all the URLs. The only property that seems unique to it is the aria-label (I don't know if it helps). The submit button doesn't have an ID but it has a unique class and a type="submit" (I can see it on inspect but not when I open the source code on another page, don't know if there's a difference).

I already managed to open the URLs on another tab and save the info on variables, now I'm stuck on the step that inserts them on the input fields and clicks the submit button.

Here's my code so far:

function fulfill() {
  var rangeValues = searchRange.getValues();
  var orderId = rangeValues[604][1];
  var trackingNumber = rangeValues[604][3];
  var shippingCompany = rangeValues[604][4];
  var url = "https://someshopifystore.myshopify.com/admin/orders/" + orderId + "/fulfill_and_ship?fulfill_only=true&fulfillment_service_handle=manual&location_id=2085355564&requires_shipping=true";
  var html = "<script>window.open('" + url + "');google.script.host.close();</script>";
  var userInterface = HtmlService.createHtmlOutput(html);
  SpreadsheetApp.getUi().showModalDialog(userInterface, 'Open Tab');
}

OBS1: I need to solve it through Google Sheets and Google Apps Script because it's part of a wider solution.

OBS2: The page that opens is a fulfillment page from Shopify.

Answer 1

If you do want to solve to implement your functionality with Google Apps Script, here some basic key points:

• Have a look at the reference and guides for the usage of Apps Script HTML service.
• Bounding an HTML file to your script allows you to embed Javascript code within the <script> </script> part of a HTML file.
• This is where you can use functions that are not supported by Apps Script (eg getElementById() ).
• To call an Apps Script function from the JS part, you can use the google.script.run method .
• To set values to HTML input fields manually, you need to access those elements, eg by their ID or name. You need to inspect the source code of your URL to see how those input fields have been defined and can be identified. Subsequently you have to trigger a submit event.
• If you use the Shopify API instead, you can bypass the creation of HTML file with JS script. All you have to do is to chose the right API (eg RESTful API to create an order), copy the JSON request (adapting it to your needs) and post the request with UrlFetchApp.fetch() - with the order request as payload within the request options.