fixed Chrome/Firefox links + open Colab from GitHub links

ali-h-kudeir · Feb 12, 2023 · d1a8ceb · d1a8ceb
1 parent bb27316
commit d1a8ceb
Show file tree

Hide file tree

Showing 12 changed files with 60 additions and 135 deletions.
diff --git a/build.mjs b/build.mjs
@@ -17,12 +17,7 @@ async function deleteOldDir() {
 
 async function runEsbuild() {
   await esbuild.build({
-    entryPoints: [
-      'src/content-script/index.tsx',
-      'src/background/index.ts',
-      'src/options/index.tsx',
-      'src/popup/index.tsx',
-    ],
+    entryPoints: ['src/content-script/index.tsx', 'src/background/index.ts', 'src/options/index.tsx'],
     bundle: true,
     outdir: outdir,
     treeShaking: true,
@@ -78,9 +73,6 @@ async function build() {
     { src: 'build/options/index.js', dst: 'options.js' },
     { src: 'build/options/index.css', dst: 'options.css' },
     { src: 'src/options/index.html', dst: 'options.html' },
-    { src: 'build/popup/index.js', dst: 'popup.js' },
-    { src: 'build/popup/index.css', dst: 'popup.css' },
-    { src: 'src/popup/index.html', dst: 'popup.html' },
     { src: 'src/logo.png', dst: 'logo.png' },
     { src: 'src/_locales', dst: '_locales' },
   ];

diff --git a/src/background/index.ts b/src/background/index.ts
@@ -47,6 +47,18 @@ Browser.runtime.onMessage.addListener(async (message) => {
   }
 });
 
+Browser.action.onClicked.addListener((tab) => {
+  const currentUrl = tab.url ?? '';
+  // check if the current URL is a GitHub URL
+  if (currentUrl.includes('github.com')) {
+    if (tab.id) {
+      const newUrl = currentUrl.replace('github.com', 'githubtocolab.com');
+      Browser.tabs.create({ url: newUrl });
+    }
+  }
+  return;
+});
+
 Browser.runtime.onInstalled.addListener((details) => {
   if (details.reason === 'install') {
     Browser.runtime.openOptionsPage();

diff --git a/src/content-script/ChatGPTCard.tsx b/src/content-script/ChatGPTCard.tsx
@@ -23,8 +23,6 @@ function ChatGPTCard({ question, userConfig }: Props) {
     setRetrieve(true);
   };
 
-  const submitDisabled = prompt.trim() === '';
-
   if (closed) {
     return null;
   }
@@ -38,7 +36,7 @@ function ChatGPTCard({ question, userConfig }: Props) {
         <select
           onChange={(e) => setPrompt(e.target.value)}
           id="countries"
-          className="w-full prompt-select colab-text outline-none focus:border-blue-400 focus-within:border-blue-400"
+          className="w-full prompt-select colab-text outline-none colab-border focus:border-blue-400 focus-within:border-blue-400"
         >
           <option>Select ChatGPT Task</option>
           <option value={PROMPTS.EXPLAIN}>1. Explain</option>
@@ -56,11 +54,7 @@ function ChatGPTCard({ question, userConfig }: Props) {
           {prompt}
         </textarea>
         <div className="flex items-center gap-3 my-2">
-          <button
-            className={`colab-button cursor-pointer ${submitDisabled ? 'opacity-80' : 'opacity-100'}`}
-            disabled={submitDisabled}
-            onClick={() => handleButtonClick()}
-          >
+          <button className="colab-button cursor-pointer" onClick={() => handleButtonClick()}>
             Submit
           </button>
           <div className="flex items-center">
@@ -77,9 +71,14 @@ function ChatGPTCard({ question, userConfig }: Props) {
           </div>
         </div>
         <ChatGPTQuery query={query} retrieve={retrieve} />
-        <button className="colab-button z-20 relative mt-5 cursor-pointer" onClick={() => setClosed(true)}>
-          Close
-        </button>
+        <div className="flex items-center gap-5 mt-5">
+          <button className="colab-button z-20 relative mt-5 cursor-pointer" onClick={() => setClosed(true)}>
+            Close
+          </button>
+          <button className="colab-button z-20 relative mt-5 cursor-pointer" onClick={() => setPrompt('')}>
+            Reset
+          </button>
+        </div>
       </div>
     </Accordion>
   );

diff --git a/src/content-script/ChatGPTQuery.tsx b/src/content-script/ChatGPTQuery.tsx
@@ -24,6 +24,8 @@ function ChatGPTQuery({ query, retrieve }: Props) {
   const [status, setStatus] = useState<QueryStatus>();
   const [copied, setCopied] = useState(false);
 
+  const isChrome = /chrome/i.test(navigator.userAgent);
+
   useEffect(() => {
     if (!retrieve) {
       return;
@@ -105,8 +107,16 @@ function ChatGPTQuery({ query, retrieve }: Props) {
         {done && showTip && (
           <p className="italic mt-2">
             Enjoy this extension? Give us a 5-star rating at{' '}
-            <a href="" target="_blank" rel="noreferrer">
-              Chrome Web Store
+            <a
+              href={
+                isChrome
+                  ? 'https://chrome.google.com/webstore/detail/chatgpt-for-google-colab/dfhfeifekpgapdlhfakecbbinnnfoohh'
+                  : 'https://addons.mozilla.org/en-US/firefox/addon/chatgpt-for-google-colab/'
+              }
+              target="_blank"
+              rel="noreferrer"
+            >
+              {isChrome ? 'Chrome' : 'Firefox'} Web Store
             </a>
           </p>
         )}

diff --git a/src/content-script/extract-cells.ts b/src/content-script/extract-cells.ts
diff --git a/src/content-script/index.tsx b/src/content-script/index.tsx
@@ -2,16 +2,18 @@ import { render } from 'preact';
 import '../base.css';
 import { getUserConfig, UserConfig } from '../config';
 import ChatGPTCard from './ChatGPTCard';
-import { insertAfter } from './extract-cells';
 import { config } from './search-engine-configs';
 import { getPossibleElementByQuerySelector } from './utils';
 
 const siteRegex = 'colab'; //new RegExp(Object.keys(config).join('|'))
 
-const siteName = location.hostname.match(siteRegex)![0];
-const siteConfig = config[siteName];
+export function insertAfter(newNode: Element, referenceNode: Element) {
+  (referenceNode.parentNode as Element).insertBefore(newNode, referenceNode.nextSibling);
+}
 
 async function mount(parentContainer: Element, userConfig: UserConfig) {
+  const siteName = location.hostname.match(siteRegex)![0];
+  const siteConfig = config[siteName];
   const inputCell = getPossibleElementByQuerySelector(siteConfig.cellQuery, parentContainer)[0] as HTMLTextAreaElement;
 
   const chatGptButton = document.createElement('button');
@@ -49,6 +51,13 @@ async function mount(parentContainer: Element, userConfig: UserConfig) {
 }
 
 async function run() {
+  if (!window.location.href.includes('colab.research.google.com')) {
+    return;
+  }
+
+  const siteName = location.hostname.match(siteRegex)![0];
+  const siteConfig = config[siteName];
+
   const codeBlocks = getPossibleElementByQuerySelector(siteConfig.codeBlocksQuery) ?? [];
 
   const userConfig = await getUserConfig();
@@ -61,7 +70,7 @@ async function run() {
 
   // attach chatgpt to newly added code cells.
   const targetNode = document.body;
-  const config = { childList: true, subtree: true };
+  const nodeConfig = { childList: true, subtree: true };
   const observer = new MutationObserver(function (mutationsList) {
     for (const mutation of mutationsList) {
       if (mutation.type === 'childList') {
@@ -77,7 +86,7 @@ async function run() {
       }
     }
   });
-  observer.observe(targetNode, config);
+  observer.observe(targetNode, nodeConfig);
 }
 
 if (document.readyState === 'loading') {

diff --git a/src/manifest.json b/src/manifest.json
@@ -2,7 +2,7 @@
   "name": "__MSG_appName__",
   "description": "__MSG_appDesc__",
   "default_locale": "en",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "manifest_version": 3,
   "icons": {
     "16": "logo.png",
@@ -11,20 +11,18 @@
     "128": "logo.png"
   },
   "host_permissions": ["https://*.openai.com/"],
-  "permissions": ["storage"],
+  "permissions": ["tabs", "storage"],
   "background": {
     "service_worker": "background.js"
   },
-  "action": {
-    "default_popup": "popup.html"
-  },
+  "action": {},
   "options_ui": {
     "page": "options.html",
     "open_in_tab": true
   },
   "content_scripts": [
     {
-      "matches": ["https://colab.research.google.com/*"],
+      "matches": ["https://colab.research.google.com/*", "https://github.com/*"],
       "js": ["content-script.js"],
       "css": ["content-script.css"]
     }

diff --git a/src/manifest.v2.json b/src/manifest.v2.json
@@ -2,28 +2,26 @@
   "name": "__MSG_appName__",
   "description": "__MSG_appDesc__",
   "default_locale": "en",
-  "version": "1.0.1",
+  "version": "1.2.0",
   "manifest_version": 2,
   "icons": {
     "16": "logo.png",
     "32": "logo.png",
     "48": "logo.png",
     "128": "logo.png"
   },
-  "permissions": ["storage", "https://*.openai.com/"],
+  "permissions": ["tabs", "storage", "https://*.openai.com/"],
   "background": {
     "scripts": ["background.js"]
   },
-  "browser_action": {
-    "default_popup": "popup.html"
-  },
+  "browser_action": {},
   "options_ui": {
     "page": "options.html",
     "open_in_tab": true
   },
   "content_scripts": [
     {
-      "matches": ["https://colab.research.google.com/*"],
+      "matches": ["https://colab.research.google.com/*", "https://github.com/*"],
       "js": ["content-script.js"],
       "css": ["content-script.css"]
     }

diff --git a/src/options/App.tsx b/src/options/App.tsx
@@ -40,6 +40,9 @@ function OptionsPage() {
           <a href="https://github.com/ali-h-kudeir/ChatGPT-Google-Colab" target="_blank" rel="noreferrer">
             Source code
           </a>
+          <a href="https://www.producthunt.com/products/chatgpt-for-google-colab/" target="_blank" rel="noreferrer">
+            ProductHunt
+          </a>
         </div>
       </nav>
       <main className="w-[500px] mx-auto mt-14">

diff --git a/src/popup/App.tsx b/src/popup/App.tsx
diff --git a/src/popup/index.html b/src/popup/index.html
diff --git a/src/popup/index.tsx b/src/popup/index.tsx