Say It Better!

├── sib.gif ├── sib.png ├── icon128.png ├── icon16.png ├── icon48.png ├── old ├── icon128.png ├── icon16.png └── icon48.png ├── offscreen.html ├── manifest.json ├── README.md ├── options.js ├── content.js ├── index.html ├── offscreen.js └── background.js /sib.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesakar/sayitbetter/HEAD/sib.gif -------------------------------------------------------------------------------- /sib.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesakar/sayitbetter/HEAD/sib.png -------------------------------------------------------------------------------- /icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesakar/sayitbetter/HEAD/icon128.png -------------------------------------------------------------------------------- /icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesakar/sayitbetter/HEAD/icon16.png -------------------------------------------------------------------------------- /icon48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesakar/sayitbetter/HEAD/icon48.png -------------------------------------------------------------------------------- /old/icon128.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesakar/sayitbetter/HEAD/old/icon128.png -------------------------------------------------------------------------------- /old/icon16.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesakar/sayitbetter/HEAD/old/icon16.png -------------------------------------------------------------------------------- /old/icon48.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/enesakar/sayitbetter/HEAD/old/icon48.png -------------------------------------------------------------------------------- /offscreen.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | -------------------------------------------------------------------------------- /manifest.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Say It Better", 3 | "version": "1.0", 4 | "manifest_version": 3, 5 | "background": { 6 | "service_worker": "background.js" 7 | }, 8 | "description": "A Chrome extension that prompts ChatGPT to enhance the selected text and enhance your writing skills.", 9 | "action": { 10 | "default_popup": "index.html", 11 | "default_icon": { 12 | "16": "icon16.png", 13 | "48": "icon48.png", 14 | "128": "icon128.png" 15 | } 16 | }, 17 | "icons": { 18 | "16": "icon16.png", 19 | "48": "icon48.png", 20 | "128": "icon128.png" 21 | }, 22 | "permissions": ["offscreen", "clipboardWrite", "contextMenus", "activeTab", "storage", "scripting"] 23 | } 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | 2 | ## Say It Better 3 | 4 | A [Chrome extension](https://chrome.google.com/webstore/detail/say-it-better/jjmeigcgllplllpdnmbbigmepfmofcif) that prompts ChatGPT to enhance the selected text and enhance your writing skills. 5 | 6 | Stack: 7 | - API: OpenAI `gpt-3.5-turbo` 8 | - Backend: [Vercel Edge](https://vercel.com/features/edge-functions) 9 | - Rate limiting and caching: [Upstash Redis](https://upstash.com/) 10 | 11 | ### Usage 12 | - Install [the extension](https://chrome.google.com/webstore/detail/say-it-better/jjmeigcgllplllpdnmbbigmepfmofcif). 13 | 14 | - Select any text in your browser, right click and select `Say It Better`. 15 | 16 | - The improved version of your text will be copied to your clipboard. 17 | 18 | ![alt text](sib.gif "Say It Better") 19 | 20 | -------------------------------------------------------------------------------- /options.js: -------------------------------------------------------------------------------- 1 | document.addEventListener('DOMContentLoaded', () => { 2 | const configForm = document.getElementById('configForm'); 3 | const saveButton = document.getElementById('saveButton'); 4 | 5 | // Load saved configuration from chrome storage 6 | chrome.storage.local.get('config', (data) => { 7 | if (data.config) { 8 | const selectedRadio = configForm.querySelector(`input[value="${data.config}"]`); 9 | if (selectedRadio) { 10 | selectedRadio.checked = true; 11 | } 12 | } 13 | else { 14 | const selectedRadio = configForm.querySelector(`input[value="plain"]`); 15 | if (selectedRadio) { 16 | selectedRadio.checked = true; 17 | } 18 | } 19 | }); 20 | 21 | // Save configuration to chrome storage 22 | saveButton.addEventListener('click', () => { 23 | const selectedConfig = configForm.config.value; 24 | chrome.storage.local.set({ config: selectedConfig }, () => { 25 | document.getElementById("sib_saved").innerText = "Tone saved!"; 26 | setTimeout(() => { 27 | window.close(); 28 | }, "600"); 29 | }); 30 | }); 31 | }); 32 | 33 | -------------------------------------------------------------------------------- /content.js: -------------------------------------------------------------------------------- 1 | let popup; 2 | 3 | function createDiv(text) { 4 | if (text) { 5 | popup = document.createElement('div'); 6 | popup.style.width = 'auto'; 7 | popup.style.height = 'auto'; 8 | popup.style.background = 'rgba(0, 0, 0, 0.7)'; 9 | popup.style.color = 'white'; 10 | popup.style.padding = '25px'; 11 | popup.style.borderRadius = '5px'; 12 | popup.style.position = 'fixed'; 13 | popup.style.top = '50%'; 14 | popup.style.left = '50%'; 15 | popup.style.transform = 'translate(-50%, -50%)'; 16 | popup.style.zIndex = '9999'; 17 | 18 | const closeButton = document.createElement("button"); 19 | closeButton.innerText = "X"; 20 | closeButton.style.position = "absolute"; 21 | closeButton.style.top = "0"; 22 | closeButton.style.color = 'white'; 23 | closeButton.style.right = "0"; 24 | closeButton.style.border = "none"; 25 | closeButton.style.background = "none"; 26 | closeButton.style.padding = "10"; 27 | closeButton.style.margin = "10"; 28 | closeButton.style.fontSize = "18px"; 29 | closeButton.style.cursor = "pointer"; 30 | closeButton.onclick = removePopup; 31 | 32 | const content = document.createElement("div"); 33 | content.id = "sayitbetter_popup"; 34 | content.style.whiteSpace = "pre"; 35 | content.innerText = text; 36 | 37 | // popup.appendChild(closeButton); 38 | popup.appendChild(content); 39 | document.body.appendChild(popup); 40 | 41 | // Remove the div when clicked 42 | popup.addEventListener('click', () => { 43 | removePopup(); 44 | }); 45 | } 46 | } 47 | 48 | function removePopup() { 49 | if (popup) { 50 | popup.remove(); 51 | popup = null; 52 | } 53 | } 54 | 55 | function updateDiv(text) { 56 | if (text) { 57 | const newDiv = document.getElementById('sayitbetter_popup'); 58 | newDiv.textContent = text; 59 | 60 | setTimeout(() => { 61 | removePopup(); 62 | }, "1000"); 63 | } 64 | } 65 | 66 | chrome.runtime.onMessage.addListener((message, sender, sendResponse) => { 67 | if (message.action === 'createDiv') { 68 | createDiv(message.text); 69 | } 70 | if (message.action === 'updateDiv') { 71 | updateDiv(message.text); 72 | } 73 | }); 74 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | Say It Better! 8 | 66 | 67 | 68 |

69 | 95 | 96 | 97 | 98 | -------------------------------------------------------------------------------- /offscreen.js: -------------------------------------------------------------------------------- 1 | // Copyright 2023 Google LLC 2 | // 3 | // Licensed under the Apache License, Version 2.0 (the "License"); 4 | // you may not use this file except in compliance with the License. 5 | // You may obtain a copy of the License at 6 | // 7 | // https://www.apache.org/licenses/LICENSE-2.0 8 | // 9 | // Unless required by applicable law or agreed to in writing, software 10 | // distributed under the License is distributed on an "AS IS" BASIS, 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. 12 | // See the License for the specific language governing permissions and 13 | // limitations under the License. 14 | 15 | // Once the message has been posted from the service worker, checks are made to 16 | // confirm the message type and target before proceeding. This is so that the 17 | // module can easily be adapted into existing workflows where secondary uses for 18 | // the document (or alternate offscreen documents) might be implemented. 19 | 20 | // Registering this listener when the script is first executed ensures that the 21 | // offscreen document will be able to receive messages when the promise returned 22 | // by `offscreen.createDocument()` resolves. 23 | chrome.runtime.onMessage.addListener(handleMessages); 24 | 25 | // This function performs basic filtering and error checking on messages before 26 | // dispatching the 27 | // message to a more specific message handler. 28 | async function handleMessages(message) { 29 | // Return early if this message isn't meant for the offscreen document. 30 | if (message.target !== 'offscreen-doc') { 31 | return; 32 | } 33 | 34 | // Dispatch the message to an appropriate handler. 35 | switch (message.type) { 36 | case 'copy-data-to-clipboard': 37 | handleClipboardWrite(message.data); 38 | break; 39 | default: 40 | console.warn(`Unexpected message type received: '${message.type}'.`); 41 | } 42 | } 43 | 44 | // We use a

element for two main reasons:
45 | //  1. preserve the formatting of multiline text,
46 | //  2. select the node's content using this element's `.select()` method.
47 | const textEl = document.querySelector('#text');
48 | 
49 | // Use the offscreen document's `document` interface to write a new value to the
50 | // system clipboard.
51 | //
52 | // At the time this demo was created (Jan 2023) the `navigator.clipboard` API
53 | // requires that the window is focused, but offscreen documents cannot be
54 | // focused. As such, we have to fall back to `document.execCommand()`.
55 | async function handleClipboardWrite(data) {
56 |   try {
57 |     // Error if we received the wrong kind of data.
58 |     if (typeof data !== 'string') {
59 |       throw new TypeError(
60 |         `Value provided must be a 'string', got '${typeof data}'.`
61 |       );
62 |     }
63 | 
64 |     // `document.execCommand('copy')` works against the user's selection in a web
65 |     // page. As such, we must insert the string we want to copy to the web page
66 |     // and to select that content in the page before calling `execCommand()`.
67 |     textEl.value = data;
68 |     textEl.select();
69 |     document.execCommand('copy');
70 |   } finally {
71 |     // Job's done! Close the offscreen document.
72 |     window.close();
73 |   }
74 | }
75 |

--------------------------------------------------------------------------------
/background.js:
--------------------------------------------------------------------------------
  1 | // Copyright 2023 Google LLC
  2 | //
  3 | // Licensed under the Apache License, Version 2.0 (the "License");
  4 | // you may not use this file except in compliance with the License.
  5 | // You may obtain a copy of the License at
  6 | //
  7 | //     https://www.apache.org/licenses/LICENSE-2.0
  8 | //
  9 | // Unless required by applicable law or agreed to in writing, software
 10 | // distributed under the License is distributed on an "AS IS" BASIS,
 11 | // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 12 | // See the License for the specific language governing permissions and
 13 | // limitations under the License.
 14 | 
 15 | // When the browser action is clicked, `addToClipboard()` will use an offscreen
 16 | // document to write the value of `textToCopy` to the system clipboard.
 17 | chrome.action.onClicked.addListener(async () => {
 18 |   await addToClipboard(textToCopy);
 19 | });
 20 | 
 21 | chrome.contextMenus.create({
 22 |   id: "sayitbetter",
 23 |   title: "Say it better!",
 24 |   contexts:["selection"],
 25 | });
 26 | 
 27 | async function getConfiguration() {
 28 |   return new Promise((resolve) => {
 29 |     chrome.storage.local.get('config', (data) => {
 30 |       resolve(data.config);
 31 |     });
 32 |   });
 33 | }
 34 | 
 35 | chrome.contextMenus.onClicked.addListener(async function(clickData, tab){
 36 | 
 37 |   if (clickData.menuItemId == "sayitbetter" && clickData.selectionText){
 38 | 
 39 |     chrome.scripting.executeScript({
 40 |       target: { tabId: tab.id },
 41 |       files: ['content.js']
 42 |     }).then(() => {
 43 |       chrome.tabs.sendMessage(tab.id, {
 44 |         action: 'createDiv',
 45 |         text: "Asking to ChatGPT, please wait..."
 46 |       });
 47 |     }).catch(err => console.error(err));
 48 | 
 49 | 
 50 | 
 51 |     const tone = await getConfiguration() || "plain";
 52 |     console.error(tone);
 53 | 
 54 |     const url = "https://say-it-better.vercel.app/api/query";
 55 |     const res = await fetch(url, {
 56 |       method: "POST",
 57 |       body: JSON.stringify({tone: tone, prompt: clickData.selectionText}),
 58 |     });
 59 | 
 60 |     const body = await res.text();
 61 | 
 62 |     addToClipboard(body);
 63 | 
 64 |     chrome.scripting.executeScript({
 65 |       target: { tabId: tab.id },
 66 |       files: ['content.js']
 67 |     }).then(() => {
 68 |       chrome.tabs.sendMessage(tab.id, {
 69 |         action: 'updateDiv',
 70 |         text: "Copied to the clipboard."
 71 |       });
 72 |     }).catch(err => console.error(err));
 73 |   }
 74 | });
 75 | 
 76 | 
 77 | // Solution 1 - As of Jan 2023, service workers cannot directly interact with
 78 | // the system clipboard using either `navigator.clipboard` or
 79 | // `document.execCommand()`. To work around this, we'll create an offscreen
 80 | // document and pass it the data we want to write to the clipboard.
 81 | async function addToClipboard(value) {
 82 |   await chrome.offscreen.createDocument({
 83 |     url: 'offscreen.html',
 84 |     reasons: [chrome.offscreen.Reason.CLIPBOARD],
 85 |     justification: 'Write text to the clipboard.'
 86 |   });
 87 | 
 88 |   // Now that we have an offscreen document, we can dispatch the
 89 |   // message.
 90 |   chrome.runtime.sendMessage({
 91 |     type: 'copy-data-to-clipboard',
 92 |     target: 'offscreen-doc',
 93 |     data: value
 94 |   });
 95 | }
 96 | 
 97 | // Solution 2 – Once extension service workers can use the Clipboard API,
 98 | // replace the offscreen document based implementation with something like this.
 99 | // async function addToClipboardV2(value) {
100 | //   navigator.clipboard.writeText(value);
101 | // }
102 |

--------------------------------------------------------------------------------

Select Tone: