VIDEO
HIGHLIGHT
Log InSign up
Easily Submit PDFs and Word Files using this incredible plugin! #chatgpt #openai #plugin
SummaryTranscriptChat

Easily Submit PDFs and Word Files using this incredible plugin! #chatgpt #openai #plugin

How to Get Chat CPT File Uploader Extension to Read Microsoft Word and PDF Files

In this video, the presenter shows how to get the Chat CPT file uploader extension to read Microsoft Word and PDF files. The presenter explains that two separate libraries are needed for this process.

Required Libraries

  • The mammoth.js library is required to read office files.
  • The pdf.js library is required to read PDF files.

Testing the Libraries

  • Before adding the prompt, test the content.js code from the prompt in a browser console.
  • Select a Word document or a PDF file and check for errors.

Adding Prompt and Updating Code

  • Copy and paste the provided prompt into the content.js file.
  • Submit the prompt with a request for a manifest file that includes pdf.worker.min.js and pdf.min.js in the content script section.
  • Save both content.js and manifest.json files.

Understanding Manifest File

  • The Manifest file acts as a boss that gathers all scripts together.
  • When someone clicks on the button and uploads a PDF or document file, content.js found gets ran. If it doesn't know how to handle it, it goes back to Manifest which tells it which libraries can be used.
  • Ensure that icon.png is listed in the project files and referenced in the Manifest file.
  • The size of icon.png can be changed to 128 for better visibility on Chrome extensions page.

Conclusion

The presenter demonstrates how to get the Chat CPT file uploader extension to read Microsoft Word and PDF files by adding two required libraries, testing them, adding a prompt, updating code, understanding the Manifest file, and saving all necessary files.

Setting up PDF and Word file upload

In this section, the speaker sets up the ability to upload PDF and Word files to Chacha BT.

Setting up PDF file upload

  • The Chrome plugin is refreshed to enable PDF file uploads.
  • The speaker clicks on the button that appears after refreshing the page.
  • The PDF file is successfully uploaded.

Setting up Word file upload

  • The speaker types out a script for reading Word files using mammoth.browser.min.js library.
  • The code snippet is copied into content.jscript.
  • An error occurs when checking if everything is working fine in content.js, which is resolved by commenting out a line of code.
  • The manifest.json file is checked for proper permissions and updated with the correct path for the library.
  • The mammoth Library file is imported into the folder and added to the Chrome plugin webpage.
  • An error occurs when trying to open a Word document, which prompts copying all errors and submitting them into chat gbt for analysis.

Uploading both PDF and Word files

  • After receiving feedback from Chacha BT, an updated script for uploading both PDF and Word files is provided by Chad Teeth.
  • Content.js is replaced with the new script provided by Chad Teeth, which enables successful uploading of both PDF and Word documents to Chacha BT through the Chrome plugin webpage.
Video description

Learn how to create a powerful browser plugin that can read PDF and Word files using JavaScript! In this step-by-step tutorial, we'll show you how to integrate the pdf.js and mammoth.js libraries into your plugin, allowing users to easily extract and process text from PDF and Word documents. By the end of the video, you'll have a fully functional browser plugin that can read PDF and Word files with ease! Chrome Plugin : ChatGPT File Uploader https://tinyurl.com/5n7rjhar Firefox: https://tinyurl.com/3bmtrkex Library files: https://drive.google.com/drive/folders/1ZqSi79lw9gMe63cqT5ljreuAVfOrz28F?usp=sharing Prompt: This is the content.js code. I would like this script to read pdf files as well. I will be using the pdf.min.js library and the files will be in the root directory. be sure to use this code snippet: // Set the value of GlobalWorkerOptions.workerSrc property to the URL of the local pdf.worker.min.js file if (typeof window !== "undefined" && "pdfjsLib" in window) { window["pdfjsLib"].GlobalWorkerOptions.workerSrc = chrome.runtime.getURL("pdf.worker.min.js"); } please update the code: content.js: // Create the button const button = document.createElement("button"); button.innerText = "Submit File"; button.style.backgroundColor = "green"; button.style.color = "white"; button.style.padding = "3px"; button.style.border = "none"; button.style.borderRadius = "3px"; button.style.margin = "3px"; // Create the progress bar container const progressContainer = document.createElement("div"); progressContainer.style.width = "99%"; progressContainer.style.height = "5px"; progressContainer.style.backgroundColor = "grey"; progressContainer.style.margin = "3px"; progressContainer.style.borderRadius = "5px"; // Create the progress bar element const progressBar = document.createElement("div"); progressBar.style.width = "0%"; progressBar.style.height = "100%"; progressBar.style.backgroundColor = "#32a9db"; progressContainer.appendChild(progressBar); // Add a click event listener to the button button.addEventListener("click", async () =＞ { // Create the input element const input = document.createElement("input"); input.type = "file"; input.accept = ".txt,.js,.py,.html,.css,.json,.csv"; // Add a change event listener to the input element input.addEventListener("change", async () =＞ { // Reset progress bar once a new file is inserted progressBar.style.width = "0%"; progressBar.style.backgroundColor = "#32a9db"; // Read the file as text const file = input.files[0]; const text = await file.text(); // Get the chunk size from the input element and limit it to 15000 characters const MAX_CHUNK_SIZE = 15000; const chunkSize = Math.min(MAX_CHUNK_SIZE, text.length); // Split the text into chunks of the specified size const numChunks = Math.ceil(text.length / chunkSize); for (let i = 0; i ＜ numChunks; i++) { const start = i * chunkSize; const end = Math.min((i + 1) * chunkSize, text.length); const chunk = text.slice(start, end); // Submit the chunk to the conversation await submitConversation(chunk, i + 1, file.name); // Update the progress bar progressBar.style.width = `${((i + 1) / numChunks) * 100}%`; // Wait for ChatGPT to be ready let chatgptReady = false; while (!chatgptReady) { await new Promise((resolve) =＞ setTimeout(resolve, 1000)); chatgptReady = !document.querySelector( ".text-2xl ＞ span:not(.invisible)" ); } } // Finish updating the progress bar progressBar.style.backgroundColor = "#32a9db"; }); // Click the input element to trigger the file selection dialog input.click(); }); // Define the submitConversation function async function submitConversation(text, part, filename) { const textarea = document.querySelector("textarea[tabindex='0']"); const enterKeyEvent = new KeyboardEvent("keydown", { bubbles: true, cancelable: true, keyCode: 13, }); textarea.value = `Part ${part} of ${filename}: \n\n ${text}`; textarea.dispatchEvent(enterKeyEvent); } // Periodically check if the button has been added to the page and add it if it hasn't const targetSelector = ".flex.flex-col.w-full.py-2.flex-grow.md\\:py-3.md\\:pl-4"; const intervalId = setInterval(() =＞ { const targetElement = document.querySelector(targetSelector); if (targetElement && !targetElement.contains(button)) { // Insert the button before the target element targetElement.parentNode.insertBefore(button, targetElement); // Insert the progress bar container before the target element targetElement.parentNode.insertBefore(progressContainer, targetElement); } }, 3000); ChatGPT Made a game in under 7 minutes!: https://youtu.be/pmNnW-Tfq5A Create Your Own Meme Generator Web App Using ChatGPT and Flask in 4 minutes | Step-by-Step Guide: https://youtu.be/Xa_i5tHmoMI Uploading Files to ChatGPT: https://youtu.be/iR99LO28nzM