Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: chrome extension support #72

Merged
merged 6 commits into from
Apr 2, 2024
Merged

feat: chrome extension support #72

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
d0fac91
feat: chrome extension support
Kodylow Mar 31, 2024
524c9c1
fix: move inline script into separate initWebimint.js
Kodylow Apr 1, 2024
7db3308
fix: min width of app
Kodylow Apr 1, 2024
b925aaf
fix: use sed not grep + -euo
Kodylow Apr 1, 2024
e9c422e
fix: sed -i
Kodylow Apr 1, 2024
df3307b
fix: post_build handling for trunk serve
Kodylow Apr 2, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions .typos.toml
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
[files]
extend-exclude = ["bun.lockb"]
Binary file added bun.lockb
View file
Open in desktop
Binary file not shown.
20 changes: 10 additions & 10 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
<!DOCTYPE html>
<html>
<head>
<meta name="version" content="{{buildVersion}}">
<link data-trunk rel="tailwind-css" href="./index.css"/>
<link data-trunk rel="rust" data-wasm-opt="z"/>
<link data-trunk rel="copy-dir" href="./assets/"/>
<link data-trunk rel="copy-file" href="./service-worker.js"/>
<link data-trunk rel="copy-file" href="./manifest.json"/>
<link data-trunk rel="copy-file" href="./favicon.ico"/>
</head>
<body></body>
<head>
<meta name="version" content="{{buildVersion}}" />
<link data-trunk rel="tailwind-css" href="./index.css" />
<link data-trunk rel="rust" data-wasm-opt="z" />
<link data-trunk rel="copy-dir" href="./assets/" />
<link data-trunk rel="copy-file" href="./service-worker.js" />
<link data-trunk rel="copy-file" href="./manifest.json" />
<link data-trunk rel="copy-file" href="./favicon.ico" />
</head>
<body></body>
</html>
78 changes: 37 additions & 41 deletions manifest.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,46 +1,42 @@
{
"name": "Webimint Fedimint Client",
"short_name": "Webimint",
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": [
{
"src": "\/assets\/icons\/android-icon-36x36.png",
"sizes": "36x36",
"type": "image\/png",
"density": "0.75"
"manifest_version": 3,
"__chrome__manifest_version": 3,
"name": "Webimint Fedimint Client",
"short_name": "Webimint",
"version": "0.1.0",
"description": "Webimint is an experimental Fedimint wallet using the Leptos web framework.",
"action": {
"default_popup": "index.html",
"default_icon": {
"48": "/assets/icons/android-icon-48x48.png",
"96": "/assets/icons/android-icon-96x96.png",
"192": "/assets/icons/android-icon-192x192.png"
}
},
{
"src": "\/assets\/icons\/android-icon-48x48.png",
"sizes": "48x48",
"type": "image\/png",
"density": "1.0"
"background": {
"service_worker": "service-worker.js"
},
{
"src": "\/assets\/icons\/android-icon-72x72.png",
"sizes": "72x72",
"type": "image\/png",
"density": "1.5"
"permissions": ["storage", "activeTab"],
"content_scripts": [
{
"matches": ["<all_urls>"],
"js": ["webimint-{{buildVersion}}.js"]
}
],
"__chrome__host_permissions": ["*://*/*"],
"content_security_policy": {
"extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
},
{
"src": "\/assets\/icons\/android-icon-96x96.png",
"sizes": "96x96",
"type": "image\/png",
"density": "2.0"
},
{
"src": "\/assets\/icons\/android-icon-144x144.png",
"sizes": "144x144",
"type": "image\/png",
"density": "3.0"
},
{
"src": "\/assets\/icons\/android-icon-192x192.png",
"sizes": "192x192",
"type": "image\/png",
"density": "4.0"
"start_url": "/",
"display": "standalone",
"background_color": "#ffffff",
"theme_color": "#ffffff",
"icons": {
"36": "/assets/icons/android-icon-36x36.png",
"48": "/assets/icons/android-icon-48x48.png",
"72": "/assets/icons/android-icon-72x72.png",
"96": "/assets/icons/android-icon-96x96.png",
"144": "/assets/icons/android-icon-144x144.png",
"192": "/assets/icons/android-icon-192x192.png"
}
]
}
}
80 changes: 73 additions & 7 deletions post_build.sh
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
#!/usr/bin/env bash
set -e
set -euo pipefail

appName="webimint"
stylePrefix="index"
Expand All @@ -24,14 +24,17 @@ echo "Build-Version is: ${buildVersion}"
# Replace placeholder in service-worker.js
serviceWorkerJsFile=$(find ./dist/.stage -iname "service-worker.js")
echo "Replacing {{buildVersion}} placeholder in: ${serviceWorkerJsFile}"
sed "s/{{buildVersion}}/${buildVersion}/g" "${serviceWorkerJsFile}" > "${serviceWorkerJsFile}.modified"
mv -f "${serviceWorkerJsFile}.modified" "${serviceWorkerJsFile}"
sed -i "s/{{buildVersion}}/${buildVersion}/g" "${serviceWorkerJsFile}"

# Replace placeholder in index.html
indexHtmlFile=$(find ./dist/.stage -iname "index.html")
echo "Replacing {{buildVersion}} placeholder in: ${indexHtmlFile}"
sed "s/{{buildVersion}}/${buildVersion}/g" "${indexHtmlFile}" > "${indexHtmlFile}.modified"
mv -f "${indexHtmlFile}.modified" "${indexHtmlFile}"
sed -i "s/{{buildVersion}}/${buildVersion}/g" "${indexHtmlFile}"

# Replace placeholder in manifest.json
manifestJsonFile=$(find ./dist/.stage -iname "manifest.json")
echo "Replacing {{buildVersion}} placeholder in: ${manifestJsonFile}"
sed -i "s/{{buildVersion}}/${buildVersion}/g" "${manifestJsonFile}"

# Extract CSS build version
indexJsFile=$(find ./dist/.stage -iname "${stylePrefix}-*.${styleFormat}")
Expand All @@ -52,5 +55,68 @@ echo "CSS Build-Version is: ${cssBuildVersion}"
# Replace placeholder in service-worker.js
serviceWorkerJsFile=$(find ./dist/.stage -iname "service-worker.js")
echo "Replacing {{cssBuildVersion}} placeholder in: ${serviceWorkerJsFile}"
sed "s/{{cssBuildVersion}}/${cssBuildVersion}/g" "${serviceWorkerJsFile}" > "${serviceWorkerJsFile}.modified"
mv -f "${serviceWorkerJsFile}.modified" "${serviceWorkerJsFile}"
sed -i "s/{{cssBuildVersion}}/${cssBuildVersion}/g" "${serviceWorkerJsFile}"

# ### Required for chrome extension, no inline scripting
echo "Extracting script content from index.html and creating initWebimint.js"
scriptContent=$(sed -n 's|.*<script type=module>\(.*\)</script>.*|\1|p' "${indexHtmlFile}")
if [ -n "${scriptContent}" ]; then
echo "${scriptContent}" >./dist/.stage/initWebimint.js
echo "Replacing original script tag in index.html with reference to initWebimint.js"
sed -i 's|<script type=module>[^<]*</script>|<script type="module" src="/initWebimint.js"></script>|' "${indexHtmlFile}"
else # using trunk serve, multiline script tags, have to extract line by line
echo "Using trunk serve, multiline script tags, have to extract line by line"
echo "Extracting script content from index.html and creating separate .js files"
# Directory where the new JS files will be stored
JS_DIR="./dist/.stage/js"
mkdir -p "$JS_DIR"
# Counter to name the extracted JS files uniquely
COUNTER=1
# Temporary file to hold the modified HTML content
TMP_HTML=$(mktemp)
# Initialize SCRIPT_OPEN to 0 before the loop
SCRIPT_OPEN=0
# Read the index.html file line by line
while IFS= read -r line || [[ -n "$line" ]]; do
if [[ $line =~ \<script.*\>\</script\> ]]; then
# Inline script tag with no content, just copy the line
echo "$line" >>"$TMP_HTML"
elif [[ $line =~ \<script.*\>(.*) ]]; then
# Opening script tag with potential inline content
SCRIPT_OPEN=1
# Capture any content on the same line as the opening script tag
SCRIPT_CONTENT="${BASH_REMATCH[1]}"
if [[ $SCRIPT_CONTENT ]]; then
# If there's inline content right after the script tag, add a newline to start accumulating correctly
SCRIPT_CONTENT+=$'\n'
fi
elif [[ $line =~ \</script\> ]]; then
# Closing script tag, write content to a new JS file
SCRIPT_FILE="$JS_DIR/extracted_$COUNTER.js"
echo "$SCRIPT_CONTENT" >"$SCRIPT_FILE"
# Replace the script tag in HTML with a reference to the new JS file
echo "<script type=\"module\" src=\"/js/extracted_$COUNTER.js\"></script>" >>"$TMP_HTML"
COUNTER=$((COUNTER + 1))
SCRIPT_OPEN=0
SCRIPT_CONTENT="" # Reset SCRIPT_CONTENT for the next script
elif [[ $SCRIPT_OPEN -eq 1 ]]; then
# Inside a script tag, accumulate the content
SCRIPT_CONTENT+="$line"$'\n'
else
# Outside script tags, just copy the line
echo "$line" >>"$TMP_HTML"
fi
done <"${indexHtmlFile}"
# Replace the original HTML file with the modified one
mv "$TMP_HTML" "${indexHtmlFile}"
# Clean up
rm -f "$TMP_HTML"
# Replace placeholder trunk address in JavaScript files
echo "Replacing {{__TRUNK_ADDRESS__}} placeholder in extracted JavaScript files"
jsFiles=$(find ./dist/.stage/js -iname "*.js")
TRUNK_ADDRESS=127.0.0.1:8080
for file in $jsFiles; do
sed -i "s/{{__TRUNK_ADDRESS__}}/${TRUNK_ADDRESS}/g" "$file"
echo "Replaced in: $file"
done
fi
Comment on lines +63 to +122
Copy link
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Do I even want to know if this was written by GPT? 😆 What a glorious bash script!

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

yup haha, but it works

Copy link
Owner

@elsirion elsirion Apr 4, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

"Let's have a LLM at junior dev level at best, that sometimes hallucinates, code in a write-only language, what should possibly go wrong" 🤣 (I'm no stranger to this though https://github.com/elsirion/fedimint-observer/blob/181aa61e3be51993bd531d9b072375f2f0113618/src/federation/query.html#L1)

2 changes: 1 addition & 1 deletion src/components/app.rs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -71,7 +71,7 @@ pub fn App() -> impl IntoView {
<Meta name="theme-color" content="#ffffff" />

<div class="h-[100dvh]">
<div class="mx-auto w-full h-full flex flex-col lg:max-w-[600px] p-6">
<div class="mx-auto w-full h-full flex flex-col min-w-[400px] lg:max-w-[600px] p-6">
<header class="flex justify-center mb-20">
<Logo class="bg-red border-1 border-blue"/>
</header>
Expand Down
Loading