Bug: LinkedIn Projects Query Selector is not inputing data

[bdougie]

Describe the bug

When submitting a project to LinkedIn, I have not been able to get the title and body to to be filled.

Steps to reproduce

1. Login to extension
2. Click popup
3. View a repo page, owner/name
4. Click add project to LinkedIn

Browsers

Chrome

Additional context (Is this in dev or production?)

I am not sure if the selector is working.

Code of Conduct

• I agree to follow this project's Code of Conduct

Contributing Docs

• I agree to follow this project's Contribution Docs

[diivi]

@a0m0rajab Maybe you can provide more context on why this does not work anymore? I tried increasing the timeout milliseconds but that didn't help either.

[a0m0rajab]

I could not reproduce it on: https://github.com/open-sauced/ai/releases/tag/v1.12.0-beta.1
Is it in Dev or Prod?

[a0m0rajab]

July.18.2023.20_05.PGrElRTYB6kE-XbzReNVugAcvREehfpkbqdTyesQ5ZrkGejWY.mp4

[diivi]

Can we get on a call to debug this? It seems to work only for you, maybe you can tell what's wrong once you see what's happening on my end?

[a0m0rajab]

Sure! I will message you on discord.

[a0m0rajab]

we did a check with @diivi and could not find a full answer for that, he will write the update about our call.
As for my side, I will test the extension on a new user and new pc then will update it.

[diivi]

Had a one-hour call with @a0m0rajab today regarding this, thank you for your patience!

It seems to be working fine on his PC, but I'm facing some issues. We found a workaround by not changing the active tab to the LinkedIn page. This method fills the data nicely, albeit in the background. We'll conduct some more testing, and if it doesn't work uniformly for both of us, we'll revert to the activeTab: false approach.

[a0m0rajab]

Did this work before, by the way? or was it only working on my side the whole time?

I tried to test this again by:

• changing the browser,
• changing the active user in the browser

If it worked before, can someone just try to fresh install the repo on new folder and try it?

and in both cases worked for me, I am not sure how to test it right now, if anyone from @open-sauced/triage has a time to check, I would love to do pair programming session with you. If not you can check the next to debug it and share your insights with us:

What I am thinking to test is the next:

• Did we get the data from GitHub?

To test this we need to do the next:

In the lines of the fetching:

ai/src/popup/pages/home.tsx

Lines 184 to 197 in 311f456

	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));

We need to remove the script running lines and print the data on console.log if we get data from the fetch then it's okay. This will be need to checked in the popup DevTools.

• Did the script run on LinkedIn?

to do this we can simply change the callback function in our script, to do this do the next:
Remove the whole code in the populate data script and write a console.log

ai/src/popup/pages/home.tsx

Lines 170 to 183 in 311f456

	function populateDataToLinkedIn (data: any) {
	const inputFields: NodeListOf<HTMLInputElement> = document.querySelectorAll(".artdeco-text-input--input");
	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;
	}

Check if this has been printed in the linkedIn DevTools. If it worked, then we have a functioning scripts.

• Change the active tab to false?

Try to change the active tab to false and check if the script is running.

ai/src/popup/pages/home.tsx

Line 186 in 311f456

{ url: "https://www.linkedin.com/in/me/edit/forms/project/new/", active: true },

For further understanding of the code that's written you can check:
https://developer.chrome.com/docs/extensions/reference/tabs/#method-create
https://developer.chrome.com/docs/extensions/reference/scripting/#method-executeScript

[a0m0rajab]

talked with @takanome-dev he got the same issue, it did not work. Thank you for your time!
I tried another PC (borrowed it from a non developer) and it worked smoothly! My question now is why it's working with me only? 😕

[takanome-dev]

I didn't try it using the dev build though, will give it a shot 👍

Update: Tried the steps mentioned above but still nothing. One thing I noticed is after setting the active tab to false and clicking add to LinkedIn, errors start popping up in the extension

cc @a0m0rajab @diivi

[bdougie]

talked with @takanome-dev he got the same issue, it did not work. Thank you for your time!

I tried another PC (borrowed it from a non developer) and it worked smoothly! My question now is why it's working with me only? 😕

Might be the case that your linked is different. Are you paying for any features or opted into anything?

It might be worth trying a different LinkedIn account entirely.

[a0m0rajab]

@takanome-dev I do not think that the tab is the issue, the logic of the code is being like the next:

• fetch repo data from GitHub
• get the JSON object of the data
• Open a tab and have a callback function to handle the data
• the callback function executes the auto-fill function.

since the tab is being opened we know that the code fetched something from GitHub, what I am not sure about is the next:

• Do the selectors change (based on @bdougie suggestions)
• Do we have the right data fetched?

Might be the case that your linked is different. Are you paying for any features or opted into anything

I have a normal account, no beta neither paid features! I will try a friend account though.

[takanome-dev]

I got the response from github but couldn't see the data in populateDataToLinkedIn after a console log.

Do the selectors change

Which selectors? (not very familiar with the codebase 😅)

[a0m0rajab]

@takanome-dev selector in linkedin page, to test this we can do the next:

• Go to: https://www.linkedin.com/in/me/edit/forms/project/new/
• execute the next code:

const inputFields = document.querySelectorAll(".artdeco-text-input--input");
inputFields[0].value = "Test";
inputFields[1].value = "Test Desc";

if it works then the linkedin selectors does not change and the issue is in the callback function.

As for me I have tried this with another PC, it was a Chromebook, it did not work on my profile or my friend's profile.

Would the operating system differ or the chrome API?

[takanome-dev]

Alright, what's happening is that Github returns 404 when fetching https://api.github.com/repos/open-sauced/insights/ and 200 for https://api.github.com/repos/open-sauced/insights

It works by removing that trailing slash and setting the active tab to false (not sure why) 😄

const getRepoAPIURL = (url: string) => url.replace(/github\.com/, "api.github.com/repos").replace(/\/$/, "");

[a0m0rajab]

When I add the trailing slash, the extension adds undefined text to the text we fill with, here is the video:

www_screencapture_com_2023-7-28_17_54.mp4

[a0m0rajab]

My chrome version is: Version 114.0.5735.248 (Official Build) (64-bit)
this could have an impact though.

[a0m0rajab]

I opened a PR to just add a function to have logs being unified with us, if the log is not printed in the linkedin page console, then the excute script is not working...

[takanome-dev]

When I add the trailing slash, the extension adds undefined text to the text we fill with

Yeah, because Github returns a not found

My chrome version is: Version 114.0.5735.248 (Official Build) (64-bit)

I don't think so. Mine is Version 115.0.5790.102 (Official Build) (64-bit)

if the log is not printed in the linkedin page console, then the excute script is not working...

Tried it but no way I could see it 😂

[a0m0rajab]

Yeah, because GitHub returns a not found

What I meant here is that the extension works even if GitHub returns not found.

Tried it but no way I could see it 😂

So nothing is printed on the console?

[takanome-dev]

So nothing is printed on the console?

Actually, I saw it after increasing the limit of the timeout

[a0m0rajab]

😄 That's a move forward! was the active tab option false or true? and what is the timeout number that you used?
i got exited it worked on another PC lol.

[takanome-dev]

was the active tab option false or true?

false

what is the timeout number that you used?

5000 ms. Maybe that's too much but it gave me the time to switch to the opened LinkedIn tab and open the console

[a0m0rajab]

Did it work when the active tab were true?

[takanome-dev]

Did it work when the active tab were true?

No, it didn't work

[github-actions]

🎉 This issue has been resolved in version 1.14.1-beta.4 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀

[github-actions]

🎉 This issue has been resolved in version 1.14.1 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀