Create Your Own ChatGPT File Uploader Bookmarklet

Create a JavaScript bookmarklet that inserts a green 'Submit File' button before the element with class '.flex.flex-col.w-full.py-2.flex-grow.md\:py-3.md\:pl-4'. Style the button with white text color, 5px padding, no border, a 5px border radius, and 5px margin.

Insert a progress container element before the same target element with a width of 99%, height of 5px, and grey background color. Inside this container, add a progress bar div styled with width 0%, height 100%, and blue background color.

Attach a click event to the 'Submit File' button that creates an invisible file input element accepting '.txt', '.js', '.py', '.html', '.css', '.json', and '.csv' file types, then triggers the file selection dialog.

After a file is selected, asynchronously read the file as text and split it into chunks of 15,000 characters each.

Iterate over each chunk, and for each: set the ChatGPT textarea's value to 'Part part of filename:' followed by the chunk's text, then dispatch a 'keydown' event to simulate pressing Enter and submit the chunk.

After submitting each chunk, update the progress bar's width to reflect the completion percentage.

Before submitting the next chunk, asynchronously wait until ChatGPT is ready by checking the visibility of the element matching the selector '.text-2xl > span:not(.invisible)'.

Once all chunks have been submitted, change the progress bar's color to blue to indicate completion.