diff --git a/examples/rainbow_tweet/chrome_extension/content.js b/examples/rainbow_tweet/chrome_extension/content.js
new file mode 100644
index 0000000..32fb575
--- /dev/null
+++ b/examples/rainbow_tweet/chrome_extension/content.js
@@ -0,0 +1,77 @@
+console.log('Twitter Rewrite: Content script loaded');
+let openai_api_key = '';
+
+// Get OPENAI_API_KEY from chrome storage
+chrome.storage.sync.get({
+ openai_api_key: ''
+}, function(items) {
+ openai_api_key = items.openai_api_key;
+});
+let observer = new MutationObserver((mutations) => {
+ console.log('Twitter Rewrite: DOM mutation detected');
+ // For each mutation
+ mutations.forEach((mutation) => {
+ // If nodes were added
+ if (mutation.addedNodes) {
+ mutation.addedNodes.forEach((node) => {
+ // If the added node (or its descendants) contains a tweet
+ let tweets = node.querySelectorAll('[data-testid="tweetText"]');
+ tweets.forEach((tweet) => {
+ // If the tweet doesn't already have a modify button
+ if (!tweet.querySelector('.modify-button')) {
+ // Create new button
+ let button = document.createElement('button');
+ if (openai_api_key === '') {
+ button.innerText = 'Set OPENAI_API_KEY by clicking the extension icon';
+ button.disabled = true;
+ } else {
+ button.innerText = '🦄';
+ button.disabled = false;
+ }
+ button.className = 'modify-button';
+
+ // Add event listener for button click
+ button.addEventListener('click', function() {
+ // Send tweet to API
+ let originalTweet = tweet.innerText;
+ this.disabled = true;
+ this.innerText = 'Loading...';
+ fetch('https://gptdeploy-61694dd6a3.wolf.jina.ai/post', {
+ method: 'POST',
+ headers: {
+ 'Content-Type': 'application/json',
+ 'accept': 'application/json'
+ },
+ body: JSON.stringify({
+ "data": [{"text": JSON.stringify({
+ "tweet": originalTweet,
+ "OPENAI_API_KEY": openai_api_key
+ }) }]
+ })
+ })
+ .then(response => response.json())
+ .then(data => {
+ let modifiedTweet = JSON.parse(data.data[0].text).positive_tweet;
+ let rainbowTweet = Array.from(modifiedTweet).map((char, i) =>
+ `${char}`
+ ).join('');
+
+ // Create a new element node to contain the HTML
+ let newTweet = document.createElement('span');
+ newTweet.innerHTML = rainbowTweet;
+ // Replace the old text node with the new element node
+ tweet.replaceWith(newTweet);
+ });
+ });
+
+ // Inject button into tweet
+ tweet.appendChild(button);
+ }
+ });
+ });
+ }
+ });
+});
+
+// Start observing the document with the configured parameters
+observer.observe(document.body, { childList: true, subtree: true });
diff --git a/examples/rainbow_tweet/chrome_extension/jina.png b/examples/rainbow_tweet/chrome_extension/jina.png
new file mode 100644
index 0000000..6fe6d80
Binary files /dev/null and b/examples/rainbow_tweet/chrome_extension/jina.png differ
diff --git a/examples/rainbow_tweet/chrome_extension/logo.png b/examples/rainbow_tweet/chrome_extension/logo.png
new file mode 100644
index 0000000..803fbea
Binary files /dev/null and b/examples/rainbow_tweet/chrome_extension/logo.png differ
diff --git a/examples/rainbow_tweet/chrome_extension/manifest.json b/examples/rainbow_tweet/chrome_extension/manifest.json
new file mode 100644
index 0000000..e2429db
--- /dev/null
+++ b/examples/rainbow_tweet/chrome_extension/manifest.json
@@ -0,0 +1,27 @@
+{
+ "manifest_version": 3,
+ "name": "Rainbow-Tweet",
+ "description": "The Rainbow-Tweet plugin allows the user to convert any tweet into positive language by clicking a button on the tweet.",
+ "version": "0.0.0.1",
+ "icons": {
+ "128": "logo.png"
+ },
+ "action": {
+ "default_icon": {
+ "128": "logo.png"
+ },
+ "default_title": "Configure API Key",
+ "default_popup": "popup.html"
+ },
+ "permissions": [
+ "storage"
+ ],
+ "content_scripts": [
+ {
+ "matches": ["https://twitter.com/*"],
+ "js": ["content.js"],
+ "css": ["styles.css"],
+ "run_at": "document_end"
+ }
+ ]
+}
diff --git a/examples/rainbow_tweet/chrome_extension/popup.css b/examples/rainbow_tweet/chrome_extension/popup.css
new file mode 100644
index 0000000..00e57df
--- /dev/null
+++ b/examples/rainbow_tweet/chrome_extension/popup.css
@@ -0,0 +1,37 @@
+body {
+ font-family: Arial, sans-serif;
+}
+
+.container {
+ width: 300px;
+ padding: 20px;
+}
+
+h1 {
+ color: #444;
+}
+
+.btn {
+ color: white;
+ background-color: #1da1f2;
+ border: none;
+ padding: 10px 20px;
+ margin-top: 10px;
+ cursor: pointer;
+}
+.footer {
+ margin-top: 20px;
+ text-align: center;
+}
+.btn:hover {
+ background-color: #0c84d2;
+}
+
+.form-group {
+ margin-bottom: 15px;
+}
+
+.form-text {
+ font-size: 0.875em;
+ color: #6c757d;
+}
diff --git a/examples/rainbow_tweet/chrome_extension/popup.html b/examples/rainbow_tweet/chrome_extension/popup.html
new file mode 100644
index 0000000..378bf6b
--- /dev/null
+++ b/examples/rainbow_tweet/chrome_extension/popup.html
@@ -0,0 +1,31 @@
+
+
+
+ Twitter Rewrite: Extension Options
+
+
+
+
+
Twitter Rewrite: Extension Options
+
+
+
+
+