Skip to content

Commit

Permalink
chore: copying existing example (#56)
Browse files Browse the repository at this point in the history
chore: adding clarity.js build

feat: injecting clarity into plasmo.com and activeTab

docs: created setup tutorial in readme
  • Loading branch information
Acorn221 authored Dec 15, 2023
1 parent 94ecd6f commit 23f10a1
Show file tree
Hide file tree
Showing 9 changed files with 314 additions and 0 deletions.
33 changes: 33 additions & 0 deletions with-microsoft-clarity/.gitignore
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@

# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.

# dependencies
/node_modules
/.pnp
.pnp.js

# testing
/coverage

# misc
.DS_Store
*.pem

# debug
npm-debug.log*
yarn-debug.log*
yarn-error.log*
.pnpm-debug.log*

# local env files
.env*.local

out/
build/
dist/

# plasmo
.plasmo

# typescript
.tsbuildinfo
26 changes: 26 additions & 0 deletions with-microsoft-clarity/.prettierrc.mjs
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
/**
* @type {import('prettier').Options}
*/
export default {
printWidth: 80,
tabWidth: 2,
useTabs: false,
semi: false,
singleQuote: false,
trailingComma: "none",
bracketSpacing: true,
bracketSameLine: true,
plugins: ["@ianvs/prettier-plugin-sort-imports"],
importOrder: [
"<BUILTIN_MODULES>", // Node.js built-in modules
"<THIRD_PARTY_MODULES>", // Imports not matched by other special words or groups.
"", // Empty line
"^@plasmo/(.*)$",
"",
"^@plasmohq/(.*)$",
"",
"^~(.*)$",
"",
"^[./]"
]
}
60 changes: 60 additions & 0 deletions with-microsoft-clarity/README.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
This is a [Plasmo extension](https://docs.plasmo.com/) project bootstrapped with [`plasmo init`](https://www.npmjs.com/package/plasmo).

## Getting Started

Firstly, go to [Microsoft Clarity](https://clarity.microsoft.com/) and create a project.

Then get your tracking code that looks like this:
```
<script type="text/javascript">
(function(c,l,a,r,i,t,y){
c[a]=c[a]||function(){(c[a].q=c[a].q||[]).push(arguments)};
t=l.createElement(r);t.async=1;t.src="https://www.clarity.ms/tag/"+i;
y=l.getElementsByTagName(r)[0];y.parentNode.insertBefore(t,y);
})(window, document, "clarity", "script", "**The ID that you need to copy**");
</script>
```

After you have your project ID as shown above, go to `https://www.clarity.ms/tag/**The ID that you need to copy**` and copy the "config" object at the end of the script there, it should look something like this:
```
!function(c,l,a,r,i,t,y){function sync(){(new Image).src="https://c.clarity.ms/c.gif"}"complete"==document.readyState?sync():window.addEventListener("load",sync);if(a[c].v||a[c].t)return a[c]("event",c,"dup."+i.projectId);a[c].t=!0,(t=l.createElement(r)).async=!0,t.src="https://www.clarity.ms/s/0.7.20/clarity.js",(y=l.getElementsByTagName(r)[0]).parentNode.insertBefore(t,y),a[c]("start",i),a[c].q.unshift(a[c].q.pop()),a[c]("set","C_IS","0")}("clarity",document,window,"script",{"projectId":"***Project ID***","upload":"https://t.clarity.ms/collect","expire":365,"cookies":["_uetmsclkid","_uetvid"],"track":true,"lean":false,"content":false,"dob":1442});
```

After you have gone to that page, copy the object at the end that looks like
```
{"projectId":"***Project ID***","upload":"https://t.clarity.ms/collect","expire":365,"cookies":["_uetmsclkid","_uetvid"],"track":true,"lean":false,"content":false,"dob":1442}
```

Then replace `config` in `background.ts` with that object.

And finally, run the development server:

```bash
pnpm dev
# or
npm run dev
```

Note: Adblockers like Ublock Origin and others block Microsoft Clarity. To confirm you've set everything up properly, follow this guide [here](https://learn.microsoft.com/en-us/clarity/setup-and-installation/clarity-setup#verify-your-installation) and look out for POST requests to `https://www.clarity.ms/collect`.

Open your browser and load the appropriate development build. For example, if you are developing for the chrome browser, using manifest v3, use: `build/chrome-mv3-dev`.

You can start editing the popup by modifying `popup.tsx`. It should auto-update as you make changes. To add an options page, simply add a `options.tsx` file to the root of the project, with a react component default exported. Likewise to add a content page, add a `content.ts` file to the root of the project, importing some module and do some logic, then reload the extension on your browser.

For further guidance, [visit our Documentation](https://docs.plasmo.com/)

## Making production build

Run the following:

```bash
pnpm build
# or
npm run build
```

This should create a production bundle for your extension, ready to be zipped and published to the stores.

## Submit to the webstores

The easiest way to deploy your Plasmo extension is to use the built-in [bpp](https://bpp.browser.market) GitHub action. Prior to using this action however, make sure to build your extension and upload the first version to the store to establish the basic credentials. Then, simply follow [this setup instruction](https://docs.plasmo.com/framework/workflows/submit) and you should be on your way for automated submission!
Binary file added with-microsoft-clarity/assets/icon.png
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
56 changes: 56 additions & 0 deletions with-microsoft-clarity/background.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import { injectClarity } from "~injectClarity"

/**
* This config is taken from the https://www.clarity.ms/tag/**insertIdHere** script
* Replace all of this config with your own that you get from that URL
* For more information, refer to the README.md
*/
const config = {
projectId: "**replace all of this with your config from the link above**",
upload: "https://t.clarity.ms/collect",
expire: 365,
cookies: ["_uetmsclkid", "_uetvid"],
track: true,
lean: false,
content: true,
dob: 1441
}

const executeClarityInjection = (tabId: number) => {
chrome.scripting.executeScript({
target: { tabId, allFrames: true },
func: injectClarity,
args: [
{
url: chrome.runtime.getURL("resources/clarity.js"),
config,
clarityKey: "clarity"
}
],
injectImmediately: true,
world: "MAIN"
})
}

/**
* This code will inject clarity into www.plasmo.com whenever a user goes to the plasmo site
*/
chrome.tabs.onUpdated.addListener((tabId, changeInfo, tab) => {
console.log("tab updated", tabId, changeInfo, tab, tab.status)
if (
changeInfo.status === "complete" &&
tab.url.startsWith("https://www.plasmo.com/")
) {
console.log("injecting clarity")
executeClarityInjection(tabId)
}
})

/**
* This will inject into whatever page the user is currently on (we can't access "chrome://" pages)
*/
chrome.action.onClicked.addListener((tab) => {
if (!tab.url.includes("chrome://")) {
executeClarityInjection(tab.id)
}
})
65 changes: 65 additions & 0 deletions with-microsoft-clarity/injectClarity.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,65 @@
type InjectClarityType = {
url: string
config: {
projectId: string
upload: string
expire: number
cookies: string[]
track: boolean
lean: boolean
content: boolean
dob: number
}
clarityKey: string
}

export const injectClarity = (data: InjectClarityType) => {
const { url, config, clarityKey } = data

// this code serves the purpose of the original tracking code that you get from clarity
window[clarityKey] = function () {
;(window[clarityKey].q = window[clarityKey].q || []).push([
window,
document,
clarityKey,
"script",
config.projectId
])
}

// this section then serves the purpose of the js file that the tracking code requests
// e.g. https://www.clarity.ms/tag/examplethisisnotreal
const sync = (): void => {
const image = new Image()
image.src = "https://c.clarity.ms/c.gif"
}

if (document.readyState === "complete") {
sync()
} else {
window.addEventListener("load", sync)
}
if (window[clarityKey].v || window[clarityKey].t) {
return window[clarityKey]("event", clarityKey, `dup.${config.projectId}`)
}

window[clarityKey].t = true

// this creates a script tag and injects it into the page, with the local clarity.js file
const scriptElement = document.createElement("script")
scriptElement.setAttribute("type", "text/javascript")
scriptElement.setAttribute("async", "true")
scriptElement.setAttribute("src", url)
scriptElement.setAttribute("id", "ms_clarity")
const head = document.head
head.parentNode.insertBefore(scriptElement, head)

// this callback gets the ball rolling with clarity
scriptElement.onload = (): void => {
window[clarityKey]("start", config)
window[clarityKey].q.unshift(window[clarityKey].q.pop())
window[clarityKey]("set", "C_IS", "0")
}

return undefined
}
53 changes: 53 additions & 0 deletions with-microsoft-clarity/package.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,53 @@
{
"name": "with-microsoft-clarity",
"displayName": "With Microsoft Clarity",
"version": "0.0.1",
"description": "A basic Plasmo extension.",
"author": "Plasmo Corp. <[email protected]>",
"contributors": [
"acorn221"
],
"scripts": {
"dev": "plasmo dev",
"build": "plasmo build",
"test": "plasmo test"
},
"dependencies": {
"@plasmohq/messaging": "workspace:*",
"buffer": "6.0.3",
"events": "3.3.0",
"plasmo": "workspace:*",
"process": "0.11.10",
"react": "18.2.0",
"react-dom": "18.2.0",
"stream-browserify": "3.0.0"
},
"devDependencies": {
"@ianvs/prettier-plugin-sort-imports": "4.1.1",
"@types/chrome": "0.0.251",
"@types/node": "20.9.0",
"@types/react": "18.2.37",
"@types/react-dom": "18.2.15",
"prettier": "3.0.3",
"typescript": "5.2.2"
},
"manifest": {
"host_permissions": [
"https://plasmo.com/*"
],
"web_accessible_resources": [
{
"resources": [
"resources/clarity.js"
],
"matches": [
"<all_urls>"
]
}
],
"permissions": [
"activeTab",
"scripting"
]
}
}
2 changes: 2 additions & 0 deletions with-microsoft-clarity/resources/clarity.js

Large diffs are not rendered by default.

19 changes: 19 additions & 0 deletions with-microsoft-clarity/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
{
"extends": "plasmo/templates/tsconfig.base",
"exclude": [
"node_modules"
],
"include": [
".plasmo/index.d.ts",
"./**/*.ts",
"./**/*.tsx"
],
"compilerOptions": {
"paths": {
"~*": [
"./*"
]
},
"baseUrl": "."
}
}

0 comments on commit 23f10a1

Please sign in to comment.