oh, ok.
I will try that.
Thanks
Hi guys,
After several chats with ChatGPT, I finally got it to show me what I wanted to see. But I don't understand why it only works with one zip file.
Actually, I wanted the text to be formatted to underline the folder names, but it didn't work.
When I use it to show me the content of the zip file that works, it looks like this:
But when I use it on other zip files, it shows me this:
Do you guys have any idea why that is?
So, unfortunately, I couldn't make it work with the shortcuts app. And ChatGPT was also not very helpful with that. But at least it helps me figure out how to create the shell script to show the info how I like it to be.
Now, I would like to give BTT a go. How can I make something similar in BTT?
did you see the preset I shared above? I was talking about the webview item in there when I referenced ChatGPT
Yeah I saw that, but I don't know how to change the Apple script to show me the right info. I thought you meant to ask ChatGPT to help me with the shortcut app.
But can it also answer any BTT questions?
I will try that with the preset again.
it should already show all the correct info when you trigger it, doesn't it for you?
The webview item just uses simple java script, ChatGPT can easily modify that to change the formatting etc.
<html>
<head>
<script>
async function BTTInitialize() {
reloadVariable();
}
/* This is called before the webview exits and destroys its content*/
function BTTWillCloseWindow() {
console.log("will close window");
}
/* This is called before the webview hides*/
function BTTWillHideWindow() {
console.log("will hide window");
}
/* This is called when the webview becomes visible*/
function BTTWindowWillBecomeVisible() {
console.log("will become visible");
reloadVariable();
}
async function reloadVariable() {
// here the Java Script retrieves the output of the previous unzip -l command
let zipContent = await get_string_variable({variableName: "ZipContents"});
const contentDiv = document.getElementById('content');
contentDiv.innerHTML = parseUnzipOutput(zipContent);
}
// this function parses and styles the provided output retrieved from the unzip -l terminal command:
function parseUnzipOutput(output) {
// Normalize line endings and split the output into lines
const lines = output.replace(/\r\n?/g, '\n').trim().split('\n').slice(2); // Replace carriage returns with new lines and split
// Generate HTML table
let html = '<table><tr><th>Length</th><th>Date</th><th>Name</th></tr>';
lines.forEach((item, index) => {
const cols = item.trim().split(/\s{2,}/); // Split each line by two or more spaces
if (cols.length === 3) { // Filter out the summary lines
html += `<tr><td>${cols[0]}</td><td>${cols[1]}</td><td>${cols[2]}</td></tr>`;
}
});
html += '</table>';
return html;
}
</script>
<style>
table {
width: 100%;
border-collapse: collapse;
}
th, td {
border: 1px solid #dddddd;
padding: 8px;
text-align: left;
}
th {
background-color: #f2f2f2;
}
</style>
</head>
<body >
<div id="content">not loaded</div>
</body>
</html>
(Best use this script with the latest BTT alphas I did improve some of the lifecycle functions while being used in floating menus)
I just discovered that section. I didn't see that at first. 
Sorry for that. I will try to figure it out.
Thanks for now
Okay, I created a first raw layout with the help of ChatGPT, and it seems to be working. But I have an issue that ChatGPT couldn't solve.
This is how it looks at the moment. As you can see, the folder names are doubled, and I have no idea why. I tried several prompts to solve that with ChatGPT, but nothing worked. So maybe you have any idea.
I had to screenshot it with my iPhone because the menu disappears when I try to take a screenshot.
I changed the apple script to that:
tell application "Finder"
set selectedItems to selection
if (count of selectedItems) is not 1 then
display dialog "Please select a single ZIP file." buttons {"OK"} default button "OK"
return
end if
set zipFile to item 1 of selectedItems
set filePath to POSIX path of (zipFile as alias)
set fileName to name of zipFile -- Get the file name
set outputFilePath to POSIX path of ((path to desktop as text) & "unzip_output.txt")
end tell
set shellCommand to "/usr/bin/unzip -l " & quoted form of filePath & " > " & quoted form of outputFilePath
do shell script shellCommand
set fileContents to do shell script "cat " & quoted form of outputFilePath
tell application "BetterTouchTool"
set_string_variable "ZipContents" to fileContents
set_string_variable "ZipFileName" to fileName -- Pass the file name to JavaScript
end tell
and the HTML to that:
<html>
<head>
<script>
async function BTTInitialize() {
reloadVariable();
}
/* This is called before the webview exits and destroys its content */
function BTTWillCloseWindow() {
console.log("will close window");
}
/* This is called before the webview hides */
function BTTWillHideWindow() {
console.log("will hide window");
}
/* This is called when the webview becomes visible */
function BTTWindowWillBecomeVisible() {
console.log("will become visible");
reloadVariable();
}
async function reloadVariable() {
// Retrieve the ZIP contents and file name
let zipContent = await get_string_variable({ variableName: "ZipContents" });
let zipFileName = await get_string_variable({ variableName: "ZipFileName" });
const contentDiv = document.getElementById('content');
// Check if content is empty, and if so, display a message
if (!zipContent.trim()) {
contentDiv.innerHTML = `<p style="font-family: sans-serif; font-size: 14px; color: red; text-align: center;">No files found in the ZIP archive.</p>`;
} else {
contentDiv.innerHTML = parseUnzipOutput(zipContent, zipFileName);
}
}
// This function parses and styles the provided output retrieved from the unzip -l terminal command
function parseUnzipOutput(output, zipFileName) {
// Normalize line endings and split the output into lines
const lines = output.replace(/\r\n?/g, '\n').trim().split('\n').slice(2); // Remove headers
let html = '<ul>';
let displayedFolders = new Set(); // To track displayed folders
// Add the ZIP file name as a title (h1 tag) in the first line
html += `<h1 style="font-family: sans-serif; font-weight: bold; font-size: 18px; text-align: center; text-decoration: underline; margin-bottom: 40px;">${zipFileName}</h1>`;
if (lines.length === 0) {
// If there are no files, display a message
html += `<p style="font-family: sans-serif; font-size: 14px; color: red; text-align: center;">No files found in the ZIP archive.</p>`;
} else {
lines.forEach((item) => {
const cols = item.trim().split(/\s{2,}/); // Split by two or more spaces
if (cols.length === 3 &&
!cols[2].includes('__MACOSX') &&
!cols[2].includes('.DS_Store') &&
!cols[2].includes('Name') &&
!cols[2].includes('----')) {
let filePath = cols[2].replace(/\/$/, ''); // Remove trailing "/"
let parts = filePath.split('/');
let fileName = parts.pop();
let folderName = parts.join('/');
// Only display the folder name once, and only if it hasn't been displayed already
if (folderName && !displayedFolders.has(folderName)) {
html += `<li class="folder">${folderName}</li>`;
displayedFolders.add(folderName); // Mark folder as displayed
}
// Add the file name under the corresponding folder
if (fileName) {
html += `<ul><li>${fileName}</li></ul>`;
}
}
});
}
html += '</ul>';
return html;
}
</script>
<style>
ul {
list-style-type: none;
padding: 0;
margin: 0;
}
li {
padding: 2px 0;
font-family: sans-serif;
font-size: 14px;
}
.folder {
font-weight: bold;
text-decoration: underline;
margin-top: 10px;
}
h1 {
font-family: sans-serif;
font-weight: bold;
font-size: 18px;
text-align: center;
text-decoration: underline;
margin-bottom: 40px;
}
p {
font-family: sans-serif;
font-size: 14px;
color: red;
text-align: center;
}
</style>
</head>
<body>
<div id="content">not loaded</div>
</body>
</html>
Oh, what a journey.
After multiple days and many back-and-forth of ChatGPT chats, I finally got it.
It looks like this and works great, although it seems to be a bit slow.
Now I'm wondering if there is a way to let the menu work like the normal quick look. By that, I mean that when the menu is showing up, is it possible to switch between multiple files, and the menu would update after each switch to show the items in the next zip file?
By the way, I removed these two commands, but I didn't notice any effect on how it works. Were they necessary for the function?
I am the developer of BetterZip. Using the Quick Look plugin of BetterZip is still (and forever will be) free, it's just wrapped inside an app bundle instead of the old qlgenerator bundle. The only downside is that you're wasting about 30 MB of disk space.
1 Like
Oh hey,
actually, I just wanted the Quicklook plugin without the app. Or an App where you could customize the Quicklook menu further, which was impossible with BetterZip. Because of that, and because I already use another unzipping app, I didn't want to use another app, and I wanted to create a much-customized version.
I understand. I just wanted to make sure, you're not staying away from my plugin because of a misunderstanding. Good luck in your endeavours!
1 Like