fix: linkedin projects share

src/constants.ts

@@ -28,7 +28,7 @@ export const OPEN_SAUCED_HIGHLIGHT_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/highl
 export const OPEN_SAUCED_HIGHLIGHTS_LIST_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/highlights/list`;
 export const OPEN_SAUCED_EMOJIS_ENDPOINT = `${OPEN_SAUCED_API_ENDPOINT}/emojis`;
 
-// GitHub constants/selectors
+// Content-scripts selectors
 export const GITHUB_PROFILE_MENU_SELECTOR = ".p-nickname.vcard-username.d-block";
 export const GITHUB_PROFILE_EDIT_MENU_SELECTOR = "button.js-profile-editable-edit-button";
 export const GITHUB_PROFILE_USER_PROFILE_BIO_SELECTOR = ".p-note.user-profile-bio.mb-3.js-user-profile-bio.f4";
@@ -41,6 +41,7 @@ export const GITHUB_REPO_ACTIONS_SELECTOR = ".pagehead-actions";
 export const GITHUB_PR_COMMENT_TEXT_AREA_SELECTOR = "pull_request[body]";
 export const GITHUB_PR_SUGGESTION_TEXT_AREA_SELECTOR = "[name='comment[body]']";
 export const GITHUB_PR_BASE_BRANCH_SELECTOR = "css-truncate css-truncate-target";
+export const LINKEDIN_PROJECT_FORM_SELECTOR = ".artdeco-text-input--input";
 
 // External Links
 export const EXTERNAL_RESOURCES = [

src/content-scripts/components/GenerateAIDescription/DescriptionGeneratorButton.ts

@@ -14,7 +14,7 @@ export const DescriptionGeneratorButton = () => {
         innerHTML: `<span id="ai-description-gen" class="toolbar-item btn-octicon">
     <img class="octicon octicon-heading" height="16px" width="16px" id="ai-description-button-logo" src=${chrome.runtime.getURL(openSaucedLogoIcon)}>
     </span>
-    <tool-tip for="ai-description-gen">Generate PR description</tool-tip>`,
+    <tool-tip for="ai-description-gen" popover="manual">Generate PR description</tool-tip>`,
         onclick: handleSubmit,
     });
 

src/popup/pages/home.tsx

@@ -15,13 +15,12 @@ import { useOpensaucedUserCheck } from "../../hooks/useOpensaucedUserCheck";
 import { Profile } from "./profile";
 import { goTo } from "react-chrome-extension-router";
 import PostOnHighlight from "./posthighlight";
-import { getRepoAPIURL } from "../../utils/urlMatchers";
 import { getEmojis, getHighlights, getRepoOpenSaucedURL } from "../../utils/fetchOpenSaucedApiData";
 import Help from "./help";
 import { useEffect, useState, useRef } from "react";
 import Settings from "./settings";
 import { OPEN_SAUCED_INSIGHTS_DOMAIN } from "../../constants";
-import type { Highlight } from "../../ts/types";
+import { MessageType, type Highlight, type Message } from "../../ts/types";
 import { usGetGitHubPageInfo } from "../../hooks/useGetGitHubPageInfo";
 import { HighlightSlide } from "../components/HighlightSlide";
 
@@ -167,34 +166,12 @@ const Home = ({ forceRefresh }: { forceRefresh: boolean } = { forceRefresh: fals
                                 <button
                                     className="flex items-center bg-slate-700 hover:bg-slate-700/70 hover:text-orange text-white gap-2 p-1.5 px-3 w-full rounded-sm font-medium text-sm"
                                     onClick={() => {
-                                        function populateDataToLinkedIn (data: any) {
-                                            const inputFields: NodeListOf<HTMLInputElement> = document.querySelectorAll(".artdeco-text-input--input");
+                                        const message: Message = {
+                                            type: MessageType.LinkedInProject,
+                                            data: { url: pageUrl },
+                                        };
 
-                                            if (inputFields.length === 0) {
-                                            // set timeout to wait for the page to load
-                                                setTimeout(() => {
-                                                    populateDataToLinkedIn(data);
-                                                }, 500);
-
-                                                return;
-                                            }
-                                            inputFields[0].value = data.name;
-                                            inputFields[1].value = data.description;
-                                        }
-                                        fetch(getRepoAPIURL(pageUrl)).then(async res => res.json())
-                                            .then(data => chrome.tabs.create(
-                                                { url: "https://www.linkedin.com/in/me/edit/forms/project/new/", active: true },
-                                                tab => {
-                                                    void chrome.scripting
-                                                        .executeScript({
-                                                            target: { tabId: tab.id! },
-                                                            func: populateDataToLinkedIn,
-                                                            args: [data],
-                                                        });
-                                                },
-
-                                            ))
-                                            .catch(err => console.log(err));
+                                        void chrome.runtime.sendMessage(message);
                                     }}
                                 >
                                     <IoLogoLinkedin />

src/ts/types.ts

@@ -59,3 +59,12 @@ export enum RepoQueryPages {
     Indexing = "indexing",
     Chat = "chat",
 }
+
+export enum MessageType {
+    LinkedInProject,
+}
+
+export interface Message {
+    type: MessageType;
+    data: Record<string, string>;
+}

src/worker/background.ts

@@ -1,3 +1,41 @@
+import { LINKEDIN_PROJECT_FORM_SELECTOR } from "../constants";
+import { Message, MessageType } from "../ts/types";
 import { setDefaultDescriptionConfig } from "../utils/ai-utils/descriptionconfig";
+import { getRepoAPIURL } from "../utils/urlMatchers";
 
 chrome.runtime.onInstalled.addListener(setDefaultDescriptionConfig);
+
+chrome.runtime.onMessage.addListener(async (message: Message) => {
+    // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
+    if (message.type === MessageType.LinkedInProject) {
+        const response = await fetch(getRepoAPIURL(message.data.url));
+        const data = await response.json();
+        const tab = await chrome.tabs.create({
+            url: "https://www.linkedin.com/in/me/edit/forms/project/new/",
+            active: true,
+        });
+
+        void chrome.scripting.executeScript({
+            target: { tabId: tab.id! },
+            func: (data, selector) => {
+                const populateDataToLinkedIn = (data: any) => {
+                    const inputFields: NodeListOf<HTMLInputElement> = document.querySelectorAll(selector);
+
+                    if (inputFields.length === 0) {
+                        // Set timeout to wait for the page to load
+                        setTimeout(() => {
+                            populateDataToLinkedIn(data);
+                        }, 500);
+
+                        return;
+                    }
+                    inputFields[0].value = data.name;
+                    inputFields[1].value = data.description;
+                };
+
+                populateDataToLinkedIn(data);
+            },
+            args: [data, LINKEDIN_PROJECT_FORM_SELECTOR],
+        });
+    }
+});