') + ')', 'gi'); if (regex.test(text)) { found = true; var frag = document.createDocumentFragment(); var parts = text.split(regex); parts.forEach(function(part, i) { if (i % 2 === 0) { frag.appendChild(document.createTextNode(part)); } else { var span = document.createElement('span'); span.className = 'userscript-highlight'; span.textContent = part; frag.appendChild(span); } }); node.parentNode.replaceChild(frag, node); } }); } else if (node.nodeType === 1 && node.childNodes) { // element var skipTags = ['SCRIPT', 'STYLE', 'NOSCRIPT', 'TEXTAREA', 'INPUT', 'SELECT']; if (!skipTags.includes(node.tagName)) { Array.from(node.childNodes).forEach(highlight); } } } highlight(document.body); // Re-highlight on dynamic content var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1 || node.nodeType === 3) highlight(node); }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Highlight Search Terms]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Strip utm_, fbclid, gclid, etc. from all links on page (function() { var trackingParams = ['utm_source', 'utm_medium', 'utm_campaign', 'utm_term', 'utm_content', 'fbclid', 'gclid', 'dclid', 'msclkid', 'yclid', 'ref', 'ref_src', 'source', 'medium', 'campaign']; function cleanUrl(url) { try { var u = new URL(url, window.location.origin); var changed = false; trackingParams.forEach(function(p) { if (u.searchParams.has(p)) { u.searchParams.delete(p); changed = true; } }); return changed ? u.toString() : url; } catch (e) { return url; } } function cleanLinks() { document.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } cleanLinks(); var observer = new MutationObserver(function(mutations) { mutations.forEach(function(m) { m.addedNodes.forEach(function(node) { if (node.nodeType === 1) { if (node.tagName === 'A') cleanLinks(); node.querySelectorAll('a[href]').forEach(function(a) { var clean = cleanUrl(a.href); if (clean !== a.href) a.href = clean; }); } }); }); }); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:Remove Tracking Parameters from Links]', __e); } })(); (function(){ try { var __m = "youtube.com"; var __re = new RegExp('^' + "youtube\\.com" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Auto-enable theater mode on YouTube (function() { function tryTheater() { var btn = document.querySelector('button[aria-label="Theater mode"], ytd-player #player button[title="Theater mode"]'); if (btn && !btn.classList.contains('activated')) { btn.click(); } } // Try immediately tryTheater(); // Try after navigation (SPA) var lastUrl = location.href; setInterval(function() { if (location.href !== lastUrl) { lastUrl = location.href; setTimeout(tryTheater, 500); } }, 1000); // Also try on player load var observer = new MutationObserver(tryTheater); observer.observe(document.body, { childList: true, subtree: true }); })(); } } catch(__e) { console.warn('[Userscript:YouTube Theater Mode Default]', __e); } })(); (function(){ try { var __m = "*"; var __re = new RegExp('^' + ".*" + ', 'i'); if (__m === '*' || __re.test(location.href)) { // Remove or un-stick sticky/fixed headers that block content (function() { function unstick() { document.querySelectorAll('header, nav, [role="banner"], .header, .navbar, .sticky, .fixed-top, [style*="position: fixed"], [style*="position:sticky"]').forEach(function(el) { if (el.style.position === 'fixed' || el.style.position === 'sticky' || getComputedStyle(el).position === 'fixed' || getComputedStyle(el).position === 'sticky') { el.style.position = 'static'; el.style.top = 'auto'; el.style.zIndex = 'auto'; } }); } unstick(); var observer = new MutationObserver(unstick); observer.observe(document.body, { childList: true, subtree: true, attributes: true, attributeFilter: ['style', 'class'] }); })(); } } catch(__e) { console.warn('[Userscript:Kill Sticky Headers]', __e); } })(); })(); feat(chrome-extension,shared): Expand WebSSO capabilities. [SDK-836] by tmilewski · Pull Request #2246 · clerk/javascript · GitHub
Skip to content

feat(chrome-extension,shared): Expand WebSSO capabilities. [SDK-836] - #2246

Closed
tmilewski wants to merge 6 commits into
mainfrom
chrome-extension-dev-cookies
Closed

feat(chrome-extension,shared): Expand WebSSO capabilities. [SDK-836]#2246
tmilewski wants to merge 6 commits into
mainfrom
chrome-extension-dev-cookies

Conversation

@tmilewski

@tmilewskitmilewski commented Dec 1, 2023

Copy link
Copy Markdown
Member

Description

Enables the ability to sync development instances of a Chrome Extension with a host app using URL-based session syncing.

More information: https://www.notion.so/clerkdev/Chrome-extensions-and-URL-based-session-syncing-135e04959e664b26a2076fc031174460

Fixes SDK-836

Checklist

  • npm test runs as expected.
  • npm run build runs as expected.
  • (If applicable) JSDoc comments have been added or updated for any package exports
  • (If applicable) Documentation has been updated

Type of change

  • 🐛 Bug fix
  • 🌟 New feature
  • 🔨 Breaking change
  • 📖 Refactoring / dependency upgrade / documentation
  • other:

Packages affected

  • @clerk/backend
  • @clerk/chrome-extension
  • @clerk/clerk-js
  • @clerk/clerk-expo
  • @clerk/fastify
  • gatsby-plugin-clerk
  • @clerk/localizations
  • @clerk/nextjs
  • @clerk/clerk-react
  • @clerk/remix
  • @clerk/clerk-sdk-node
  • @clerk/shared
  • @clerk/themes
  • @clerk/types
  • build/tooling/chore

@tmilewskitmilewski self-assigned this Dec 1, 2023
@changeset-bot

changeset-botBot commented Dec 1, 2023•
edited
Loading

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 7d73465

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages
NameType
@clerk/chrome-extensionMajor
@clerk/clerk-jsMinor
@clerk/sharedMinor
@clerk/clerk-expoPatch
@clerk/backendPatch
@clerk/fastifyPatch
@clerk/nextjsPatch
@clerk/clerk-reactPatch
@clerk/remixPatch
@clerk/clerk-sdk-nodePatch
gatsby-plugin-clerkPatch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@tmilewski
tmilewskiforce-pushed the chrome-extension-dev-cookies branch 2 times, most recently from 5a4ae89 to 9e5ebbdCompareDecember 1, 2023 23:04
@tmilewski
tmilewski marked this pull request as ready for review December 1, 2023 23:05
@tmilewski
tmilewski requested a review from dimklDecember 2, 2023 20:52
@tmilewskitmilewski mentioned this pull request Dec 4, 2023
Closed
24 tasks
@tmilewski

tmilewski commented Dec 4, 2023

Copy link
Copy Markdown
MemberAuthor

Swapping back to draft as I submitted an alternate approach to this in #2249. Open to discussion.

@tmilewski
tmilewski marked this pull request as draft December 4, 2023 00:23
SokratisVidros
SokratisVidros suggested changes Dec 5, 2023
View reviewed changes
Comment threadpackages/chrome-extension/src/chrome/runtime.ts Outdated
@@ -0,0 +1,19 @@
export function validateManifest(manifest: chrome.runtime.Manifest): void {

@SokratisVidrosSokratisVidrosDec 5, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💯 Awesome addition!

Comment threadpackages/chrome-extension/src/singleton.ts Outdated
// TODO: Listen to client cookie changes and sync updates
// https://developer.chrome.com/docs/extensions/reference/cookies/#event-onChanged
// Will throw if manifest is invalid
validateManifest(chrome.runtime.getManifest());

@SokratisVidrosSokratisVidrosDec 5, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

🎖️

Comment threadpackages/chrome-extension/src/singleton.ts
requestInit.url?.searchParams.append('_is_native', '1');
const clientCookie = await (key.instanceType === 'production'
? getClientCookie(key.frontendApi, CLIENT_JWT_KEY)
: getClientCookie(syncSessionHost, DEV_BROWSER_JWT_MARKER)

@SokratisVidrosSokratisVidrosDec 5, 2023

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It seems that we can get the syncSessionHost from manifest.json and remove the need for the extra prop.

@tmilewski
tmilewskiforce-pushed the chrome-extension-dev-cookies branch from 9e5ebbd to 3259834CompareDecember 6, 2023 01:26
@tmilewski
tmilewskiforce-pushed the chrome-extension-dev-cookies branch from 3259834 to e935e92CompareDecember 6, 2023 01:47
@tmilewski
tmilewskiforce-pushed the chrome-extension-dev-cookies branch from 42667fe to e935e92CompareDecember 6, 2023 02:18
@clerkclerk deleted a comment from github-actionsBotDec 6, 2023
@tmilewski

tmilewski commented Dec 10, 2023

Copy link
Copy Markdown
MemberAuthor

Closing in favor of #2277, which is basically this with a few additions. The new PR was created due to some rebase oddities with the Chrome playground PR.

@tmilewski
tmilewski deleted the chrome-extension-dev-cookies branch March 29, 2024 13:38
Sign up for freeto join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dimkldimklAwaiting requested review from dimkl
1 more reviewer
@SokratisVidrosSokratisVidrosSokratisVidros requested changes
Reviewers whose approvals may not affect merge requirements

Assignees

@tmilewskitmilewski

Labels

chrome-extensionplayground

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@tmilewski@SokratisVidros@clerk-cookie