reya/nostr-connect
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: revert last 3 commits

Browse Source
This commit is contained in:
Ren Amamiya
2026-04-08 10:35:58 +07:00
parent db9e0b43e5
commit 5b7b06ff5d
30 changed files with 36757 additions and 44299 deletions
Download Patch File Download Diff File Expand all files Collapse all files

148
.eslintrc.json Normal file
View File

@@ -0,0 +1,148 @@
{
"root": true,
"parserOptions": {
"ecmaVersion": 2020,
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module",
"allowImportExportEverywhere": false
},
"env": {
"es6": true,
"node": true
},
"plugins": [
"react",
"babel"
],
"globals": {
"document": false,
"navigator": false,
"window": false,
"location": false,
"URL": false,
"URLSearchParams": false,
"fetch": false,
"EventSource": false,
"localStorage": false,
"sessionStorage": false
},
"rules": {
"react/jsx-uses-vars": 2,
"react/jsx-no-undef": 2,
"react/jsx-uses-react": 2,
"accessor-pairs": 2,
"arrow-spacing": [2, { "before": true, "after": true }],
"block-spacing": [2, "always"],
"brace-style": [2, "1tbs", { "allowSingleLine": true }],
"comma-dangle": 0,
"comma-spacing": [2, { "before": false, "after": true }],
"comma-style": [2, "last"],
"constructor-super": 2,
"curly": [0, "multi-line"],
"dot-location": [2, "property"],
"eol-last": 2,
"eqeqeq": [2, "allow-null"],
"generator-star-spacing": [2, { "before": true, "after": true }],
"handle-callback-err": [2, "^(err|error)$" ],
"indent": 0,
"jsx-quotes": [2, "prefer-double"],
"key-spacing": [2, { "beforeColon": false, "afterColon": true }],
"keyword-spacing": [2, { "before": true, "after": true }],
"new-cap": 0,
"new-parens": 0,
"no-array-constructor": 2,
"no-caller": 2,
"no-class-assign": 2,
"no-cond-assign": 2,
"no-const-assign": 2,
"no-control-regex": 0,
"no-debugger": 0,
"no-delete-var": 2,
"no-dupe-args": 2,
"no-dupe-class-members": 2,
"no-dupe-keys": 2,
"no-duplicate-case": 2,
"no-empty-character-class": 2,
"no-empty-pattern": 2,
"no-eval": 0,
"no-ex-assign": 2,
"no-extend-native": 2,
"no-extra-bind": 2,
"no-extra-boolean-cast": 2,
"no-extra-parens": [2, "functions"],
"no-fallthrough": 2,
"no-floating-decimal": 2,
"no-func-assign": 2,
"no-implied-eval": 2,
"no-inner-declarations": [0, "functions"],
"no-invalid-regexp": 2,
"no-irregular-whitespace": 2,
"no-iterator": 2,
"no-label-var": 2,
"no-labels": [2, { "allowLoop": false, "allowSwitch": false }],
"no-lone-blocks": 2,
"no-mixed-spaces-and-tabs": 2,
"no-multi-spaces": 2,
"no-multi-str": 2,
"no-multiple-empty-lines": [2, { "max": 2 }],
"no-native-reassign": 2,
"no-negated-in-lhs": 2,
"no-new": 0,
"no-new-func": 2,
"no-new-object": 2,
"no-new-require": 2,
"no-new-symbol": 2,
"no-new-wrappers": 2,
"no-obj-calls": 2,
"no-octal": 2,
"no-octal-escape": 2,
"no-path-concat": 0,
"no-proto": 2,
"no-redeclare": 2,
"no-regex-spaces": 2,
"no-return-assign": 0,
"no-self-assign": 2,
"no-self-compare": 2,
"no-sequences": 2,
"no-shadow-restricted-names": 2,
"no-spaced-func": 2,
"no-sparse-arrays": 2,
"no-this-before-super": 2,
"no-throw-literal": 2,
"no-trailing-spaces": 2,
"no-undef": 2,
"no-undef-init": 2,
"no-unexpected-multiline": 2,
"no-unneeded-ternary": [2, { "defaultAssignment": false }],
"no-unreachable": 2,
"no-unused-vars": [2, { "vars": "local", "args": "none", "varsIgnorePattern": "^_"}],
"no-useless-call": 2,
"no-useless-constructor": 2,
"no-with": 2,
"one-var": [0, { "initialized": "never" }],
"operator-linebreak": [2, "after", { "overrides": { "?": "before", ":": "before" } }],
"padded-blocks": [2, "never"],
"quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
"semi": [2, "never"],
"semi-spacing": [2, { "before": false, "after": true }],
"space-before-blocks": [2, "always"],
"space-before-function-paren": 0,
"space-in-parens": [2, "never"],
"space-infix-ops": 2,
"space-unary-ops": [2, { "words": true, "nonwords": false }],
"spaced-comment": 0,
"template-curly-spacing": [2, "never"],
"use-isnan": 2,
"valid-typeof": 2,
"wrap-iife": [2, "any"],
"yield-star-spacing": [2, "both"],
"yoda": 0,
"no-unsafe-optional-chaning": 0
}
}

9
.prettierrc.yaml Normal file
View File

@@ -0,0 +1,9 @@
arrowParens: avoid
bracketSpacing: false
jsxBracketSameLine: false
printWidth: 80
proseWrap: preserve
semi: false
singleQuote: true
trailingComma: none
useTabs: false

28
biome.json
View File

@@ -1,28 +0,0 @@
{
"$schema": "https://biomejs.dev/schemas/1.4.1/schema.json",
"organizeImports": {
"enabled": true
},
"files": {
"ignore": []
},
"linter": {
"enabled": true,
"rules": {
"recommended": true,
"style": {
"noNonNullAssertion": "off",
"noUselessElse": "off"
},
"correctness": {
"useExhaustiveDependencies": "off"
},
"a11y": {
"noSvgWithoutTitle": "off"
},
"complexity": {
"noStaticOnlyClass": "off"
}
}
}
}

104
build.js
View File

@@ -1,56 +1,56 @@
#!/usr/bin/env node
import esbuild from "esbuild";
import copy from "esbuild-copy-plugin";
const {copy} = require('esbuild-plugin-copy')
const esbuild = require('esbuild')
const isProd = process.argv.indexOf("prod") !== -1;
const isFirefox = process.argv.indexOf("firefox") !== -1;
const isProd = process.argv.indexOf('prod') !== -1
const isFirefox = process.argv.indexOf('firefox') !== -1
esbuild
.build({
bundle: true,
entryPoints: {
"popup.build": "./extension/popup.tsx",
"prompt.build": "./extension/prompt.tsx",
"options.build": "./extension/options.jsx",
"background.build": "./extension/background.js",
"content-script.build": "./extension/content-script.js",
},
outdir: "./extension/output",
sourcemap: isProd ? false : "inline",
define: {
window: "self",
global: "self",
},
plugins: [
copy({
assets: [
{
from: [
isFirefox
? "./extension/firefox/manifest.json"
: "./extension/chrome/manifest.json",
],
to: ["./"],
},
{
from: ["./extension/*.html"],
to: ["./"],
},
{
from: ["./extension/common.js"],
to: ["./"],
},
{
from: ["./extension/nostr-provider.js"],
to: ["./"],
},
{
from: ["./extension/icons/*"],
to: ["./icons"],
},
],
}),
],
})
.then(() => console.log("Build success."))
.catch((err) => console.error("Build error.", err));
.build({
bundle: true,
entryPoints: {
'popup.build': './extension/popup.jsx',
'prompt.build': './extension/prompt.jsx',
'options.build': './extension/options.jsx',
'background.build': './extension/background.js',
'content-script.build': './extension/content-script.js'
},
outdir: './extension/output',
sourcemap: isProd ? false : 'inline',
define: {
window: 'self',
global: 'self'
},
plugins: [
copy({
assets: [
{
from: [
isFirefox
? './extension/firefox/manifest.json'
: './extension/chrome/manifest.json'
],
to: ['./']
},
{
from: ['./extension/*.html'],
to: ['./']
},
{
from: ['./extension/common.js'],
to: ['./']
},
{
from: ['./extension/nostr-provider.js'],
to: ['./']
},
{
from: ['./extension/icons/*'],
to: ['./icons']
}
]
})
]
})
.then(() => console.log('Build success.'))
.catch(err => console.error('Build error.', err))

384
extension/background.js
View File

@@ -1,227 +1,225 @@
import { Mutex } from "async-mutex";
import browser from 'webextension-polyfill'
import {
getEventHash,
getPublicKey,
getSignature,
nip19,
validateEvent,
} from "nostr-tools";
import { nip04 } from "nostr-tools";
import browser from "webextension-polyfill";
validateEvent,
getSignature,
getEventHash,
getPublicKey,
nip19
} from 'nostr-tools'
import {nip04} from 'nostr-tools'
import {Mutex} from 'async-mutex'
import {
NO_PERMISSIONS_REQUIRED,
getPermissionStatus,
showNotification,
updatePermission,
} from "./common";
NO_PERMISSIONS_REQUIRED,
getPermissionStatus,
updatePermission,
showNotification
} from './common'
const { encrypt, decrypt } = nip04;
const {encrypt, decrypt} = nip04
let openPrompt = null;
const promptMutex = new Mutex();
let releasePromptMutex = () => {};
let openPrompt = null
let promptMutex = new Mutex()
let releasePromptMutex = () => {}
browser.runtime.onInstalled.addListener((_, __, reason) => {
if (reason === "install") browser.runtime.openOptionsPage();
});
if (reason === 'install') browser.runtime.openOptionsPage()
})
browser.runtime.onMessage.addListener(async (req, sender) => {
const { prompt } = req;
let {prompt} = req
if (prompt) {
handlePromptMessage(req, sender);
} else {
return handleContentScriptMessage(req);
}
});
if (prompt) {
handlePromptMessage(req, sender)
} else {
return handleContentScriptMessage(req)
}
})
browser.runtime.onMessageExternal.addListener(
async ({ type, params }, sender) => {
const extensionId = new URL(sender.url).host;
return handleContentScriptMessage({ type, params, host: extensionId });
},
);
async ({type, params}, sender) => {
let extensionId = new URL(sender.url).host
return handleContentScriptMessage({type, params, host: extensionId})
}
)
browser.windows.onRemoved.addListener((windowId) => {
if (openPrompt) {
// calling this with a simple "no" response will not store anything, so it's fine
// it will just return a failure
handlePromptMessage({ accept: false }, null);
}
});
browser.windows.onRemoved.addListener(windowId => {
if (openPrompt) {
// calling this with a simple "no" response will not store anything, so it's fine
// it will just return a failure
handlePromptMessage({accept: false}, null)
}
})
async function handleContentScriptMessage({ type, params, host }) {
if (NO_PERMISSIONS_REQUIRED[type]) {
// authorized, and we won't do anything with private key here, so do a separate handler
switch (type) {
case "replaceURL": {
const { protocol_handler: ph } = await browser.storage.local.get([
"protocol_handler",
]);
if (!ph) return false;
async function handleContentScriptMessage({type, params, host}) {
if (NO_PERMISSIONS_REQUIRED[type]) {
// authorized, and we won't do anything with private key here, so do a separate handler
switch (type) {
case 'replaceURL': {
let {protocol_handler: ph} = await browser.storage.local.get([
'protocol_handler'
])
if (!ph) return false
const { url } = params;
const raw = url.split("nostr:")[1];
const { type, data } = nip19.decode(raw);
const replacements = {
raw,
hrp: type,
hex:
type === "npub" || type === "note"
? data
: type === "nprofile"
? data.pubkey
: type === "nevent"
? data.id
: null,
p_or_e: { npub: "p", note: "e", nprofile: "p", nevent: "e" }[type],
u_or_n: { npub: "u", note: "n", nprofile: "u", nevent: "n" }[type],
relay0: type === "nprofile" ? data.relays[0] : null,
relay1: type === "nprofile" ? data.relays[1] : null,
relay2: type === "nprofile" ? data.relays[2] : null,
};
let result = ph;
// biome-ignore lint/complexity/noForEach: TODO: fix this
Object.entries(replacements).forEach(([pattern, value]) => {
result = result.replace(new RegExp(`{ *${pattern} *}`, "g"), value);
});
let {url} = params
let raw = url.split('nostr:')[1]
let {type, data} = nip19.decode(raw)
let replacements = {
raw,
hrp: type,
hex:
type === 'npub' || type === 'note'
? data
: type === 'nprofile'
? data.pubkey
: type === 'nevent'
? data.id
: null,
p_or_e: {npub: 'p', note: 'e', nprofile: 'p', nevent: 'e'}[type],
u_or_n: {npub: 'u', note: 'n', nprofile: 'u', nevent: 'n'}[type],
relay0: type === 'nprofile' ? data.relays[0] : null,
relay1: type === 'nprofile' ? data.relays[1] : null,
relay2: type === 'nprofile' ? data.relays[2] : null
}
let result = ph
Object.entries(replacements).forEach(([pattern, value]) => {
result = result.replace(new RegExp(`{ *${pattern} *}`, 'g'), value)
})
return result;
}
}
return result
}
}
return;
} else {
// acquire mutex here before reading policies
releasePromptMutex = await promptMutex.acquire();
return
} else {
// acquire mutex here before reading policies
releasePromptMutex = await promptMutex.acquire()
const allowed = await getPermissionStatus(
host,
type,
type === "signEvent" ? params.event : undefined,
);
let allowed = await getPermissionStatus(
host,
type,
type === 'signEvent' ? params.event : undefined
)
if (allowed === true) {
// authorized, proceed
releasePromptMutex();
showNotification(host, allowed, type, params);
} else if (allowed === false) {
// denied, just refuse immediately
releasePromptMutex();
showNotification(host, allowed, type, params);
return {
error: "denied",
};
} else {
// ask for authorization
try {
const id = Math.random().toString().slice(4);
const qs = new URLSearchParams({
host,
id,
params: JSON.stringify(params),
type,
});
if (allowed === true) {
// authorized, proceed
releasePromptMutex()
showNotification(host, allowed, type, params)
} else if (allowed === false) {
// denied, just refuse immediately
releasePromptMutex()
showNotification(host, allowed, type, params)
return {
error: 'denied'
}
} else {
// ask for authorization
try {
let id = Math.random().toString().slice(4)
let qs = new URLSearchParams({
host,
id,
params: JSON.stringify(params),
type
})
// prompt will be resolved with true or false
const accept = await new Promise((resolve, reject) => {
openPrompt = { resolve, reject };
const url = `${browser.runtime.getURL(
"prompt.html",
)}?${qs.toString()}`;
// prompt will be resolved with true or false
let accept = await new Promise((resolve, reject) => {
openPrompt = {resolve, reject}
const url = `${browser.runtime.getURL(
'prompt.html'
)}?${qs.toString()}`
if (browser.windows) {
browser.windows.create({
url,
type: "popup",
width: 600,
height: 600,
});
} else {
browser.tabs.create({
url,
active: true,
});
}
});
if (browser.windows) {
browser.windows.create({
url,
type: 'popup',
width: 600,
height: 600
})
} else {
browser.tabs.create({
url,
active: true
})
}
})
// denied, stop here
if (!accept) return { error: "denied" };
} catch (err) {
// errored, stop here
releasePromptMutex();
return {
error: `error: ${err}`,
};
}
}
}
// denied, stop here
if (!accept) return {error: 'denied'}
} catch (err) {
// errored, stop here
releasePromptMutex()
return {
error: `error: ${err}`
}
}
}
}
// if we're here this means it was accepted
const results = await browser.storage.local.get("private_key");
if (!results || !results.private_key) {
return { error: "no private key found" };
}
// if we're here this means it was accepted
let results = await browser.storage.local.get('private_key')
if (!results || !results.private_key) {
return {error: 'no private key found'}
}
const sk = results.private_key;
let sk = results.private_key
try {
switch (type) {
case "getPublicKey": {
return getPublicKey(sk);
}
case "getRelays": {
const results = await browser.storage.local.get("relays");
return results.relays || {};
}
case "signEvent": {
const { event } = params;
try {
switch (type) {
case 'getPublicKey': {
return getPublicKey(sk)
}
case 'getRelays': {
let results = await browser.storage.local.get('relays')
return results.relays || {}
}
case 'signEvent': {
let {event} = params
if (!event.pubkey) event.pubkey = getPublicKey(sk);
if (!event.id) event.id = getEventHash(event);
if (!validateEvent(event))
return { error: { message: "invalid event" } };
if (!event.pubkey) event.pubkey = getPublicKey(sk)
if (!event.id) event.id = getEventHash(event)
if (!validateEvent(event)) return {error: {message: 'invalid event'}}
event.sig = await getSignature(event, sk);
return event;
}
case "nip04.encrypt": {
const { peer, plaintext } = params;
return encrypt(sk, peer, plaintext);
}
case "nip04.decrypt": {
const { peer, ciphertext } = params;
return decrypt(sk, peer, ciphertext);
}
}
} catch (error) {
return { error: { message: error.message, stack: error.stack } };
}
event.sig = await getSignature(event, sk)
return event
}
case 'nip04.encrypt': {
let {peer, plaintext} = params
return encrypt(sk, peer, plaintext)
}
case 'nip04.decrypt': {
let {peer, ciphertext} = params
return decrypt(sk, peer, ciphertext)
}
}
} catch (error) {
return {error: {message: error.message, stack: error.stack}}
}
}
async function handlePromptMessage({ host, type, accept, conditions }, sender) {
// return response
openPrompt?.resolve?.(accept);
async function handlePromptMessage({host, type, accept, conditions}, sender) {
// return response
openPrompt?.resolve?.(accept)
// update policies
if (conditions) {
await updatePermission(host, type, accept, conditions);
}
// update policies
if (conditions) {
await updatePermission(host, type, accept, conditions)
}
// cleanup this
openPrompt = null;
// cleanup this
openPrompt = null
// release mutex here after updating policies
releasePromptMutex();
// release mutex here after updating policies
releasePromptMutex()
// close prompt
if (sender) {
if (browser.windows) {
browser.windows.remove(sender.tab.windowId);
} else {
// Android Firefox
browser.tabs.remove(sender.tab.id);
}
}
// close prompt
if (sender) {
if (browser.windows) {
browser.windows.remove(sender.tab.windowId)
} else {
// Android Firefox
browser.tabs.remove(sender.tab.id)
}
}
}

1137
extension/build/style.css
View File

File diff suppressed because it is too large Load Diff

68
extension/chrome/manifest.json
View File

@@ -1,36 +1,36 @@
{
"name": "Nostr Connect",
"description": "Nostr Signer Extension",
"version": "0.1.2",
"homepage_url": "https://github.com/reyamir/nostr-connect",
"manifest_version": 3,
"icons": {
"16": "icons/icon16.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"options_page": "options.html",
"background": {
"service_worker": "background.build.js"
},
"action": {
"default_title": "Nostr Connect",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.build.js"],
"all_frames": true
}
],
"permissions": ["storage"],
"optional_permissions": ["notifications"],
"web_accessible_resources": [
{
"resources": ["nostr-provider.js"],
"matches": ["https://*/*", "http://localhost:*/*"]
}
]
"name": "Nostr Connect",
"description": "Nostr Signer Extension",
"version": "0.1.2",
"homepage_url": "https://github.com/reyamir/nostr-connect",
"manifest_version": 3,
"icons": {
"16": "icons/icon16.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"options_page": "options.html",
"background": {
"service_worker": "background.build.js"
},
"action": {
"default_title": "Nostr Connect",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.build.js"],
"all_frames": true
}
],
"permissions": ["storage"],
"optional_permissions": ["notifications"],
"web_accessible_resources": [
{
"resources": ["nostr-provider.js"],
"matches": ["https://*/*", "http://localhost:*/*"]
}
]
}

180
extension/common.js
View File

@@ -1,118 +1,116 @@
import browser from "webextension-polyfill";
import browser from 'webextension-polyfill'
export const NO_PERMISSIONS_REQUIRED = {
replaceURL: true,
};
replaceURL: true
}
export const PERMISSION_NAMES = Object.fromEntries([
["getPublicKey", "read your public key"],
["getRelays", "read your list of preferred relays"],
["signEvent", "sign events using your private key"],
["nip04.encrypt", "encrypt messages to peers"],
["nip04.decrypt", "decrypt messages from peers"],
]);
['getPublicKey', 'read your public key'],
['getRelays', 'read your list of preferred relays'],
['signEvent', 'sign events using your private key'],
['nip04.encrypt', 'encrypt messages to peers'],
['nip04.decrypt', 'decrypt messages from peers']
])
function matchConditions(conditions, event) {
if (conditions?.kinds) {
if (event.kind in conditions.kinds) return true;
else return false;
}
if (conditions?.kinds) {
if (event.kind in conditions.kinds) return true
else return false
}
return true;
return true
}
export async function getPermissionStatus(host, type, event) {
const { policies } = await browser.storage.local.get("policies");
let {policies} = await browser.storage.local.get('policies')
const answers = [true, false];
for (let i = 0; i < answers.length; i++) {
const accept = answers[i];
const { conditions } = policies?.[host]?.[accept]?.[type] || {};
let answers = [true, false]
for (let i = 0; i < answers.length; i++) {
let accept = answers[i]
let {conditions} = policies?.[host]?.[accept]?.[type] || {}
if (conditions) {
if (type === "signEvent") {
if (matchConditions(conditions, event)) {
return accept; // may be true or false
} else {
// if this doesn't match we just continue so it will either match for the opposite answer (reject)
// or it will end up returning undefined at the end
// biome-ignore lint/correctness/noUnnecessaryContinue: <explanation>
continue;
}
} else {
return accept; // may be true or false
}
}
}
if (conditions) {
if (type === 'signEvent') {
if (matchConditions(conditions, event)) {
return accept // may be true or false
} else {
// if this doesn't match we just continue so it will either match for the opposite answer (reject)
// or it will end up returning undefined at the end
continue
}
} else {
return accept // may be true or false
}
}
}
return undefined;
return undefined
}
export async function updatePermission(host, type, accept, conditions) {
const { policies = {} } = await browser.storage.local.get("policies");
let {policies = {}} = await browser.storage.local.get('policies')
// if the new conditions is "match everything", override the previous
if (Object.keys(conditions).length === 0) {
conditions = {};
} else {
// if we already had a policy for this, merge the conditions
const existingConditions = policies[host]?.[accept]?.[type]?.conditions;
// if the new conditions is "match everything", override the previous
if (Object.keys(conditions).length === 0) {
conditions = {}
} else {
// if we already had a policy for this, merge the conditions
let existingConditions = policies[host]?.[accept]?.[type]?.conditions
if (existingConditions) {
if (existingConditions.kinds && conditions.kinds) {
Object.keys(existingConditions.kinds).forEach(kind => {
conditions.kinds[kind] = true
})
}
}
}
if (existingConditions) {
if (existingConditions.kinds && conditions.kinds) {
Object.keys(existingConditions.kinds).forEach((kind) => {
conditions.kinds[kind] = true;
});
}
}
}
// if we have a reverse policy (accept / reject) that is exactly equal to this, remove it
let other = !accept
let reverse = policies?.[host]?.[other]?.[type]
if (
reverse &&
JSON.stringify(reverse.conditions) === JSON.stringify(conditions)
) {
delete policies[host][other][type]
}
// if we have a reverse policy (accept / reject) that is exactly equal to this, remove it
const other = !accept;
const reverse = policies?.[host]?.[other]?.[type];
if (
reverse &&
JSON.stringify(reverse.conditions) === JSON.stringify(conditions)
) {
delete policies[host][other][type];
}
// insert our new policy
policies[host] = policies[host] || {}
policies[host][accept] = policies[host][accept] || {}
policies[host][accept][type] = {
conditions, // filter that must match the event (in case of signEvent)
created_at: Math.round(Date.now() / 1000)
}
// insert our new policy
policies[host] = policies[host] || {};
policies[host][accept] = policies[host][accept] || {};
policies[host][accept][type] = {
conditions, // filter that must match the event (in case of signEvent)
created_at: Math.round(Date.now() / 1000),
};
browser.storage.local.set({ policies });
browser.storage.local.set({policies})
}
export async function removePermissions(host, accept, type) {
const { policies = {} } = await browser.storage.local.get("policies");
delete policies[host]?.[accept]?.[type];
browser.storage.local.set({ policies });
let {policies = {}} = await browser.storage.local.get('policies')
delete policies[host]?.[accept]?.[type]
browser.storage.local.set({policies})
}
export async function showNotification(host, answer, type, params) {
const ok = await browser.storage.local.get("notifications");
if (ok) {
const action = answer ? "allowed" : "denied";
browser.notifications.create(undefined, {
type: "basic",
title: `${type} ${action} for ${host}`,
message: JSON.stringify(
params?.event
? {
kind: params.event.kind,
content: params.event.content,
tags: params.event.tags,
}
: params,
null,
2,
),
iconUrl: "icons/48x48.png",
});
}
let ok = await browser.storage.local.get('notifications')
if (ok) {
let action = answer ? 'allowed' : 'denied'
browser.notifications.create(undefined, {
type: 'basic',
title: `${type} ${action} for ${host}`,
message: JSON.stringify(
params?.event
? {
kind: params.event.kind,
content: params.event.content,
tags: params.event.tags
}
: params,
null,
2
),
iconUrl: 'icons/48x48.png'
})
}
}

59
extension/content-script.js
View File

@@ -1,37 +1,36 @@
import browser from "webextension-polyfill";
import browser from 'webextension-polyfill'
const EXTENSION = "nostrconnect";
const EXTENSION = 'nostrconnect'
// inject the script that will provide window.nostr
const script = document.createElement("script");
script.setAttribute("async", "false");
script.setAttribute("type", "text/javascript");
script.setAttribute("src", browser.runtime.getURL("nostr-provider.js"));
document.head.appendChild(script);
let script = document.createElement('script')
script.setAttribute('async', 'false')
script.setAttribute('type', 'text/javascript')
script.setAttribute('src', browser.runtime.getURL('nostr-provider.js'))
document.head.appendChild(script)
// listen for messages from that script
window.addEventListener("message", async (message) => {
if (message.source !== window) return;
if (!message.data) return;
if (!message.data.params) return;
if (message.data.ext !== EXTENSION) return;
window.addEventListener('message', async message => {
if (message.source !== window) return
if (!message.data) return
if (!message.data.params) return
if (message.data.ext !== EXTENSION) return
// pass on to background
let response;
// pass on to background
var response
try {
response = await browser.runtime.sendMessage({
type: message.data.type,
params: message.data.params,
host: location.host
})
} catch (error) {
response = {error}
}
try {
response = await browser.runtime.sendMessage({
type: message.data.type,
params: message.data.params,
host: location.host,
});
} catch (error) {
response = { error };
}
// return response
window.postMessage(
{ id: message.data.id, ext: EXTENSION, response },
message.origin,
);
});
// return response
window.postMessage(
{id: message.data.id, ext: EXTENSION, response},
message.origin
)
})

66
extension/firefox/manifest.json
View File

@@ -1,35 +1,35 @@
{
"name": "Nostr Connect",
"description": "Nostr Signer Extension",
"version": "0.1.2",
"homepage_url": "https://github.com/reyamir/nostr-connect",
"manifest_version": 2,
"browser_specific_settings": {
"gecko": {
"id": "{e665d138-0e5b-4b7a-ab91-7af834eda7a2}"
}
},
"icons": {
"16": "icons/icon16.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"options_page": "options.html",
"background": {
"scripts": ["background.build.js"]
},
"browser_action": {
"default_title": "Nostr Connect",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.build.js"]
}
],
"permissions": ["storage"],
"optional_permissions": ["notifications"],
"web_accessible_resources": ["nostr-provider.js"]
"name": "Nostr Connect",
"description": "Nostr Signer Extension",
"version": "0.1.2",
"homepage_url": "https://github.com/reyamir/nostr-connect",
"manifest_version": 2,
"browser_specific_settings": {
"gecko": {
"id": "{e665d138-0e5b-4b7a-ab91-7af834eda7a2}"
}
},
"icons": {
"16": "icons/icon16.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"options_page": "options.html",
"background": {
"scripts": ["background.build.js"]
},
"browser_action": {
"default_title": "Nostr Connect",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.build.js"]
}
],
"permissions": ["storage"],
"optional_permissions": ["notifications"],
"web_accessible_resources": ["nostr-provider.js"]
}

7
extension/global.d.ts vendored
View File

@@ -1,7 +0,0 @@
import type { WindowNostr } from "nostr-tools/nip07";
declare global {
interface Window {
nostr?: WindowNostr;
}
}

151
extension/icons.jsx
View File

@@ -1,76 +1,87 @@
import React from "react";
import React from 'react'
export function LogoIcon() {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<rect width="56" height="56" fill="#EEECFD" rx="16" />
<rect
width="55"
height="55"
x="0.5"
y="0.5"
stroke="#5A41F4"
strokeOpacity="0.25"
rx="15.5"
/>
<rect
width="39"
height="39"
x="8.5"
y="8.5"
fill="url(#paint0_linear_24_2379)"
rx="19.5"
/>
<rect width="39" height="39" x="8.5" y="8.5" stroke="#6149F6" rx="19.5" />
<g fill="#fff" stroke="#6149F6" clipPath="url(#clip0_24_2379)">
<path d="M23.78 20.634l.408-.235-.21-.422a4.432 4.432 0 01-.458-1.797l-.031-.78-.696.355A11.533 11.533 0 0016.5 27.998h0V28c.002.87.103 1.738.302 2.585a3.525 3.525 0 102.843-1.058A8.377 8.377 0 0119.5 28a8.523 8.523 0 014.28-7.366zM36.5 28.023v.468l.467.03c.621.042 1.227.212 1.778.5l.687.36.044-.774.005-.075c.01-.166.02-.349.02-.532v-.001a11.524 11.524 0 00-8.142-10.99 3.526 3.526 0 10-.501 2.989A8.524 8.524 0 0136.5 28s0 0 0 0v.022zM33.185 32.622a3.49 3.49 0 00.311 1.844 8.442 8.442 0 01-9.766.877l-.407-.239-.262.392c-.343.514-.79.95-1.311 1.282l-.652.414.645.425a11.39 11.39 0 0014.092-1.23c.264.069.536.107.81.113h.01a3.5 3.5 0 002.803-5.6h.556l-1.603-.932a3.49 3.49 0 00-5.226 2.654z" />
</g>
<defs>
<linearGradient
id="paint0_linear_24_2379"
x1="28"
x2="28"
y1="8"
y2="48"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8E7CFF" />
<stop offset="1" stopColor="#5A41F4" />
</linearGradient>
<clipPath id="clip0_24_2379">
<path fill="#fff" d="M0 0H24V24H0z" transform="translate(16 15)" />
</clipPath>
</defs>
</svg>
);
return (
<svg
xmlns="http://www.w3.org/2000/svg"
width="56"
height="56"
fill="none"
viewBox="0 0 56 56"
>
<rect width="56" height="56" fill="#EEECFD" rx="16"></rect>
<rect
width="55"
height="55"
x="0.5"
y="0.5"
stroke="#5A41F4"
strokeOpacity="0.25"
rx="15.5"
></rect>
<rect
width="39"
height="39"
x="8.5"
y="8.5"
fill="url(#paint0_linear_24_2379)"
rx="19.5"
></rect>
<rect
width="39"
height="39"
x="8.5"
y="8.5"
stroke="#6149F6"
rx="19.5"
></rect>
<g fill="#fff" stroke="#6149F6" clipPath="url(#clip0_24_2379)">
<path d="M23.78 20.634l.408-.235-.21-.422a4.432 4.432 0 01-.458-1.797l-.031-.78-.696.355A11.533 11.533 0 0016.5 27.998h0V28c.002.87.103 1.738.302 2.585a3.525 3.525 0 102.843-1.058A8.377 8.377 0 0119.5 28a8.523 8.523 0 014.28-7.366zM36.5 28.023v.468l.467.03c.621.042 1.227.212 1.778.5l.687.36.044-.774.005-.075c.01-.166.02-.349.02-.532v-.001a11.524 11.524 0 00-8.142-10.99 3.526 3.526 0 10-.501 2.989A8.524 8.524 0 0136.5 28s0 0 0 0v.022zM33.185 32.622a3.49 3.49 0 00.311 1.844 8.442 8.442 0 01-9.766.877l-.407-.239-.262.392c-.343.514-.79.95-1.311 1.282l-.652.414.645.425a11.39 11.39 0 0014.092-1.23c.264.069.536.107.81.113h.01a3.5 3.5 0 002.803-5.6h.556l-1.603-.932a3.49 3.49 0 00-5.226 2.654z"></path>
</g>
<defs>
<linearGradient
id="paint0_linear_24_2379"
x1="28"
x2="28"
y1="8"
y2="48"
gradientUnits="userSpaceOnUse"
>
<stop stopColor="#8E7CFF"></stop>
<stop offset="1" stopColor="#5A41F4"></stop>
</linearGradient>
<clipPath id="clip0_24_2379">
<path
fill="#fff"
d="M0 0H24V24H0z"
transform="translate(16 15)"
></path>
</clipPath>
</defs>
</svg>
)
}
export function SettingsIcon(props) {
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
{...props}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
);
return (
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
{...props}
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M9.594 3.94c.09-.542.56-.94 1.11-.94h2.593c.55 0 1.02.398 1.11.94l.213 1.281c.063.374.313.686.645.87.074.04.147.083.22.127.324.196.72.257 1.075.124l1.217-.456a1.125 1.125 0 011.37.49l1.296 2.247a1.125 1.125 0 01-.26 1.431l-1.003.827c-.293.24-.438.613-.431.992a6.759 6.759 0 010 .255c-.007.378.138.75.43.99l1.005.828c.424.35.534.954.26 1.43l-1.298 2.247a1.125 1.125 0 01-1.369.491l-1.217-.456c-.355-.133-.75-.072-1.076.124a6.57 6.57 0 01-.22.128c-.331.183-.581.495-.644.869l-.213 1.28c-.09.543-.56.941-1.11.941h-2.594c-.55 0-1.02-.398-1.11-.94l-.213-1.281c-.062-.374-.312-.686-.644-.87a6.52 6.52 0 01-.22-.127c-.325-.196-.72-.257-1.076-.124l-1.217.456a1.125 1.125 0 01-1.369-.49l-1.297-2.247a1.125 1.125 0 01.26-1.431l1.004-.827c.292-.24.437-.613.43-.992a6.932 6.932 0 010-.255c.007-.378-.138-.75-.43-.99l-1.004-.828a1.125 1.125 0 01-.26-1.43l1.297-2.247a1.125 1.125 0 011.37-.491l1.216.456c.356.133.751.072 1.076-.124.072-.044.146-.087.22-.128.332-.183.582-.495.644-.869l.214-1.281z"
/>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"
/>
</svg>
)
}

186
extension/nostr-provider.js
View File

@@ -1,108 +1,114 @@
const EXTENSION = "nostrconnect";
const EXTENSION = 'nostrconnect'
window.nostr = {
_requests: {},
_pubkey: null,
_requests: {},
_pubkey: null,
async getPublicKey() {
if (this._pubkey) return this._pubkey;
this._pubkey = await this._call("getPublicKey", {});
return this._pubkey;
},
async getPublicKey() {
if (this._pubkey) return this._pubkey
this._pubkey = await this._call('getPublicKey', {})
return this._pubkey
},
async signEvent(event) {
return this._call("signEvent", { event });
},
async signEvent(event) {
return this._call('signEvent', {event})
},
async getRelays() {
return this._call("getRelays", {});
},
async getRelays() {
return this._call('getRelays', {})
},
nip04: {
async encrypt(peer, plaintext) {
return window.nostr._call("nip04.encrypt", { peer, plaintext });
},
nip04: {
async encrypt(peer, plaintext) {
return window.nostr._call('nip04.encrypt', {peer, plaintext})
},
async decrypt(peer, ciphertext) {
return window.nostr._call("nip04.decrypt", { peer, ciphertext });
},
},
async decrypt(peer, ciphertext) {
return window.nostr._call('nip04.decrypt', {peer, ciphertext})
}
},
_call(type, params) {
const id = Math.random().toString().slice(-4);
console.log(
`%c[nostrconnect:%c${id}%c]%c calling %c${type}%c with %c${JSON.stringify(params || {})}`,
"background-color:#f1b912;font-weight:bold;color:white",
"background-color:#f1b912;font-weight:bold;color:#a92727",
"background-color:#f1b912;color:white;font-weight:bold",
"color:auto",
"font-weight:bold;color:#08589d;font-family:monospace",
"color:auto",
"font-weight:bold;color:#90b12d;font-family:monospace",
);
return new Promise((resolve, reject) => {
this._requests[id] = { resolve, reject };
window.postMessage(
{
id,
ext: EXTENSION,
type,
params,
},
"*",
);
});
},
};
_call(type, params) {
let id = Math.random().toString().slice(-4)
console.log(
'%c[nostrconnect:%c' +
id +
'%c]%c calling %c' +
type +
'%c with %c' +
JSON.stringify(params || {}),
'background-color:#f1b912;font-weight:bold;color:white',
'background-color:#f1b912;font-weight:bold;color:#a92727',
'background-color:#f1b912;color:white;font-weight:bold',
'color:auto',
'font-weight:bold;color:#08589d;font-family:monospace',
'color:auto',
'font-weight:bold;color:#90b12d;font-family:monospace'
)
return new Promise((resolve, reject) => {
this._requests[id] = {resolve, reject}
window.postMessage(
{
id,
ext: EXTENSION,
type,
params
},
'*'
)
})
}
}
window.addEventListener("message", (message) => {
if (
!message.data ||
message.data.response === null ||
message.data.response === undefined ||
message.data.ext !== EXTENSION ||
!window.nostr._requests[message.data.id]
)
return;
window.addEventListener('message', message => {
if (
!message.data ||
message.data.response === null ||
message.data.response === undefined ||
message.data.ext !== EXTENSION ||
!window.nostr._requests[message.data.id]
)
return
if (message.data.response.error) {
const error = new Error(
`${EXTENSION}: ${message.data.response.error.message}`,
);
error.stack = message.data.response.error.stack;
window.nostr._requests[message.data.id].reject(error);
} else {
window.nostr._requests[message.data.id].resolve(message.data.response);
}
if (message.data.response.error) {
let error = new Error(
`${EXTENSION}: ` + message.data.response.error.message
)
error.stack = message.data.response.error.stack
window.nostr._requests[message.data.id].reject(error)
} else {
window.nostr._requests[message.data.id].resolve(message.data.response)
}
console.log(
`%c[nostrconnect:%c${message.data.id}%c]%c result: %c${JSON.stringify(
message?.data?.response || message?.data?.response?.error?.message || {},
)}`,
"background-color:#f1b912;font-weight:bold;color:white",
"background-color:#f1b912;font-weight:bold;color:#a92727",
"background-color:#f1b912;color:white;font-weight:bold",
"color:auto",
"font-weight:bold;color:#08589d",
);
console.log(
'%c[nostrconnect:%c' +
message.data.id +
'%c]%c result: %c' +
JSON.stringify(
message?.data?.response || message?.data?.response?.error?.message || {}
),
'background-color:#f1b912;font-weight:bold;color:white',
'background-color:#f1b912;font-weight:bold;color:#a92727',
'background-color:#f1b912;color:white;font-weight:bold',
'color:auto',
'font-weight:bold;color:#08589d'
)
delete window.nostr._requests[message.data.id];
});
delete window.nostr._requests[message.data.id]
})
// hack to replace nostr:nprofile.../etc links with something else
let replacing = null;
document.addEventListener("mousedown", replaceNostrSchemeLink);
let replacing = null
document.addEventListener('mousedown', replaceNostrSchemeLink)
async function replaceNostrSchemeLink(e) {
if (e.target.tagName !== "A" || !e.target.href.startsWith("nostr:")) return;
if (replacing === false) return;
if (e.target.tagName !== 'A' || !e.target.href.startsWith('nostr:')) return
if (replacing === false) return
const response = await window.nostr._call("replaceURL", {
url: e.target.href,
});
if (response === false) {
replacing = false;
return;
}
let response = await window.nostr._call('replaceURL', {url: e.target.href})
if (response === false) {
replacing = false
return
}
e.target.href = response;
e.target.href = response
}

676
extension/options.jsx Normal file
View File

@@ -0,0 +1,676 @@
import browser from 'webextension-polyfill'
import React, {useState, useCallback, useEffect} from 'react'
import {render} from 'react-dom'
import {generatePrivateKey, nip19} from 'nostr-tools'
import QRCode from 'react-qr-code'
import * as Tabs from '@radix-ui/react-tabs'
import {LogoIcon} from './icons'
import {removePermissions} from './common'
import * as Checkbox from '@radix-ui/react-checkbox'
function Options() {
let [privKey, setPrivKey] = useState('')
let [relays, setRelays] = useState([])
let [newRelayURL, setNewRelayURL] = useState('')
let [policies, setPermissions] = useState([])
let [protocolHandler, setProtocolHandler] = useState('https://njump.me/{raw}')
let [hidingPrivateKey, hidePrivateKey] = useState(true)
let [showNotifications, setNotifications] = useState(false)
let [messages, setMessages] = useState([])
let [handleNostrLinks, setHandleNostrLinks] = useState(false)
let [showProtocolHandlerHelp, setShowProtocolHandlerHelp] = useState(false)
let [unsavedChanges, setUnsavedChanges] = useState([])
const showMessage = useCallback(msg => {
messages.push(msg)
setMessages(messages)
setTimeout(() => setMessages([]), 3000)
})
useEffect(() => {
browser.storage.local
.get(['private_key', 'relays', 'protocol_handler', 'notifications'])
.then(results => {
if (results.private_key) {
setPrivKey(nip19.nsecEncode(results.private_key))
}
if (results.relays) {
let relaysList = []
for (let url in results.relays) {
relaysList.push({
url,
policy: results.relays[url]
})
}
setRelays(relaysList)
}
if (results.protocol_handler) {
setProtocolHandler(results.protocol_handler)
setHandleNostrLinks(true)
setShowProtocolHandlerHelp(false)
}
if (results.notifications) {
setNotifications(true)
}
})
}, [])
useEffect(() => {
loadPermissions()
}, [])
async function loadPermissions() {
let {policies = {}} = await browser.storage.local.get('policies')
let list = []
Object.entries(policies).forEach(([host, accepts]) => {
Object.entries(accepts).forEach(([accept, types]) => {
Object.entries(types).forEach(([type, {conditions, created_at}]) => {
list.push({
host,
type,
accept,
conditions,
created_at
})
})
})
})
setPermissions(list)
}
return (
<div className="w-screen h-screen flex flex-col items-center justify-center">
<div className="p-8 shadow-primary border border-primary rounded-2xl max-w-xl mx-auto flex flex-col gap-4">
<div className="flex items-center gap-4">
<LogoIcon />
<div>
<h1 className="text-lg font-semibold">Nostr Connect</h1>
<p className="text-sm text-muted font-medium">Nostr signer</p>
</div>
</div>
<div className="flex flex-col">
<div className="mb-4 flex flex-col gap-2">
<div className="font-semibold text-base">Private key:</div>
<div>
<div className="flex gap-2">
<input
type={hidingPrivateKey ? 'password' : 'text'}
value={privKey}
onChange={handleKeyChange}
className="flex-1 h-9 bg-transparent border border-primary px-3 py-1 rounded-lg"
/>
<div className="shrink-0">
{!privKey && (
<button
type="button"
onClick={generate}
className="px-3 h-9 font-semibold border w-24 border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
>
Generate
</button>
)}
{privKey && hidingPrivateKey && (
<button
type="button"
onClick={() => hidePrivateKey(false)}
className="px-3 h-9 font-bold border w-24 border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
>
Show key
</button>
)}
{privKey && !hidingPrivateKey && (
<button
type="button"
onClick={() => hidePrivateKey(true)}
className="px-3 h-9 font-bold border w-24 border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
>
Hide key
</button>
)}
</div>
</div>
<div className="mt-1 text-sm">
{privKey && !isKeyValid() ? (
<p className="text-red-500">Private key is invalid!</p>
) : (
<p className="text-gray-500">
Your key is stored locally. The developer has no way of
seeing your keys.
</p>
)}
</div>
{!hidingPrivateKey && isKeyValid() && (
<div className="mt-5 flex flex-col items-center">
<QRCode
size={256}
value={privKey.toUpperCase()}
viewBox={`0 0 256 256`}
className="w-full max-w-full"
/>
</div>
)}
</div>
</div>
<Tabs.Root className="mb-4" defaultValue="relays">
<Tabs.List className="mb-4 w-full border-b border-primary h-11 flex items-center gap-6">
<Tabs.Trigger
className="font-medium flex items-center text-muted gap-2 h-11 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
value="relays"
>
Relays
<span className="px-3 h-6 inline-flex items-center justify-center bg-muted data-[state=active]:text-primary rounded-full">
{relays.length}
</span>
</Tabs.Trigger>
<Tabs.Trigger
className="font-medium flex items-center text-muted gap-2 h-11 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
value="permissions"
>
Permissions
<span className="px-3 h-6 inline-flex items-center justify-center bg-muted data-[state=active]:text-primary rounded-full">
{policies.length}
</span>
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="relays">
<div className="flex flex-col gap-2">
<div className="font-semibold text-base">Preferred Relays:</div>
<div className="flex flex-col gap-2">
{relays.map(({url, policy}, i) => (
<div key={i} className="flex items-center gap-4">
<input
value={url}
onChange={changeRelayURL.bind(null, i)}
className="flex-1 h-9 bg-transparent border px-3 py-1 border-primary rounded-lg placeholder:text-muted"
/>
<div className="flex items-center gap-2">
<div className="inline-flex items-center gap-2">
<Checkbox.Root
id={`read-${i}`}
checked={policy.read}
onCheckedChange={toggleRelayPolicy.bind(
null,
i,
'read'
)}
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label
htmlFor={`read-${i}`}
className="text-muted font-medium"
>
Read
</label>
</div>
<div className="inline-flex items-center gap-2">
<Checkbox.Root
id={`write-${i}`}
checked={policy.write}
onCheckedChange={toggleRelayPolicy.bind(
null,
i,
'write'
)}
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label
htmlFor={`write-${i}`}
className="text-muted font-medium"
>
Write
</label>
</div>
</div>
<button
onClick={removeRelay.bind(null, i)}
className="shrink-0 px-3 w-24 h-9 font-semibold border border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
>
Remove
</button>
</div>
))}
<div className="flex gap-2">
<input
value={newRelayURL}
onChange={e => setNewRelayURL(e.target.value)}
onKeyDown={e => {
if (e.key === 'Enter') addNewRelay()
}}
placeholder="wss://"
className="flex-1 h-9 bg-transparent border px-3 py-1 border-primary rounded-lg placeholder:text-muted"
/>
<button
disabled={!newRelayURL}
onClick={addNewRelay}
className="shrink-0 px-3 w-24 h-9 font-semibold border border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
>
Add Relay
</button>
</div>
</div>
</div>
</Tabs.Content>
<Tabs.Content value="permissions">
<div className="flex flex-col gap-2">
<div className="font-semibold text-base">Permissions:</div>
{!policies.length ? (
<div className="text-muted">
You haven't granted any permissions to any apps yet
</div>
) : (
<table className="table-auto">
<thead>
<tr className="mb-2">
<th className="text-left border-b-8 border-transparent">
Domain
</th>
<th className="text-left border-b-8 border-transparent">
Permission
</th>
<th className="text-left border-b-8 border-transparent">
Answer
</th>
<th className="text-left border-b-8 border-transparent">
Conditions
</th>
<th className="text-left border-b-8 border-transparent">
Since
</th>
<th></th>
</tr>
</thead>
<tbody>
{policies.map(
({host, type, accept, conditions, created_at}) => (
<tr
key={
host + type + accept + JSON.stringify(conditions)
}
>
<td className="font-semibold">{host}</td>
<td className="text-muted">{type}</td>
<td className="text-muted">
{accept === 'true' ? 'allow' : 'deny'}
</td>
<td className="text-muted">
{conditions.kinds
? `kinds: ${Object.keys(conditions.kinds).join(
', '
)}`
: 'always'}
</td>
<td className="text-muted">
{new Date(created_at * 1000)
.toISOString()
.split('.')[0]
.split('T')
.join(' ')}
</td>
<td>
<button
onClick={handleRevoke}
data-host={host}
data-accept={accept}
data-type={type}
className="text-primary font-semibold"
>
Revoke
</button>
</td>
</tr>
)
)}
{!policies.length && (
<tr>
{Array(5)
.fill('N/A')
.map((v, i) => (
<td key={i}>{v}</td>
))}
</tr>
)}
</tbody>
</table>
)}
</div>
</Tabs.Content>
</Tabs.Root>
<div className="mb-3">
<div className="flex items-center gap-2">
<Checkbox.Root
id="notification"
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
checked={showNotifications}
onCheckedChange={handleNotifications}
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label htmlFor="notification">
Show desktop notifications when a permissions has been used
</label>
</div>
</div>
<div>
<details>
<summary className="flex items-center justify-between">
<div className="font-semibold text-base">Advanced</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-5 h-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</div>
</summary>
<div className="mt-3">
<div className="flex items-center gap-2">
<Checkbox.Root
id="nostrlink"
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
checked={handleNostrLinks}
onCheckedChange={changeHandleNostrLinks}
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label htmlFor="nostrlink">Handle nostr links</label>
</div>
{handleNostrLinks && (
<div className="mt-3">
<div className="flex">
<input
placeholder="url template"
value={protocolHandler}
onChange={handleChangeProtocolHandler}
/>
{!showProtocolHandlerHelp && (
<button onClick={changeShowProtocolHandlerHelp}>
?
</button>
)}
</div>
{showProtocolHandlerHelp && (
<pre className="bg-muted px-2 rounded-xl overflow-scroll">{`
{raw} = anything after the colon, i.e. the full nip19 bech32 string
{hex} = hex pubkey for npub or nprofile, hex event id for note or nevent
{p_or_e} = "p" for npub or nprofile, "e" for note or nevent
{u_or_n} = "u" for npub or nprofile, "n" for note or nevent
{relay0} = first relay in a nprofile or nevent
{relay1} = second relay in a nprofile or nevent
{relay2} = third relay in a nprofile or nevent
{hrp} = human-readable prefix of the nip19 string
examples:
- https://njump.me/{raw}
- https://snort.social/{raw}
- https://nostr.band/{raw}
`}</pre>
)}
</div>
)}
</div>
</details>
</div>
</div>
<button
disabled={!unsavedChanges.length}
onClick={saveChanges}
className="w-full h-10 bg-primary rounded-xl font-bold inline-flex items-center justify-center text-white disabled:cursor-not-allowed disabled:opacity-70 transform active:translate-y-1 transition-transform ease-in-out duration-75"
>
Save
</button>
</div>
</div>
)
async function handleKeyChange(e) {
let key = e.target.value.toLowerCase().trim()
setPrivKey(key)
addUnsavedChanges('private_key')
}
async function generate() {
setPrivKey(nip19.nsecEncode(generatePrivateKey()))
addUnsavedChanges('private_key')
}
async function saveKey() {
if (!isKeyValid()) {
showMessage('PRIVATE KEY IS INVALID! did not save private key.')
return
}
let hexOrEmptyKey = privKey
try {
let {type, data} = nip19.decode(privKey)
if (type === 'nsec') hexOrEmptyKey = data
} catch (_) {}
await browser.storage.local.set({
private_key: hexOrEmptyKey
})
if (hexOrEmptyKey !== '') {
setPrivKey(nip19.nsecEncode(hexOrEmptyKey))
}
showMessage('saved private key!')
}
function isKeyValid() {
if (privKey === '') return true
if (privKey.match(/^[a-f0-9]{64}$/)) return true
try {
if (nip19.decode(privKey).type === 'nsec') return true
} catch (_) {}
return false
}
function changeRelayURL(i, ev) {
setRelays([
...relays.slice(0, i),
{url: ev.target.value, policy: relays[i].policy},
...relays.slice(i + 1)
])
addUnsavedChanges('relays')
}
function toggleRelayPolicy(i, cat) {
setRelays([
...relays.slice(0, i),
{
url: relays[i].url,
policy: {...relays[i].policy, [cat]: !relays[i].policy[cat]}
},
...relays.slice(i + 1)
])
addUnsavedChanges('relays')
}
function removeRelay(i) {
setRelays([...relays.slice(0, i), ...relays.slice(i + 1)])
addUnsavedChanges('relays')
}
function addNewRelay() {
if (newRelayURL.trim() === '') return
if (!newRelayURL.startsWith('wss://')) return
relays.push({
url: newRelayURL,
policy: {read: true, write: true}
})
setRelays(relays)
addUnsavedChanges('relays')
setNewRelayURL('')
}
async function handleRevoke(e) {
let {host, accept, type} = e.target.dataset
if (
window.confirm(
`revoke all ${
accept === 'true' ? 'accept' : 'deny'
} ${type} policies from ${host}?`
)
) {
await removePermissions(host, accept, type)
showMessage('removed policies')
loadPermissions()
}
}
function handleNotifications() {
setNotifications(!showNotifications)
addUnsavedChanges('notifications')
if (!showNotifications) requestBrowserNotificationPermissions()
}
async function requestBrowserNotificationPermissions() {
let granted = await browser.permissions.request({
permissions: ['notifications']
})
if (!granted) setNotifications(false)
}
async function saveNotifications() {
await browser.storage.local.set({notifications: showNotifications})
showMessage('saved notifications!')
}
async function saveRelays() {
await browser.storage.local.set({
relays: Object.fromEntries(
relays
.filter(({url}) => url.trim() !== '')
.map(({url, policy}) => [url.trim(), policy])
)
})
showMessage('saved relays!')
}
function changeShowProtocolHandlerHelp() {
setShowProtocolHandlerHelp(true)
}
function changeHandleNostrLinks() {
if (handleNostrLinks) {
setProtocolHandler('')
addUnsavedChanges('protocol_handler')
} else setShowProtocolHandlerHelp(true)
setHandleNostrLinks(!handleNostrLinks)
}
function handleChangeProtocolHandler(e) {
setProtocolHandler(e.target.value)
addUnsavedChanges('protocol_handler')
}
async function saveNostrProtocolHandlerSettings() {
await browser.storage.local.set({protocol_handler: protocolHandler})
showMessage('saved protocol handler!')
}
function addUnsavedChanges(section) {
if (!unsavedChanges.find(s => s === section)) {
unsavedChanges.push(section)
setUnsavedChanges(unsavedChanges)
}
}
async function saveChanges() {
for (let section of unsavedChanges) {
switch (section) {
case 'private_key':
await saveKey()
break
case 'relays':
await saveRelays()
break
case 'protocol_handler':
await saveNostrProtocolHandlerSettings()
break
case 'notifications':
await saveNotifications()
break
}
}
setUnsavedChanges([])
}
}
render(<Options />, document.getElementById('main'))

691
extension/options.tsx
View File

@@ -1,691 +0,0 @@
import * as Checkbox from "@radix-ui/react-checkbox";
import * as Tabs from "@radix-ui/react-tabs";
import { nip19, generateSecretKey } from "nostr-tools";
import { useState, useCallback, useEffect } from "react";
import QRCode from "react-qr-code";
import browser from "webextension-polyfill";
import { removePermissions } from "./common";
import { LogoIcon } from "./icons";
function Options() {
const [privKey, setPrivKey] = useState("");
const [relays, setRelays] = useState([]);
const [newRelayURL, setNewRelayURL] = useState("");
const [policies, setPermissions] = useState([]);
const [protocolHandler, setProtocolHandler] = useState(
"https://njump.me/{raw}",
);
const [hidingPrivateKey, hidePrivateKey] = useState(true);
const [showNotifications, setNotifications] = useState(false);
const [messages, setMessages] = useState<string[]>([]);
const [handleNostrLinks, setHandleNostrLinks] = useState(false);
const [showProtocolHandlerHelp, setShowProtocolHandlerHelp] = useState(false);
const [unsavedChanges, setUnsavedChanges] = useState([]);
const showMessage = useCallback((msg: string) => {
messages.push(msg);
setMessages(messages);
setTimeout(() => setMessages([]), 3000);
}, []);
useEffect(() => {
browser.storage.local
.get(["private_key", "relays", "protocol_handler", "notifications"])
.then((results) => {
if (results.private_key) {
setPrivKey(nip19.nsecEncode(results.private_key));
}
if (results.relays) {
const relaysList = [];
for (const url in results.relays) {
relaysList.push({
url,
policy: results.relays[url],
});
}
setRelays(relaysList);
}
if (results.protocol_handler) {
setProtocolHandler(results.protocol_handler);
setHandleNostrLinks(true);
setShowProtocolHandlerHelp(false);
}
if (results.notifications) {
setNotifications(true);
}
});
}, []);
useEffect(() => {
loadPermissions();
}, []);
async function loadPermissions() {
const { policies = {} } = await browser.storage.local.get("policies");
const list = [];
// biome-ignore lint/complexity/noForEach: TODO: fix this
Object.entries(policies).forEach(([host, accepts]) => {
// biome-ignore lint/complexity/noForEach: TODO: fix this
Object.entries(accepts).forEach(([accept, types]) => {
// biome-ignore lint/complexity/noForEach: TODO: fix this
Object.entries(types).forEach(([type, { conditions, created_at }]) => {
list.push({
host,
type,
accept,
conditions,
created_at,
});
});
});
});
setPermissions(list);
}
return (
<div className="w-screen h-screen flex flex-col items-center justify-center">
<div className="p-8 shadow-primary border border-primary rounded-2xl max-w-xl mx-auto flex flex-col gap-4">
<div className="flex items-center gap-4">
<LogoIcon />
<div>
<h1 className="text-lg font-semibold">Nostr Connect</h1>
<p className="text-sm text-muted font-medium">Nostr signer</p>
</div>
</div>
<div className="flex flex-col">
<div className="mb-4 flex flex-col gap-2">
<div className="font-semibold text-base">Private key:</div>
<div>
<div className="flex gap-2">
<input
type={hidingPrivateKey ? "password" : "text"}
value={privKey}
onChange={handleKeyChange}
className="flex-1 h-9 bg-transparent border border-primary px-3 py-1 rounded-lg"
/>
<div className="shrink-0">
{!privKey && (
<button
type="button"
onClick={generate}
className="px-3 h-9 font-semibold border w-24 border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
>
Generate
</button>
)}
{privKey && hidingPrivateKey && (
<button
type="button"
onClick={() => hidePrivateKey(false)}
className="px-3 h-9 font-bold border w-24 border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
>
Show key
</button>
)}
{privKey && !hidingPrivateKey && (
<button
type="button"
onClick={() => hidePrivateKey(true)}
className="px-3 h-9 font-bold border w-24 border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
>
Hide key
</button>
)}
</div>
</div>
<div className="mt-1 text-sm">
{privKey && !isKeyValid() ? (
<p className="text-red-500">Private key is invalid!</p>
) : (
<p className="text-gray-500">
Your key is stored locally. The developer has no way of
seeing your keys.
</p>
)}
</div>
{!hidingPrivateKey && isKeyValid() && (
<div className="mt-5 flex flex-col items-center">
<QRCode
size={256}
value={privKey.toUpperCase()}
viewBox="0 0 256 256"
className="w-full max-w-full"
/>
</div>
)}
</div>
</div>
<Tabs.Root className="mb-4" defaultValue="relays">
<Tabs.List className="mb-4 w-full border-b border-primary h-11 flex items-center gap-6">
<Tabs.Trigger
className="font-medium flex items-center text-muted gap-2 h-11 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
value="relays"
>
Relays
<span className="px-3 h-6 inline-flex items-center justify-center bg-muted data-[state=active]:text-primary rounded-full">
{relays.length}
</span>
</Tabs.Trigger>
<Tabs.Trigger
className="font-medium flex items-center text-muted gap-2 h-11 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
value="permissions"
>
Permissions
<span className="px-3 h-6 inline-flex items-center justify-center bg-muted data-[state=active]:text-primary rounded-full">
{policies.length}
</span>
</Tabs.Trigger>
</Tabs.List>
<Tabs.Content value="relays">
<div className="flex flex-col gap-2">
<div className="font-semibold text-base">Preferred Relays:</div>
<div className="flex flex-col gap-2">
{relays.map(({ url, policy }, i) => (
<div key={url} className="flex items-center gap-4">
<input
value={url}
onChange={changeRelayURL.bind(null, i)}
className="flex-1 h-9 bg-transparent border px-3 py-1 border-primary rounded-lg placeholder:text-muted"
/>
<div className="flex items-center gap-2">
<div className="inline-flex items-center gap-2">
<Checkbox.Root
id={`read-${i}`}
checked={policy.read}
onCheckedChange={toggleRelayPolicy.bind(
null,
i,
"read",
)}
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label
htmlFor={`read-${i}`}
className="text-muted font-medium"
>
Read
</label>
</div>
<div className="inline-flex items-center gap-2">
<Checkbox.Root
id={`write-${i}`}
checked={policy.write}
onCheckedChange={toggleRelayPolicy.bind(
null,
i,
"write",
)}
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label
htmlFor={`write-${i}`}
className="text-muted font-medium"
>
Write
</label>
</div>
</div>
<button
type="button"
onClick={removeRelay.bind(null, i)}
className="shrink-0 px-3 w-24 h-9 font-semibold border border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
>
Remove
</button>
</div>
))}
<div className="flex gap-2">
<input
value={newRelayURL}
onChange={(e) => setNewRelayURL(e.target.value)}
onKeyDown={(e) => {
if (e.key === "Enter") addNewRelay();
}}
placeholder="wss://"
className="flex-1 h-9 bg-transparent border px-3 py-1 border-primary rounded-lg placeholder:text-muted"
/>
<button
type="button"
disabled={!newRelayURL}
onClick={addNewRelay}
className="shrink-0 px-3 w-24 h-9 font-semibold border border-primary shadow-sm rounded-lg inline-flex items-center justify-center disabled:text-muted"
>
Add Relay
</button>
</div>
</div>
</div>
</Tabs.Content>
<Tabs.Content value="permissions">
<div className="flex flex-col gap-2">
<div className="font-semibold text-base">Permissions:</div>
{!policies.length ? (
<div className="text-muted">
You haven't granted any permissions to any apps yet
</div>
) : (
<table className="table-auto">
<thead>
<tr className="mb-2">
<th className="text-left border-b-8 border-transparent">
Domain
</th>
<th className="text-left border-b-8 border-transparent">
Permission
</th>
<th className="text-left border-b-8 border-transparent">
Answer
</th>
<th className="text-left border-b-8 border-transparent">
Conditions
</th>
<th className="text-left border-b-8 border-transparent">
Since
</th>
<th />
</tr>
</thead>
<tbody>
{policies.map(
({ host, type, accept, conditions, created_at }) => (
<tr
key={
host + type + accept + JSON.stringify(conditions)
}
>
<td className="font-semibold">{host}</td>
<td className="text-muted">{type}</td>
<td className="text-muted">
{accept === "true" ? "allow" : "deny"}
</td>
<td className="text-muted">
{conditions.kinds
? `kinds: ${Object.keys(conditions.kinds).join(
", ",
)}`
: "always"}
</td>
<td className="text-muted">
{new Date(created_at * 1000)
.toISOString()
.split(".")[0]
.split("T")
.join(" ")}
</td>
<td>
<button
type="button"
onClick={handleRevoke}
data-host={host}
data-accept={accept}
data-type={type}
className="text-primary font-semibold"
>
Revoke
</button>
</td>
</tr>
),
)}
{!policies.length && (
<tr>
{Array(5)
.fill("N/A")
.map((v) => (
<td key={v}>{v}</td>
))}
</tr>
)}
</tbody>
</table>
)}
</div>
</Tabs.Content>
</Tabs.Root>
<div className="mb-3">
<div className="flex items-center gap-2">
<Checkbox.Root
id="notification"
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
checked={showNotifications}
onCheckedChange={handleNotifications}
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label htmlFor="notification">
Show desktop notifications when a permissions has been used
</label>
</div>
</div>
<div>
<details>
<summary className="flex items-center justify-between">
<div className="font-semibold text-base">Advanced</div>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-5 h-5"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M19.5 8.25l-7.5 7.5-7.5-7.5"
/>
</svg>
</div>
</summary>
<div className="mt-3">
<div className="flex items-center gap-2">
<Checkbox.Root
id="nostrlink"
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
checked={handleNostrLinks}
onCheckedChange={changeHandleNostrLinks}
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label htmlFor="nostrlink">Handle nostr links</label>
</div>
{handleNostrLinks && (
<div className="mt-3">
<div className="flex">
<input
placeholder="url template"
value={protocolHandler}
onChange={handleChangeProtocolHandler}
/>
{!showProtocolHandlerHelp && (
<button
type="button"
onClick={changeShowProtocolHandlerHelp}
>
?
</button>
)}
</div>
{showProtocolHandlerHelp && (
<pre className="bg-muted px-2 rounded-xl overflow-scroll">{`
{raw} = anything after the colon, i.e. the full nip19 bech32 string
{hex} = hex pubkey for npub or nprofile, hex event id for note or nevent
{p_or_e} = "p" for npub or nprofile, "e" for note or nevent
{u_or_n} = "u" for npub or nprofile, "n" for note or nevent
{relay0} = first relay in a nprofile or nevent
{relay1} = second relay in a nprofile or nevent
{relay2} = third relay in a nprofile or nevent
{hrp} = human-readable prefix of the nip19 string
examples:
- https://njump.me/{raw}
- https://snort.social/{raw}
- https://nostr.band/{raw}
`}</pre>
)}
</div>
)}
</div>
</details>
</div>
</div>
<button
type="button"
disabled={!unsavedChanges.length}
onClick={saveChanges}
className="w-full h-10 bg-primary rounded-xl font-bold inline-flex items-center justify-center text-white disabled:cursor-not-allowed disabled:opacity-70 transform active:translate-y-1 transition-transform ease-in-out duration-75"
>
Save
</button>
</div>
</div>
);
async function handleKeyChange(e) {
const key = e.target.value.toLowerCase().trim();
setPrivKey(key);
addUnsavedChanges("private_key");
}
async function generate() {
setPrivKey(nip19.nsecEncode(generateSecretKey()));
addUnsavedChanges("private_key");
}
async function saveKey() {
if (!isKeyValid()) {
showMessage("PRIVATE KEY IS INVALID! did not save private key.");
return;
}
let hexOrEmptyKey = privKey;
try {
const { type, data } = nip19.decode(privKey);
if (type === "nsec") hexOrEmptyKey = data;
} catch (_) {}
await browser.storage.local.set({
private_key: hexOrEmptyKey,
});
if (hexOrEmptyKey !== "") {
setPrivKey(nip19.nsecEncode(hexOrEmptyKey));
}
showMessage("saved private key!");
}
function isKeyValid() {
if (privKey === "") return true;
if (privKey.match(/^[a-f0-9]{64}$/)) return true;
try {
if (nip19.decode(privKey).type === "nsec") return true;
} catch (_) {}
return false;
}
function changeRelayURL(i, ev) {
setRelays([
...relays.slice(0, i),
{ url: ev.target.value, policy: relays[i].policy },
...relays.slice(i + 1),
]);
addUnsavedChanges("relays");
}
function toggleRelayPolicy(i, cat) {
setRelays([
...relays.slice(0, i),
{
url: relays[i].url,
policy: { ...relays[i].policy, [cat]: !relays[i].policy[cat] },
},
...relays.slice(i + 1),
]);
addUnsavedChanges("relays");
}
function removeRelay(i) {
setRelays([...relays.slice(0, i), ...relays.slice(i + 1)]);
addUnsavedChanges("relays");
}
function addNewRelay() {
if (newRelayURL.trim() === "") return;
if (!newRelayURL.startsWith("wss://")) return;
relays.push({
url: newRelayURL,
policy: { read: true, write: true },
});
setRelays(relays);
addUnsavedChanges("relays");
setNewRelayURL("");
}
async function handleRevoke(e) {
const { host, accept, type } = e.target.dataset;
if (
window.confirm(
`revoke all ${
accept === "true" ? "accept" : "deny"
} ${type} policies from ${host}?`,
)
) {
await removePermissions(host, accept, type);
showMessage("removed policies");
loadPermissions();
}
}
function handleNotifications() {
setNotifications(!showNotifications);
addUnsavedChanges("notifications");
if (!showNotifications) requestBrowserNotificationPermissions();
}
async function requestBrowserNotificationPermissions() {
const granted = await browser.permissions.request({
permissions: ["notifications"],
});
if (!granted) setNotifications(false);
}
async function saveNotifications() {
await browser.storage.local.set({ notifications: showNotifications });
showMessage("saved notifications!");
}
async function saveRelays() {
await browser.storage.local.set({
relays: Object.fromEntries(
relays
.filter(({ url }) => url.trim() !== "")
.map(({ url, policy }) => [url.trim(), policy]),
),
});
showMessage("saved relays!");
}
function changeShowProtocolHandlerHelp() {
setShowProtocolHandlerHelp(true);
}
function changeHandleNostrLinks() {
if (handleNostrLinks) {
setProtocolHandler("");
addUnsavedChanges("protocol_handler");
} else setShowProtocolHandlerHelp(true);
setHandleNostrLinks(!handleNostrLinks);
}
function handleChangeProtocolHandler(e) {
setProtocolHandler(e.target.value);
addUnsavedChanges("protocol_handler");
}
async function saveNostrProtocolHandlerSettings() {
await browser.storage.local.set({ protocol_handler: protocolHandler });
showMessage("saved protocol handler!");
}
function addUnsavedChanges(section) {
if (!unsavedChanges.find((s) => s === section)) {
unsavedChanges.push(section);
setUnsavedChanges(unsavedChanges);
}
}
async function saveChanges() {
for (const section of unsavedChanges) {
switch (section) {
case "private_key":
await saveKey();
break;
case "relays":
await saveRelays();
break;
case "protocol_handler":
await saveNostrProtocolHandlerSettings();
break;
case "notifications":
await saveNotifications();
break;
}
}
setUnsavedChanges([]);
}
}
const container = document.getElementById("main");
const root = createRoot(container);
root.render(<Options />);

13247
extension/output/background.build.js
View File

File diff suppressed because it is too large Load Diff

180
extension/output/common.js
View File

@@ -1,118 +1,116 @@
import browser from "webextension-polyfill";
import browser from 'webextension-polyfill'
export const NO_PERMISSIONS_REQUIRED = {
replaceURL: true,
};
replaceURL: true
}
export const PERMISSION_NAMES = Object.fromEntries([
["getPublicKey", "read your public key"],
["getRelays", "read your list of preferred relays"],
["signEvent", "sign events using your private key"],
["nip04.encrypt", "encrypt messages to peers"],
["nip04.decrypt", "decrypt messages from peers"],
]);
['getPublicKey', 'read your public key'],
['getRelays', 'read your list of preferred relays'],
['signEvent', 'sign events using your private key'],
['nip04.encrypt', 'encrypt messages to peers'],
['nip04.decrypt', 'decrypt messages from peers']
])
function matchConditions(conditions, event) {
if (conditions?.kinds) {
if (event.kind in conditions.kinds) return true;
else return false;
}
if (conditions?.kinds) {
if (event.kind in conditions.kinds) return true
else return false
}
return true;
return true
}
export async function getPermissionStatus(host, type, event) {
const { policies } = await browser.storage.local.get("policies");
let {policies} = await browser.storage.local.get('policies')
const answers = [true, false];
for (let i = 0; i < answers.length; i++) {
const accept = answers[i];
const { conditions } = policies?.[host]?.[accept]?.[type] || {};
let answers = [true, false]
for (let i = 0; i < answers.length; i++) {
let accept = answers[i]
let {conditions} = policies?.[host]?.[accept]?.[type] || {}
if (conditions) {
if (type === "signEvent") {
if (matchConditions(conditions, event)) {
return accept; // may be true or false
} else {
// if this doesn't match we just continue so it will either match for the opposite answer (reject)
// or it will end up returning undefined at the end
// biome-ignore lint/correctness/noUnnecessaryContinue: <explanation>
continue;
}
} else {
return accept; // may be true or false
}
}
}
if (conditions) {
if (type === 'signEvent') {
if (matchConditions(conditions, event)) {
return accept // may be true or false
} else {
// if this doesn't match we just continue so it will either match for the opposite answer (reject)
// or it will end up returning undefined at the end
continue
}
} else {
return accept // may be true or false
}
}
}
return undefined;
return undefined
}
export async function updatePermission(host, type, accept, conditions) {
const { policies = {} } = await browser.storage.local.get("policies");
let {policies = {}} = await browser.storage.local.get('policies')
// if the new conditions is "match everything", override the previous
if (Object.keys(conditions).length === 0) {
conditions = {};
} else {
// if we already had a policy for this, merge the conditions
const existingConditions = policies[host]?.[accept]?.[type]?.conditions;
// if the new conditions is "match everything", override the previous
if (Object.keys(conditions).length === 0) {
conditions = {}
} else {
// if we already had a policy for this, merge the conditions
let existingConditions = policies[host]?.[accept]?.[type]?.conditions
if (existingConditions) {
if (existingConditions.kinds && conditions.kinds) {
Object.keys(existingConditions.kinds).forEach(kind => {
conditions.kinds[kind] = true
})
}
}
}
if (existingConditions) {
if (existingConditions.kinds && conditions.kinds) {
Object.keys(existingConditions.kinds).forEach((kind) => {
conditions.kinds[kind] = true;
});
}
}
}
// if we have a reverse policy (accept / reject) that is exactly equal to this, remove it
let other = !accept
let reverse = policies?.[host]?.[other]?.[type]
if (
reverse &&
JSON.stringify(reverse.conditions) === JSON.stringify(conditions)
) {
delete policies[host][other][type]
}
// if we have a reverse policy (accept / reject) that is exactly equal to this, remove it
const other = !accept;
const reverse = policies?.[host]?.[other]?.[type];
if (
reverse &&
JSON.stringify(reverse.conditions) === JSON.stringify(conditions)
) {
delete policies[host][other][type];
}
// insert our new policy
policies[host] = policies[host] || {}
policies[host][accept] = policies[host][accept] || {}
policies[host][accept][type] = {
conditions, // filter that must match the event (in case of signEvent)
created_at: Math.round(Date.now() / 1000)
}
// insert our new policy
policies[host] = policies[host] || {};
policies[host][accept] = policies[host][accept] || {};
policies[host][accept][type] = {
conditions, // filter that must match the event (in case of signEvent)
created_at: Math.round(Date.now() / 1000),
};
browser.storage.local.set({ policies });
browser.storage.local.set({policies})
}
export async function removePermissions(host, accept, type) {
const { policies = {} } = await browser.storage.local.get("policies");
delete policies[host]?.[accept]?.[type];
browser.storage.local.set({ policies });
let {policies = {}} = await browser.storage.local.get('policies')
delete policies[host]?.[accept]?.[type]
browser.storage.local.set({policies})
}
export async function showNotification(host, answer, type, params) {
const ok = await browser.storage.local.get("notifications");
if (ok) {
const action = answer ? "allowed" : "denied";
browser.notifications.create(undefined, {
type: "basic",
title: `${type} ${action} for ${host}`,
message: JSON.stringify(
params?.event
? {
kind: params.event.kind,
content: params.event.content,
tags: params.event.tags,
}
: params,
null,
2,
),
iconUrl: "icons/48x48.png",
});
}
let ok = await browser.storage.local.get('notifications')
if (ok) {
let action = answer ? 'allowed' : 'denied'
browser.notifications.create(undefined, {
type: 'basic',
title: `${type} ${action} for ${host}`,
message: JSON.stringify(
params?.event
? {
kind: params.event.kind,
content: params.event.content,
tags: params.event.tags
}
: params,
null,
2
),
iconUrl: 'icons/48x48.png'
})
}
}

2220
extension/output/content-script.build.js
View File

File diff suppressed because it is too large Load Diff

67
extension/output/manifest.json
View File

@@ -1,36 +1,35 @@
{
"name": "Nostr Connect",
"description": "Nostr Signer Extension",
"version": "0.1.2",
"homepage_url": "https://github.com/reyamir/nostr-connect",
"manifest_version": 3,
"icons": {
"16": "icons/icon16.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"options_page": "options.html",
"background": {
"service_worker": "background.build.js"
},
"action": {
"default_title": "Nostr Connect",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.build.js"],
"all_frames": true
}
],
"permissions": ["storage"],
"optional_permissions": ["notifications"],
"web_accessible_resources": [
{
"resources": ["nostr-provider.js"],
"matches": ["https://*/*", "http://localhost:*/*"]
}
]
"name": "Nostr Connect",
"description": "Nostr Signer Extension",
"version": "0.1.2",
"homepage_url": "https://github.com/reyamir/nostr-connect",
"manifest_version": 2,
"browser_specific_settings": {
"gecko": {
"id": "{e665d138-0e5b-4b7a-ab91-7af834eda7a2}"
}
},
"icons": {
"16": "icons/icon16.png",
"32": "icons/icon32.png",
"48": "icons/icon48.png",
"128": "icons/icon128.png"
},
"options_page": "options.html",
"background": {
"scripts": ["background.build.js"]
},
"browser_action": {
"default_title": "Nostr Connect",
"default_popup": "popup.html"
},
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["content-script.build.js"]
}
],
"permissions": ["storage"],
"optional_permissions": ["notifications"],
"web_accessible_resources": ["nostr-provider.js"]
}

186
extension/output/nostr-provider.js
View File

@@ -1,108 +1,114 @@
const EXTENSION = "nostrconnect";
const EXTENSION = 'nostrconnect'
window.nostr = {
_requests: {},
_pubkey: null,
_requests: {},
_pubkey: null,
async getPublicKey() {
if (this._pubkey) return this._pubkey;
this._pubkey = await this._call("getPublicKey", {});
return this._pubkey;
},
async getPublicKey() {
if (this._pubkey) return this._pubkey
this._pubkey = await this._call('getPublicKey', {})
return this._pubkey
},
async signEvent(event) {
return this._call("signEvent", { event });
},
async signEvent(event) {
return this._call('signEvent', {event})
},
async getRelays() {
return this._call("getRelays", {});
},
async getRelays() {
return this._call('getRelays', {})
},
nip04: {
async encrypt(peer, plaintext) {
return window.nostr._call("nip04.encrypt", { peer, plaintext });
},
nip04: {
async encrypt(peer, plaintext) {
return window.nostr._call('nip04.encrypt', {peer, plaintext})
},
async decrypt(peer, ciphertext) {
return window.nostr._call("nip04.decrypt", { peer, ciphertext });
},
},
async decrypt(peer, ciphertext) {
return window.nostr._call('nip04.decrypt', {peer, ciphertext})
}
},
_call(type, params) {
const id = Math.random().toString().slice(-4);
console.log(
`%c[nostrconnect:%c${id}%c]%c calling %c${type}%c with %c${JSON.stringify(params || {})}`,
"background-color:#f1b912;font-weight:bold;color:white",
"background-color:#f1b912;font-weight:bold;color:#a92727",
"background-color:#f1b912;color:white;font-weight:bold",
"color:auto",
"font-weight:bold;color:#08589d;font-family:monospace",
"color:auto",
"font-weight:bold;color:#90b12d;font-family:monospace",
);
return new Promise((resolve, reject) => {
this._requests[id] = { resolve, reject };
window.postMessage(
{
id,
ext: EXTENSION,
type,
params,
},
"*",
);
});
},
};
_call(type, params) {
let id = Math.random().toString().slice(-4)
console.log(
'%c[nostrconnect:%c' +
id +
'%c]%c calling %c' +
type +
'%c with %c' +
JSON.stringify(params || {}),
'background-color:#f1b912;font-weight:bold;color:white',
'background-color:#f1b912;font-weight:bold;color:#a92727',
'background-color:#f1b912;color:white;font-weight:bold',
'color:auto',
'font-weight:bold;color:#08589d;font-family:monospace',
'color:auto',
'font-weight:bold;color:#90b12d;font-family:monospace'
)
return new Promise((resolve, reject) => {
this._requests[id] = {resolve, reject}
window.postMessage(
{
id,
ext: EXTENSION,
type,
params
},
'*'
)
})
}
}
window.addEventListener("message", (message) => {
if (
!message.data ||
message.data.response === null ||
message.data.response === undefined ||
message.data.ext !== EXTENSION ||
!window.nostr._requests[message.data.id]
)
return;
window.addEventListener('message', message => {
if (
!message.data ||
message.data.response === null ||
message.data.response === undefined ||
message.data.ext !== EXTENSION ||
!window.nostr._requests[message.data.id]
)
return
if (message.data.response.error) {
const error = new Error(
`${EXTENSION}: ${message.data.response.error.message}`,
);
error.stack = message.data.response.error.stack;
window.nostr._requests[message.data.id].reject(error);
} else {
window.nostr._requests[message.data.id].resolve(message.data.response);
}
if (message.data.response.error) {
let error = new Error(
`${EXTENSION}: ` + message.data.response.error.message
)
error.stack = message.data.response.error.stack
window.nostr._requests[message.data.id].reject(error)
} else {
window.nostr._requests[message.data.id].resolve(message.data.response)
}
console.log(
`%c[nostrconnect:%c${message.data.id}%c]%c result: %c${JSON.stringify(
message?.data?.response || message?.data?.response?.error?.message || {},
)}`,
"background-color:#f1b912;font-weight:bold;color:white",
"background-color:#f1b912;font-weight:bold;color:#a92727",
"background-color:#f1b912;color:white;font-weight:bold",
"color:auto",
"font-weight:bold;color:#08589d",
);
console.log(
'%c[nostrconnect:%c' +
message.data.id +
'%c]%c result: %c' +
JSON.stringify(
message?.data?.response || message?.data?.response?.error?.message || {}
),
'background-color:#f1b912;font-weight:bold;color:white',
'background-color:#f1b912;font-weight:bold;color:#a92727',
'background-color:#f1b912;color:white;font-weight:bold',
'color:auto',
'font-weight:bold;color:#08589d'
)
delete window.nostr._requests[message.data.id];
});
delete window.nostr._requests[message.data.id]
})
// hack to replace nostr:nprofile.../etc links with something else
let replacing = null;
document.addEventListener("mousedown", replaceNostrSchemeLink);
let replacing = null
document.addEventListener('mousedown', replaceNostrSchemeLink)
async function replaceNostrSchemeLink(e) {
if (e.target.tagName !== "A" || !e.target.href.startsWith("nostr:")) return;
if (replacing === false) return;
if (e.target.tagName !== 'A' || !e.target.href.startsWith('nostr:')) return
if (replacing === false) return
const response = await window.nostr._call("replaceURL", {
url: e.target.href,
});
if (response === false) {
replacing = false;
return;
}
let response = await window.nostr._call('replaceURL', {url: e.target.href})
if (response === false) {
replacing = false
return
}
e.target.href = response;
e.target.href = response
}

49958
extension/output/prompt.build.js
View File

File diff suppressed because it is too large Load Diff

730
extension/output/style.css
View File

File diff suppressed because one or more lines are too long

182
extension/popup.jsx Normal file
View File

@@ -0,0 +1,182 @@
import browser from 'webextension-polyfill'
import {render} from 'react-dom'
import {getPublicKey, nip19} from 'nostr-tools'
import React, {useState, useMemo, useEffect} from 'react'
import QRCode from 'react-qr-code'
import {SettingsIcon} from './icons'
import {minidenticon} from 'minidenticons'
import * as Tabs from '@radix-ui/react-tabs'
function Popup() {
let [keys, setKeys] = useState(null)
let avatarURI = useMemo(
() =>
keys
? 'data:image/svg+xml;utf8,' +
encodeURIComponent(minidenticon(keys.npub, 90, 30))
: null,
[keys]
)
const gotoSettings = () => {
browser.tabs.create({
url: browser.runtime.getURL('/options.html')
})
}
useEffect(() => {
browser.storage.local.get(['private_key', 'relays']).then(results => {
if (results.private_key) {
let hexKey = getPublicKey(results.private_key)
let npubKey = nip19.npubEncode(hexKey)
setKeys({npub: npubKey, hex: hexKey})
if (results.relays) {
let relaysList = []
for (let url in results.relays) {
if (results.relays[url].write) {
relaysList.push(url)
if (relaysList.length >= 3) break
}
}
if (relaysList.length) {
let nprofileKey = nip19.nprofileEncode({
pubkey: hexKey,
relays: relaysList
})
setKeys(prev => ({...prev, nprofile: nprofileKey}))
}
}
} else {
setKeys(null)
}
})
}, [])
return (
<div className="w-[320px] p-6">
{!keys ? (
<div className="flex items-center justify-between gap-6">
<div className="flex-1 flex items-center justify-between">
<p className="text-sm font-medium">
Click here to enter or create
<br />
your first identity
</p>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
/>
</svg>
</div>
<button
type="button"
onClick={() => gotoSettings()}
className="w-9 h-9 shrink-0 border border-primary shadow-sm rounded-xl inline-flex items-center justify-center"
>
<SettingsIcon className="w-5 h-5 text-muted" />
</button>
</div>
) : (
<div>
<div className="mb-2 flex items-center justify-between">
<div className="flex items-center gap-2">
{avatarURI ? (
<img
src={avatarURI}
className="w-9 h-9 rounded-full bg-muted"
/>
) : (
<div className="w-9 h-9 rounded-full bg-muted" />
)}
<p className="font-semibold">Account</p>
</div>
<button
type="button"
onClick={() => gotoSettings()}
className="w-9 h-9 shrink-0 border border-primary shadow-sm rounded-xl inline-flex items-center justify-center"
>
<SettingsIcon className="w-5 h-5 text-muted" />
</button>
</div>
<div>
<Tabs.Root defaultValue="npub">
<Tabs.List className="w-full border-b border-primary h-10 flex items-center">
<Tabs.Trigger
value="npub"
className="font-medium flex-1 flex items-center justify-center text-muted h-10 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
>
npub
</Tabs.Trigger>
<Tabs.Trigger
value="hex"
className="font-medium flex-1 flex items-center justify-center text-muted h-10 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
>
hex
</Tabs.Trigger>
{keys.nprofile ? (
<Tabs.Trigger
value="nprofile"
className="font-medium flex-1 flex items-center justify-center text-muted h-10 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
>
nprofile
</Tabs.Trigger>
) : null}
</Tabs.List>
<Tabs.Content value="npub">
<div className="my-4">
<textarea
value={keys.npub}
readOnly
className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
/>
</div>
<div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
<QRCode size={128} value={keys.npub} />
</div>
</Tabs.Content>
<Tabs.Content value="hex">
<div className="my-4">
<textarea
value={keys.hex}
readOnly
className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
/>
</div>
<div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
<QRCode size={128} value={keys.hex} />
</div>
</Tabs.Content>
{keys.nprofile ? (
<Tabs.Content value="nprofile">
<div className="my-4">
<textarea
value={keys.nprofile}
readOnly
className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
/>
</div>
<div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
<QRCode size={128} value={keys.nprofile} />
</div>
</Tabs.Content>
) : null}
</Tabs.Root>
</div>
</div>
)}
</div>
)
}
render(<Popup />, document.getElementById('main'))

204
extension/popup.tsx
View File

@@ -1,204 +0,0 @@
import * as Tabs from "@radix-ui/react-tabs";
import { minidenticon } from "minidenticons";
import { getPublicKey, nip19 } from "nostr-tools";
import { useState, useMemo, useEffect } from "react";
import QRCode from "react-qr-code";
import browser from "webextension-polyfill";
import { SettingsIcon } from "./icons";
import { createRoot } from "react-dom/client";
type Keys = {
npub: string;
hex: string;
nprofile: string;
};
function Popup() {
const [keys, setKeys] = useState<Keys | null>(null);
const avatarURI = useMemo(
() =>
keys
? `data:image/svg+xml;utf8,${encodeURIComponent(minidenticon(keys.npub, 90, 30))}`
: null,
[keys],
);
const gotoSettings = () => {
browser.tabs.create({
url: browser.runtime.getURL("/options.html"),
});
};
useEffect(() => {
browser.storage.local.get(["private_key", "relays"]).then((results) => {
if (results.private_key) {
const decoded = nip19.decode(results.private_key as unknown as string);
if (decoded.type === "nsec") {
const nsec = decoded.data;
const hexKey = getPublicKey(nsec);
const npubKey = nip19.npubEncode(hexKey);
setKeys({ npub: npubKey, hex: hexKey, nprofile: "" });
if (results.relays) {
const relaysList: string[] = [];
for (const url in results.relays) {
if (results.relays[url].write) {
relaysList.push(url);
if (relaysList.length >= 3) break;
}
}
if (relaysList.length) {
const nprofileKey = nip19.nprofileEncode({
pubkey: hexKey,
relays: relaysList,
});
setKeys((prev) =>
prev ? { ...prev, nprofile: nprofileKey } : null,
);
}
}
} else {
setKeys(null);
}
} else {
setKeys(null);
}
});
}, []);
return (
<div className="w-[320px] p-6">
{!keys ? (
<div className="flex items-center justify-between gap-6">
<div className="flex-1 flex items-center justify-between">
<p className="text-sm font-medium">
Click here to enter or create
<br />
your first identity
</p>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-6 h-6"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M13.5 4.5L21 12m0 0l-7.5 7.5M21 12H3"
/>
</svg>
</div>
<button
type="button"
onClick={() => gotoSettings()}
className="w-9 h-9 shrink-0 border border-primary shadow-sm rounded-xl inline-flex items-center justify-center"
>
<SettingsIcon className="w-5 h-5 text-muted" />
</button>
</div>
) : (
<div>
<div className="mb-2 flex items-center justify-between">
<div className="flex items-center gap-2">
{avatarURI ? (
<img
src={avatarURI}
alt="Avatar"
className="w-9 h-9 rounded-full bg-muted"
/>
) : (
<div className="w-9 h-9 rounded-full bg-muted" />
)}
<p className="font-semibold">Account</p>
</div>
<button
type="button"
onClick={() => gotoSettings()}
className="w-9 h-9 shrink-0 border border-primary shadow-sm rounded-xl inline-flex items-center justify-center"
>
<SettingsIcon className="w-5 h-5 text-muted" />
</button>
</div>
<div>
<Tabs.Root defaultValue="npub">
<Tabs.List className="w-full border-b border-primary h-10 flex items-center">
<Tabs.Trigger
value="npub"
className="font-medium flex-1 flex items-center justify-center text-muted h-10 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
>
npub
</Tabs.Trigger>
<Tabs.Trigger
value="hex"
className="font-medium flex-1 flex items-center justify-center text-muted h-10 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
>
hex
</Tabs.Trigger>
{keys.nprofile ? (
<Tabs.Trigger
value="nprofile"
className="font-medium flex-1 flex items-center justify-center text-muted h-10 data-[state=active]:text-primary data-[state=active]:border-b data-[state=active]:border-secondary"
>
nprofile
</Tabs.Trigger>
) : null}
</Tabs.List>
<Tabs.Content value="npub">
<div className="my-4">
<textarea
value={keys.npub}
readOnly
className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
/>
</div>
<div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
<QRCode size={128} value={keys.npub} />
</div>
</Tabs.Content>
<Tabs.Content value="hex">
<div className="my-4">
<textarea
value={keys.hex}
readOnly
className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
/>
</div>
<div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
<QRCode size={128} value={keys.hex} />
</div>
</Tabs.Content>
{keys.nprofile ? (
<Tabs.Content value="nprofile">
<div className="my-4">
<textarea
value={keys.nprofile}
readOnly
className="w-full h-20 resize-none p-3 bg-muted rounded-xl"
/>
</div>
<div className="w-full rounded-xl border border-primary p-4 flex items-center justify-center">
<QRCode size={128} value={keys.nprofile} />
</div>
</Tabs.Content>
) : null}
</Tabs.Root>
</div>
</div>
)}
</div>
);
}
const container = document.getElementById("main");
const root = createRoot(container!);
root.render(<Popup />);

165
extension/prompt.jsx Normal file
View File

@@ -0,0 +1,165 @@
import browser from 'webextension-polyfill'
import {render} from 'react-dom'
import React, {useState} from 'react'
import {PERMISSION_NAMES} from './common'
import {LogoIcon} from './icons'
import * as Checkbox from '@radix-ui/react-checkbox'
function Prompt() {
const [isRemember, setIsRemember] = useState(false)
let qs = new URLSearchParams(location.search)
let id = qs.get('id')
let host = qs.get('host')
let type = qs.get('type')
let params, event
try {
params = JSON.parse(qs.get('params'))
if (Object.keys(params).length === 0) params = null
else if (params.event) event = params.event
} catch (err) {
params = null
}
function authorizeHandler(accept) {
const conditions = isRemember ? {} : null
return function (ev) {
ev.preventDefault()
browser.runtime.sendMessage({
prompt: true,
id,
host,
type,
accept,
conditions
})
}
}
return (
<div className="w-screen h-screen flex flex-col items-center justify-center">
<div className="p-8 shadow-primary border border-primary rounded-2xl max-w-xl mx-auto flex flex-col gap-5">
<div className="flex flex-col items-center gap-5">
<LogoIcon />
<div className="flex flex-col items-center text-center">
<h1 className="font-semibold text-lg">{host}</h1>
<p>
is requesting your permission to <b>{PERMISSION_NAMES[type]}</b>
</p>
</div>
</div>
{params && (
<div className="flex flex-col gap-1">
<p>Now acting on</p>
<pre className="bg-muted px-2 rounded-xl overflow-scroll">
<code>{JSON.stringify(event || params, null, 2)}</code>
</pre>
</div>
)}
<div className="flex flex-col gap-4">
<div className="flex items-center justify-center gap-2">
<Checkbox.Root
id="remember"
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
onCheckedChange={setIsRemember}
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label htmlFor="remember" className="text-muted">
Remember my preference forever
</label>
</div>
<div className="flex gap-3">
<button
onClick={authorizeHandler(false)}
className="flex-1 h-10 rounded-lg shadow-sm border border-primary inline-flex items-center justify-center font-semibold"
>
Reject
</button>
<button
onClick={authorizeHandler(true)}
className="flex-1 h-10 rounded-lg shadow-sm border border-secondary bg-primary text-white inline-flex items-center justify-center font-semibold"
>
Authorize
</button>
</div>
</div>
{/*
<div
style={{
display: 'flex',
flexWrap: 'wrap',
justifyContent: 'space-around'
}}
>
<button
style={{marginTop: '5px'}}
onClick={authorizeHandler(
true,
{} // store this and answer true forever
)}
>
authorize forever
</button>
{event?.kind !== undefined && (
<button
style={{marginTop: '5px'}}
onClick={authorizeHandler(
true,
{kinds: {[event.kind]: true}} // store and always answer true for all events that match this condition
)}
>
authorize kind {event.kind} forever
</button>
)}
<button style={{marginTop: '5px'}} onClick={authorizeHandler(true)}>
authorize just this
</button>
{event?.kind !== undefined ? (
<button
style={{marginTop: '5px'}}
onClick={authorizeHandler(
false,
{kinds: {[event.kind]: true}} // idem
)}
>
reject kind {event.kind} forever
</button>
) : (
<button
style={{marginTop: '5px'}}
onClick={authorizeHandler(
false,
{} // idem
)}
>
reject forever
</button>
)}
<button style={{marginTop: '5px'}} onClick={authorizeHandler(false)}>
reject
</button>
</div>*/}
</div>
</div>
)
}
render(<Prompt />, document.getElementById('main'))

123
extension/prompt.tsx
View File

@@ -1,123 +0,0 @@
import { useState } from "react";
import { createRoot } from "react-dom/client";
import browser from "webextension-polyfill";
import * as Checkbox from "@radix-ui/react-checkbox";
import { PERMISSION_NAMES } from "./common";
import { LogoIcon } from "./icons";
function Prompt() {
const [isRemember, setIsRemember] = useState(false);
const qs = new URLSearchParams(location.search);
const id = qs.get("id");
const host = qs.get("host");
const type = qs.get("type");
let params: { [key: string]: string } | null;
let event = "";
try {
params = JSON.parse(qs.get("params") as string);
if (params) {
if (Object.keys(params).length === 0) {
params = null;
} else if (params.event) {
event = params.event;
}
}
} catch (err) {
params = null;
}
function authorizeHandler(accept: boolean) {
const conditions = isRemember ? {} : null;
return (ev: React.FormEvent<HTMLInputElement>) => {
ev.preventDefault();
browser.runtime.sendMessage({
prompt: true,
id,
host,
type,
accept,
conditions,
});
};
}
return (
<div className="w-screen h-screen flex flex-col items-center justify-center">
<div className="p-8 shadow-primary border border-primary rounded-2xl max-w-xl mx-auto flex flex-col gap-5">
<div className="flex flex-col items-center gap-5">
<LogoIcon />
<div className="flex flex-col items-center text-center">
<h1 className="font-semibold text-lg">{host}</h1>
<p>
is requesting your permission to{" "}
<b>{PERMISSION_NAMES[type ? type : "unknown"]}</b>
</p>
</div>
</div>
{params && (
<div className="flex flex-col gap-1">
<p>Now acting on</p>
<pre className="bg-muted px-2 rounded-xl overflow-scroll">
<code>{JSON.stringify(event || params, null, 2)}</code>
</pre>
</div>
)}
<div className="flex flex-col gap-4">
<div className="flex items-center justify-center gap-2">
<Checkbox.Root
id="remember"
className="flex h-6 w-6 appearance-none items-center justify-center rounded-lg bg-white outline-none border border-primary data-[state=checked]:bg-primary data-[state=checked]:border-secondary"
onCheckedChange={() => setIsRemember((prev) => !prev)}
>
<Checkbox.Indicator className="text-white">
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth={1.5}
stroke="currentColor"
className="w-4 h-4"
>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M4.5 12.75l6 6 9-13.5"
/>
</svg>
</Checkbox.Indicator>
</Checkbox.Root>
<label htmlFor="remember" className="text-muted">
Remember my preference forever
</label>
</div>
<div className="flex gap-3">
<button
type="button"
onClick={() => authorizeHandler(false)}
className="flex-1 h-10 rounded-lg shadow-sm border border-primary inline-flex items-center justify-center font-semibold"
>
Reject
</button>
<button
type="button"
onClick={() => authorizeHandler(true)}
className="flex-1 h-10 rounded-lg shadow-sm border border-secondary bg-primary text-white inline-flex items-center justify-center font-semibold"
>
Authorize
</button>
</div>
</div>
</div>
</div>
);
}
const container = document.getElementById("main");
const root = createRoot(container!);
root.render(<Prompt />);

4
extension/style.css
View File

@@ -2,6 +2,6 @@
@tailwind components;
@tailwind utilities;
.data-\[state\=active\]\:text-primary[data-state="active"] > .bg-muted {
@apply bg-secondary;
.data-\[state\=active\]\:text-primary[data-state=active] > .bg-muted {
@apply bg-secondary
}

64
package.json
View File

@@ -1,35 +1,33 @@
{
"license": "WTFPL",
"dependencies": {
"@noble/hashes": "^1.6.1",
"@radix-ui/react-checkbox": "^1.1.3",
"@radix-ui/react-tabs": "^1.1.2",
"async-mutex": "^0.5.0",
"esbuild": "^0.14.54",
"events": "^3.3.0",
"minidenticons": "^4.2.1",
"nostr-tools": "^2.10.4",
"react": "^19.0.0",
"react-dom": "^19.0.0",
"react-native-svg": "^13.14.1",
"react-qr-code": "^2.0.15",
"use-boolean-state": "^1.0.2",
"use-debounce": "^7.0.1",
"webextension-polyfill": "^0.12.0"
},
"scripts": {
"dev": "./build.js; pnpm exec tailwindcss -i ./extension/style.css -o ./extension/build/style.css --watch",
"build": "pnpm exec tailwindcss -i ./extension/style.css -o ./extension/output/style.css; ./build.js prod",
"package:chrome": "pnpm exec tailwindcss -i ./extension/style.css -o ./extension/output/style.css --minify; ./build.js prod; cd extension/output; zip -r archive *; cd ../../; mv extension/output/archive.zip extension/releases/nostrconnect_chrome.zip",
"package:firefox": "pnpm exec tailwindcss -i ./extension/style.css -o ./extension/output/style.css --minify; ./build.js prod firefox; cd extension/output; zip -r archive *; cd ../../; mv extension/output/archive.zip extension/releases/nostrconnect_firefox.xpi"
},
"devDependencies": {
"@biomejs/biome": "1.9.4",
"@types/react": "^19.0.2",
"@types/react-dom": "^19.0.2",
"@types/webextension-polyfill": "^0.12.1",
"esbuild-plugin-copy": "^2.1.1",
"tailwindcss": "^3.4.17",
"typescript": "^5.7.2"
}
"license": "WTFPL",
"dependencies": {
"@radix-ui/react-checkbox": "^1.0.4",
"@radix-ui/react-tabs": "^1.0.4",
"async-mutex": "^0.3.2",
"esbuild": "^0.14.54",
"eslint": "^8.54.0",
"eslint-plugin-babel": "^5.3.1",
"eslint-plugin-react": "^7.33.2",
"events": "^3.3.0",
"minidenticons": "^4.2.0",
"nostr-tools": "^1.17.0",
"prettier": "^2.8.8",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"react-native-svg": "^13.14.0",
"react-qr-code": "^2.0.12",
"use-boolean-state": "^1.0.2",
"use-debounce": "^7.0.1",
"webextension-polyfill": "^0.8.0"
},
"scripts": {
"dev": "./build.js; pnpm exec tailwindcss -i ./extension/style.css -o ./extension/build/style.css --watch",
"build": "pnpm exec tailwindcss -i ./extension/style.css -o ./extension/output/style.css; ./build.js prod",
"package:chrome": "pnpm exec tailwindcss -i ./extension/style.css -o ./extension/output/style.css --minify; ./build.js prod; cd extension/output; zip -r archive *; cd ../../; mv extension/output/archive.zip extension/releases/nostrconnect_chrome.zip",
"package:firefox": "pnpm exec tailwindcss -i ./extension/style.css -o ./extension/output/style.css --minify; ./build.js prod firefox; cd extension/output; zip -r archive *; cd ../../; mv extension/output/archive.zip extension/releases/nostrconnect_firefox.xpi"
},
"devDependencies": {
"esbuild-plugin-copy": "^2.1.1",
"tailwindcss": "^3.3.5"
}
}

9808
pnpm-lock.yaml generated
View File

File diff suppressed because it is too large Load Diff

24
tsconfig.json
View File

@@ -1,24 +0,0 @@
{
"compilerOptions": {
"target": "ESNext",
"useDefineForClassFields": true,
"lib": ["ESNext", "ES2020", "DOM", "DOM.Iterable"],
"module": "ESNext",
"skipLibCheck": true,
"moduleResolution": "bundler",
"allowImportingTsExtensions": true,
"resolveJsonModule": true,
"isolatedModules": true,
"noEmit": true,
"jsx": "react-jsx",
"strict": true,
"noUnusedLocals": true,
"noImplicitAny": false,
"noUnusedParameters": true,
"noFallthroughCasesInSwitch": true,
"paths": {
"*": ["./extension/*.d.ts"]
}
},
"include": ["extension"]
}