From 5351fa5f12296ee7c6a7534f49b2a0ce004473b4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Florian=20Ho=CC=88nicke?= Date: Mon, 15 May 2023 16:00:54 +0200 Subject: [PATCH] =?UTF-8?q?=E2=9E=B0=20feat:=20avoid=20loop?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../chrome_extension/button-icon.svg | 79 +++++++++++++++++++ .../rainbow_tweet/chrome_extension/content.js | 16 ++-- .../rainbow_tweet/chrome_extension/styles.css | 3 +- 3 files changed, 92 insertions(+), 6 deletions(-) create mode 100644 examples/rainbow_tweet/chrome_extension/button-icon.svg diff --git a/examples/rainbow_tweet/chrome_extension/button-icon.svg b/examples/rainbow_tweet/chrome_extension/button-icon.svg new file mode 100644 index 0000000..bec00b5 --- /dev/null +++ b/examples/rainbow_tweet/chrome_extension/button-icon.svg @@ -0,0 +1,79 @@ + + + + + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/examples/rainbow_tweet/chrome_extension/content.js b/examples/rainbow_tweet/chrome_extension/content.js index 32fb575..3bb910e 100644 --- a/examples/rainbow_tweet/chrome_extension/content.js +++ b/examples/rainbow_tweet/chrome_extension/content.js @@ -7,6 +7,7 @@ chrome.storage.sync.get({ }, function(items) { openai_api_key = items.openai_api_key; }); + let observer = new MutationObserver((mutations) => { console.log('Twitter Rewrite: DOM mutation detected'); // For each mutation @@ -15,7 +16,7 @@ let observer = new MutationObserver((mutations) => { if (mutation.addedNodes) { mutation.addedNodes.forEach((node) => { // If the added node (or its descendants) contains a tweet - let tweets = node.querySelectorAll('[data-testid="tweetText"]'); + let tweets = node.querySelectorAll('[data-testid="tweet"]'); tweets.forEach((tweet) => { // If the tweet doesn't already have a modify button if (!tweet.querySelector('.modify-button')) { @@ -32,8 +33,9 @@ let observer = new MutationObserver((mutations) => { // Add event listener for button click button.addEventListener('click', function() { + let thisButton = this; // Send tweet to API - let originalTweet = tweet.innerText; + let originalTweet = tweet.querySelector('[data-testid="tweetText"]').innerText; this.disabled = true; this.innerText = 'Loading...'; fetch('https://gptdeploy-61694dd6a3.wolf.jina.ai/post', { @@ -60,12 +62,16 @@ let observer = new MutationObserver((mutations) => { let newTweet = document.createElement('span'); newTweet.innerHTML = rainbowTweet; // Replace the old text node with the new element node - tweet.replaceWith(newTweet); + tweet.querySelector('[data-testid="tweetText"]').replaceWith(newTweet); + // Remove the button + thisButton.remove(); }); }); - // Inject button into tweet - tweet.appendChild(button); + // Find the actions container and inject the button into it + let actionGroups = tweet.querySelectorAll('div[role="group"]'); + let actionsContainer = actionGroups[actionGroups.length - 1]; + actionsContainer.appendChild(button); } }); }); diff --git a/examples/rainbow_tweet/chrome_extension/styles.css b/examples/rainbow_tweet/chrome_extension/styles.css index b2bf658..2169abf 100644 --- a/examples/rainbow_tweet/chrome_extension/styles.css +++ b/examples/rainbow_tweet/chrome_extension/styles.css @@ -1,5 +1,6 @@ .modify-button { - background-color: #00acee; /* Twitter Blue */ + /* transparent */ + background-color: #00000000; color: white; border: none; padding: 5px 10px;