tlsnotary/tlsn-plugin-boilerplate
1
0
Fork 0
mirror of https://github.com/tlsnotary/tlsn-plugin-boilerplate.git synced 2026-01-08 04:23:52 -05:00
Code Issues Packages Projects Releases Wiki Activity

Added a demo to run the twitter plugin locally (#24)

Browse Source
This commit is contained in:
Hendrik Eeckhaut
2025-07-31 16:52:29 +02:00
committed by GitHub
parent 8738fd6a58
commit 6e871d6e6f
6 changed files with 1822 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
README.md
View File

@@ -31,10 +31,11 @@ This will output the wasm binary in `dist/index.wasm`.
1. Build the `twitter_profile` plugin as explained above.
2. Build and install the `tlsn-extension` as documented in the [main README.md](https://github.com/tlsnotary/tlsn-extension/blob/main/README.md).
3. [Run a local notary server](https://github.com/tlsnotary/tlsn/blob/main/crates/notary/server/README.md).
4. Install the plugin: Click the **Add a Plugin (+)** button and select the `index.wasm` file you built in step 1. A **Twitter Profile** button should then appear below the default buttons.
5. Click the **Twitter Profile** button. This action opens the Twitter webpage along with a TLSNotary sidebar.
6. Follow the steps in the TLSNotary sidebar.
7. Access the TLSNotary results by clicking the **History** button in the TLSNotary extension.
4. Run `npm run serve-demo`
5. Open <http://localhost:8080>
6. Click **accept**. This action opens the Twitter webpage along with a TLSNotary sidebar.
7. Follow the steps in the TLSNotary sidebar.
8. Access the TLSNotary results by clicking the **History** button in the TLSNotary extension.
## Customize the Template

1
demo/.gitignore vendored Normal file
View File

@@ -0,0 +1 @@
*.wasm

2
demo/README.md Normal file
View File

@@ -0,0 +1,2 @@
This folder contains a html to run a local demo server with a tlsnotary plugin.
To run this demo, build the plugin and launch `npm run serve-demo`.

46
demo/index.html Normal file
View File

@@ -0,0 +1,46 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>TLSNotary Plugin test page</title>
</head>
<body>
<h1>TLSNotary Plugin test page</h1>
<p>
This page is used to test the TLSNotary plugin. It will load the TLSNotary client and run a plugin to fetch
Twitter profile information.
</p>
<ol>
<li>A TLSNotary extension popup will open.</li>
<li>Click <strong>accept</strong> to allow the plugin to run.</li>
<li>The plugin will open the <strong>TLSNotary Extension sidebar</strong> and the Twitter web page in a new tab.
</li>
<li>Log in to Twitter if you are not already logged in.</li>
<li>The plugin will then notarize the Twitter profile (with the notary configured in your TLSNotary extension).
</li>
<li>If notarization does not happen automatically, you can click the <strong>Collect credentials</strong> button
in the sidebar.</li>
<li>Once notarization has started, you can close the sidebar and the Twitter tab.</li>
<li>After successful notarization, the raw attestation and metadata will show up on this page.</li>
</ol>
<script>
window.addEventListener('tlsn_loaded', async () => {
try {
const client = await tlsn.connect();
const result = await client.runPlugin(
'http://localhost:8080/twitter_profile.tlsn.wasm'
);
console.dir(result);
document.body.innerHTML += `<pre>${JSON.stringify(result, null, 2)}</pre>`;
} catch (err) {
console.error(err);
document.body.innerHTML += `<pre style="color: red;">${err.message}</pre>`;
}
});
</script>
</body>
</html>

1764
package-lock.json generated
View File

File diff suppressed because it is too large Load Diff

6
package.json
View File

@@ -4,7 +4,8 @@
"description": "Demo TLSNotary plugin to notarize the ownership of a twitter profile",
"main": "src/index.ts",
"scripts": {
"build": "node esbuild.js"
"build": "node esbuild.js",
"serve-demo": "cp dist/*.wasm demo; serve -l 8080 demo"
},
"keywords": [],
"author": "TLSNotary",
@@ -12,6 +13,7 @@
"devDependencies": {
"@extism/js-pdk": "^1.0.1",
"esbuild": "^0.19.6",
"serve": "^14.2.4",
"typescript": "^5.3.2"
}
}
}