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

.changeset/shiny-glasses-switch.md

@@ -0,0 +1,29 @@
+---
+'@clerk/chrome-extension': major
+'@clerk/clerk-js': minor
+'@clerk/shared': minor
+---
+
+Expand the ability for `@clerk/chrome-extension` WebSSO to sync with host applications which use URL-based session syncing.
+
+### How to Update
+
+**WebSSO Local Host Permissions:**
+
+Add the following to the top-level `content_scripts` array key in your `manifest.json` file:
+```json
+{
+ "matches": ["*://localhost/*"], // URL of your host application
+ "js": ["src/content.tsx"] // Path to your content script
+}
+```
+
+**Content Script:**
+
+In order to sync with your host application, you must add the following to your content script to the path specified in the `manifest.json` file above:
+
+```ts
+import { ContentScript } from '@clerk/chrome-extension';
+
+ContentScript.init(process.env.CLERK_PUBLISHABLE_KEY || "");
+```

.vscode/settings.json

@@ -10,6 +10,12 @@
  "mode": "auto"
  }
  ],
+ "json.schemas": [
+ {
+ "fileMatch": ["manifest.json"],
+ "url": "https://json.schemastore.org/chrome-manifest.json"
+ }
+ ],
  "cSpell.words": [
  "accountsstage",
  "adduser",

package.json

@@ -80,6 +80,7 @@
  "http-server": "^14.1.1",
  "husky": "^8.0.3",
  "jest": "^29.7.0",
+ "jest-chrome": "^0.8.0",
  "jest-environment-jsdom": "^29.3.1",
  "lint-staged": "^14.0.1",
  "npm-cli-adduser": "^1.1.4",
@@ -101,5 +102,8 @@
  "engines": {
  "node": ">=18.17.0",
  "npm": ">=8.5.0"
+ },
+ "overrides": {
+ "jest": "$jest"
  }
 }

packages/chrome-extension/README.md

@@ -117,12 +117,13 @@ WebSSO usage snippet:
 // ...
 <ClerkProvider
  publishableKey={publishableKey}
- navigate={to => navigate(to)}
+ routerPush={to => navigate(to)}
+ routerReplace={to => navigate(to, { replace: true })}
  syncSessionWithTab
 >
  {/* ... */}
 </ClerkProvider>
-//...
+//...
 ```
 
 Examples of a chrome extension using the `@clerk/chrome-extension` package for authentication