-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
chore: copying existing example (#56)
chore: adding clarity.js build feat: injecting clarity into plasmo.com and activeTab docs: created setup tutorial in readme
- Loading branch information
Showing
9 changed files
with
314 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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/(.*)$", | ||
"", | ||
"^~(.*)$", | ||
"", | ||
"^[./]" | ||
] | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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! |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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) | ||
} | ||
}) |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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" | ||
] | ||
} | ||
} |
Large diffs are not rendered by default.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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": "." | ||
} | ||
} |