5c5dcf5cb5
* add twenty icon * rest api calls for company * check if company exists * refacto * person/company saved call * gql codegen init * type defs * build fix * DB calls with gql codegen and apollo integration
71 lines
2.7 KiB
TypeScript
71 lines
2.7 KiB
TypeScript
import insertButtonForCompany from '~/contentScript/extractCompanyProfile';
|
|
import insertButtonForPerson from '~/contentScript/extractPersonProfile';
|
|
|
|
// Inject buttons into the DOM when SPA is reloaded on the resource url.
|
|
// e.g. reload the page when on https://www.linkedin.com/in/mabdullahabaid/
|
|
await insertButtonForCompany();
|
|
await insertButtonForPerson();
|
|
|
|
// The content script gets executed upon load, so the the content script is executed when a user visits https://www.linkedin.com/feed/.
|
|
// However, there would never be another reload in a single page application unless triggered manually.
|
|
// Therefore, if the user navigates to a person or a company page, we must manually re-execute the content script to create the "Add to Twenty" button.
|
|
// e.g. create "Add to Twenty" button when a user navigates to https://www.linkedin.com/in/mabdullahabaid/ from https://www.linkedin.com/feed/
|
|
chrome.runtime.onMessage.addListener(async (message, _, sendResponse) => {
|
|
if (message.action === 'executeContentScript') {
|
|
await insertButtonForCompany();
|
|
await insertButtonForPerson();
|
|
}
|
|
|
|
if (message.action === 'TOGGLE') {
|
|
toggle();
|
|
}
|
|
|
|
sendResponse('Executing!');
|
|
});
|
|
|
|
const createIframe = () => {
|
|
const iframe = document.createElement('iframe');
|
|
iframe.style.background = 'lightgrey';
|
|
iframe.style.height = '100vh';
|
|
iframe.style.width = '400px';
|
|
iframe.style.position = 'fixed';
|
|
iframe.style.top = '0px';
|
|
iframe.style.right = '-400px';
|
|
iframe.style.zIndex = '9000000000000000000';
|
|
iframe.style.transition = 'ease-in-out 0.3s';
|
|
return iframe;
|
|
};
|
|
|
|
const handleContentIframeLoadComplete = () => {
|
|
//If the pop-out window is already open then we replace loading iframe with our content iframe
|
|
if (loadingIframe.style.right === '0px') contentIframe.style.right = '0px';
|
|
loadingIframe.style.display = 'none';
|
|
contentIframe.style.display = 'block';
|
|
};
|
|
|
|
//Creating one iframe where we are loading our front end in the background
|
|
const contentIframe = createIframe();
|
|
contentIframe.style.display = 'none';
|
|
contentIframe.src = `${import.meta.env.VITE_FRONT_BASE_URL}`;
|
|
contentIframe.onload = handleContentIframeLoadComplete;
|
|
|
|
//Creating this iframe to show as a loading state until the above iframe loads completely
|
|
const loadingIframe = createIframe();
|
|
loadingIframe.src = chrome.runtime.getURL('loading.html');
|
|
|
|
document.body.appendChild(loadingIframe);
|
|
document.body.appendChild(contentIframe);
|
|
|
|
const toggleIframe = (iframe: HTMLIFrameElement) => {
|
|
if (iframe.style.right === '-400px' && iframe.style.display !== 'none') {
|
|
iframe.style.right = '0px';
|
|
} else if (iframe.style.right === '0px' && iframe.style.display !== 'none') {
|
|
iframe.style.right = '-400px';
|
|
}
|
|
};
|
|
|
|
const toggle = () => {
|
|
toggleIframe(loadingIframe);
|
|
toggleIframe(contentIframe);
|
|
};
|