Building version 1.5 with GPT 4

Version 1.5 started (again) as more ambitious. I wanted to use the Obsidian URI protocol to save the markdown files directly into the user's Obsidian vault. I fed GPT-4 the API documentation and told it what I wanted and eventually we got to a working version. However, the limitations in creating URI parameters prevented me from creating any file larger than about 2,000 characters. Anything larger would either fail silently or get truncated. So I went back to my other enhancement: customizable markdown. Now the user can decide what markdown to use to surround the tab titles and urls, making it easy to adapt to any user's Obsidian needs.

Along the way, I came across many of GPT-4's limitations:

Throttling of the API limits the amount of work you can do in a given period of time. A lot of requests are wasted explaining to GPT-4 what it got wrong or going through non-solutions.
After a while (and particularly after throttling pauses) GPT-4 gets amnesia and tends to forget the code it has already written or the variable names it has used. This is usually fixed by pasting the actual code back into GPT-4.
GPT-4 will sometimes offer non-existent solutions or code that's no longer maintained. It is up to you to decide how to handle these issues. I just told GPT-4 I didn't want to use the external libraries it was suggesting.

Tips and tricks for coding with an AI assistant:

Use git to version control your code. You don't need to commit after every code change, but at least do it regularly enough that you can easily go back to a working copy.
Git branches: use them when working a new feature and then do a PR when it's done. It will prevent a lot of headaches.
Versioning: keep a version number and update it with every change that needs a new code run. In this case, updating the version number in manifest.json allowed me to see that I had reloaded the correct version of the extension when testing.
GPT-4 can help you with non-code files as well: it can generate your README.md file, your css files, beautify your ouput, help you with your git commands, etc.

With that out of the way, here's the actual transcript from version 1.5 (conversation about the Obsidian URI were removed):

Human: So, let's go back to version 1.1. I will provide all the code, so you know were we are. I have removed all the URI code, as it wasn't working as expected. Reply with ok if understood

Assistant:

Ok, I understand. Please provide the code for version 1.1, and I'll help you with any further modifications or improvements you'd like to make.

Human: This is options.html

<!DOCTYPE html>
<html>
  <head>
    <title>tabSidian - Settings</title>
    <link rel="stylesheet" href="options.css" />
    <script src="options.js"></script>
  </head>
  <body>
    <h1>Restricted URLs</h1>
        <p>Add any urls you want to restrict from processing by tabSidian.</p>
        <textarea id="restrictedUrls" rows="10" cols="50"></textarea>
        <br>
        <button id="save">Save</button>
        <script src="options.js"></script>
    <p>
        <a href="https://www.flaticon.com/free-icons/tabs" title="tabs icons">Tabs icons created by Freepik - Flaticon</a>
    </p>
  </body>
</html>

This is options.js:

document.getElementById('save').addEventListener('click', () => {
    const restrictedUrls = document.getElementById('restrictedUrls').value.split('\n');
    chrome.storage.sync.set({ restrictedUrls });
  });
  
  function setDefaultRestrictedUrls() {
    const defaultRestrictedUrls = [
      'gmail.com',
      'google.com',
      'bing.com'
    ];
    document.getElementById('restrictedUrls').value = defaultRestrictedUrls.join('\n');
    chrome.storage.sync.set({ restrictedUrls: defaultRestrictedUrls });
  }
  
  chrome.storage.sync.get('restrictedUrls', ({ restrictedUrls }) => {
    if (restrictedUrls) {
      document.getElementById('restrictedUrls').value = restrictedUrls.join('\n');
    } else {
      setDefaultRestrictedUrls();
    }
  });

This is background.js:

function generateMarkdownAndTimestamp(tabs) {
    const timestamp = new Date();
    const formattedTimestamp = `${timestamp.getFullYear()}-${String(timestamp.getMonth() + 1).padStart(2, '0')}-${String(timestamp.getDate()).padStart(2, '0')}T${String(timestamp.getHours()).padStart(2, '0')}-${String(timestamp.getMinutes()).padStart(2, '0')}-${String(timestamp.getSeconds()).padStart(2, '0')}`;
  
    const localDate = timestamp.toLocaleString('en-US', {
      year: 'numeric',
      month: '2-digit',
      day: '2-digit',
    }).replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$3-$1-$2');
  
    const localTime = timestamp.toLocaleString('en-US', {
      hour: '2-digit',
      minute: '2-digit',
      second: '2-digit',
      hour12: false,
    });
  
    let markdown = `---\ndate_created: ${localDate}\ntime_created: ${localTime}\n---\n\n`;
  
    for (const tab of tabs) {
      markdown += `## ${tab.title}\n[${tab.url}](${tab.url})\n\n`;
    }
  
    return { markdown, formattedTimestamp };
  }

function shouldProcessTab(tab, restrictedUrls) {
    const isPinned = tab.pinned;
    const isSettingsTab = tab.url.startsWith('edge://');
    const isRestrictedUrl = restrictedUrls.some((url) => tab.url.includes(url));
  
    return !isPinned && !isSettingsTab && !isRestrictedUrl;
  }
  
  chrome.browserAction.onClicked.addListener(() => {
    chrome.storage.sync.get('restrictedUrls', ({ restrictedUrls }) => {
      chrome.windows.getAll({ populate: true, windowTypes: ['normal'] }, (windows) => {
        const currentWindow = windows.find((window) => window.focused);
        const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || []));
  
        const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs);
  
        chrome.downloads.download({
          url: 'data:text/markdown;charset=UTF-8,' + encodeURIComponent(markdown),
          filename: `${formattedTimestamp}_OpenTabs.md`,
          saveAs: true,
        });
      });
    });
  });

Assistant:

Thank you for providing the code for version 1.1. I understand the current state of the project, and I'm ready to help you with any further modifications or improvements you'd like to make. Please let me know the next steps you'd like to take.

Human: ok. First: function shouldProcessTab currently filters out pinned, settings and restricted tabs. Can you add the option to only process selected tabs?

Assistant:

Sure, I can add a condition to the shouldProcessTab function to check if a tab is selected. Here's the updated code for background.js:

function shouldProcessTab(tab, restrictedUrls, onlySelectedTabs) {
  const isPinned = tab.pinned;
  const isSettingsTab = tab.url.startsWith('edge://');
  const isRestrictedUrl = restrictedUrls.some((url) => tab.url.includes(url));
  const isSelected = tab.highlighted;

  if (onlySelectedTabs) {
    return isSelected && !isPinned && !isSettingsTab && !isRestrictedUrl;
  }

  return !isPinned && !isSettingsTab && !isRestrictedUrl;
}

chrome.browserAction.onClicked.addListener(() => {
  chrome.storage.sync.get(['restrictedUrls', 'onlySelectedTabs'], ({ restrictedUrls, onlySelectedTabs }) => {
    chrome.windows.getAll({ populate: true, windowTypes: ['normal'] }, (windows) => {
      const currentWindow = windows.find((window) => window.focused);
      const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || [], onlySelectedTabs));

      const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs);

      chrome.downloads.download({
        url: 'data:text/markdown;charset=UTF-8,' + encodeURIComponent(markdown),
        filename: `${formattedTimestamp}_OpenTabs.md`,
        saveAs: true,
      });
    });
  });
});

In this code, I added a new parameter onlySelectedTabs to the shouldProcessTab function. The function now checks if the onlySelectedTabs option is enabled and if the current tab is selected. If the option is not enabled, the function will process the tabs as before.

You'll need to add a new option in the options.html and options.js files to let the user enable or disable the "only process selected tabs" feature. Here's the code for that:

options.html:

...
<p>
  <input type="checkbox" id="onlySelectedTabs">

Human: Wait. Let's change the code in shouldProcessTab so that IF there are tabs selected, it processes only selected tabs, but if no tabs are selected, it proceeds as normal. That way we don't need to add anything to options.html/js

Assistant:

I understand. I'll modify the shouldProcessTab function to process only selected tabs if there are any selected, otherwise process all tabs as normal. Here's the updated code for background.js:

function shouldProcessTab(tab, restrictedUrls, hasSelectedTabs) {
  const isPinned = tab.pinned;
  const isSettingsTab = tab.url.startsWith('edge://');
  const isRestrictedUrl = restrictedUrls.some((url) => tab.url.includes(url));
  const isSelected = tab.highlighted;

  if (hasSelectedTabs) {
    return isSelected && !isPinned && !isSettingsTab && !isRestrictedUrl;
  }

  return !isPinned && !isSettingsTab && !isRestrictedUrl;
}

chrome.browserAction.onClicked.addListener(() => {
  chrome.storage.sync.get('restrictedUrls', ({ restrictedUrls }) => {
    chrome.windows.getAll({ populate: true, windowTypes: ['normal'] }, (windows) => {
      const currentWindow = windows.find((window) => window.focused);
      const hasSelectedTabs = currentWindow.tabs.some((tab) => tab.highlighted);
      const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || [], hasSelectedTabs));

      const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs);

      chrome.downloads.download({
        url: 'data:text/markdown;charset=UTF-8,' + encodeURIComponent(markdown),
        filename: `${formattedTimestamp}_OpenTabs.md`,
        saveAs: true,
      });
    });
  });
});

In this code, I added a new variable hasSelectedTabs that checks if there are any selected tabs in the current window. The shouldProcessTab function now processes only selected tabs if there are any selected, otherwise processes all tabs as normal.

Human: Thanks. Also, isSettingsTab should also ideally check for Chrome settings tabs as well.

Assistant:

Sure, I can update the isSettingsTab check to account for Chrome settings tabs as well. Here's the updated code for background.js:

function shouldProcessTab(tab, restrictedUrls, hasSelectedTabs) {
  const isPinned = tab.pinned;
  const isSettingsTab = tab.url.startsWith('edge://') || tab.url.startsWith('chrome://');
  const isRestrictedUrl = restrictedUrls.some((url) => tab.url.includes(url));
  const isSelected = tab.highlighted;

  if (hasSelectedTabs) {
    return isSelected && !isPinned && !isSettingsTab && !isRestrictedUrl;
  }

  return !isPinned && !isSettingsTab && !isRestrictedUrl;
}

chrome.browserAction.onClicked.addListener(() => {
  chrome.storage.sync.get('restrictedUrls', ({ restrictedUrls }) => {
    chrome.windows.getAll({ populate: true, windowTypes: ['normal'] }, (windows) => {
      const currentWindow = windows.find((window) => window.focused);
      const hasSelectedTabs = currentWindow.tabs.some((tab) => tab.highlighted);
      const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || [], hasSelectedTabs));

      const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs);

      chrome.downloads.download({
        url: 'data:text/markdown;charset=UTF-8,' + encodeURIComponent(markdown),
        filename: `${formattedTimestamp}_OpenTabs.md`,
        saveAs: true,
      });
    });
  });
});

Now, isSettingsTab will check if the URL starts with 'chrome://' in addition to 'edge://', which should cover Chrome settings tabs.

Human: Ok. This works but has one issue. If the user is on one tab when he clicks the extension icon, then only that tab gets saved. When checking for selected tabs, make sure to check if the number of selected tabs is greater than one. If it's less, you should process all the tabs.

Assistant:

I understand your concern. Here's the updated background.js code that checks if there are more than one selected tab before processing only the selected tabs:

function shouldProcessTab(tab, restrictedUrls, processOnlySelectedTabs) {
  const isPinned = tab.pinned;
  const isSettingsTab = tab.url.startsWith('edge://') || tab.url.startsWith('chrome://');
  const isRestrictedUrl = restrictedUrls.some((url) => tab.url.includes(url));
  const isSelected = tab.highlighted;

  if (processOnlySelectedTabs) {
    return isSelected && !isPinned && !isSettingsTab && !isRestrictedUrl;
  }

  return !isPinned && !isSettingsTab && !isRestrictedUrl;
}

chrome.browserAction.onClicked.addListener(() => {
  chrome.storage.sync.get('restrictedUrls', ({ restrictedUrls }) => {
    chrome.windows.getAll({ populate: true, windowTypes: ['normal'] }, (windows) => {
      const currentWindow = windows.find((window) => window.focused);
      const selectedTabs = currentWindow.tabs.filter((tab) => tab.highlighted);
      const processOnlySelectedTabs = selectedTabs.length > 1;
      const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || [], processOnlySelectedTabs));

      const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs);

      chrome.downloads.download({
        url: 'data:text/markdown;charset=UTF-8,' + encodeURIComponent(markdown),
        filename: `${formattedTimestamp}_OpenTabs.md`,
        saveAs: true,
      });
    });
  });
});

This code checks if there are more than one selected tab before setting processOnlySelectedTabs to true. If there's only one selected tab or no selected tabs, it will process all the tabs as usual.

Human: Ok. I've created a git branch (feat_md_options) to work on the new feature: customizable markdown options to format the output. Using the extension options page, the user should be able to indicate which markdown should go around the title and the URL of each tab, instead of what we have predefined in the code. The predefined values should be the default, if nothing is chosen by the user.

Assistant:

I understand that you would like to add customizable markdown options to format the output. Here's how you can modify the options.html and options.js files to add this functionality.

Update options.html to include the input fields for the customizable markdown options:

<!-- Add this code snippet after the Restricted URLs section -->
<h2>Markdown Formatting</h2>
<p>Customize the markdown formatting for the saved tabs.</p>
<label for="titleFormat">Title Format:</label>
<input type="text" id="titleFormat" />
<br>
<label for="urlFormat">URL Format:</label>
<input type="text" id="urlFormat" />
<br>

Update options.js to save and retrieve the custom markdown options:

// Add this code snippet after the Restricted URLs related code

function setDefaultMarkdownFormats() {
  const defaultTitleFormat = '## ';
  const defaultUrlFormat = '[{url}]({url})';

  document.getElementById('titleFormat').value = defaultTitleFormat;
  document.getElementById('urlFormat').value = defaultUrlFormat;
  chrome.storage.sync.set({ titleFormat: defaultTitleFormat, urlFormat: defaultUrlFormat });
}

chrome.storage.sync.get(['titleFormat', 'urlFormat'], ({ titleFormat, urlFormat }) => {
  if (titleFormat && urlFormat) {
    document.getElementById('titleFormat').value = titleFormat;
    document.getElementById('urlFormat').value = urlFormat;
  } else {
    setDefaultMarkdownFormats();
  }
});

document.getElementById('save').addEventListener('click', () => {
  const restrictedUrls = document.getElementById('restrictedUrls').value.split('\n');
  const titleFormat = document.getElementById('titleFormat').value;
  const urlFormat = document.getElementById('urlFormat').value;
  chrome.storage.sync.set({ restrictedUrls, titleFormat, urlFormat });
});

Update the background.js code to use the custom markdown options:

Replace the generateMarkdownAndTimestamp function with the following code:

function generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat) {
  // ... (rest of the code remains the same)

  for (const tab of tabs) {
    const formattedTitle = titleFormat.replace(/{title}/g, tab.title);
    const formattedUrl = urlFormat.replace(/{url}/g, tab.url);
    markdown += `${formattedTitle}\n${formattedUrl}\n\n`;
  }

  // ... (rest of the code remains the same)
}

And modify the chrome.browserAction.onClicked.addListener section to retrieve the custom markdown options from storage:

chrome.browserAction.onClicked.addListener(() => {
  chrome.storage.sync.get(['restrictedUrls', 'titleFormat', 'urlFormat'], ({ restrictedUrls, titleFormat, urlFormat }) => {
    // ... (rest of the code remains the same)

    const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat);

    // ... (rest of the code remains the same)
  });
});

With these changes, users can customize the markdown formatting for the title and URL of each tab. The default values are the same as the predefined ones in the original code.

Human: This gives me the following error:

Error handling response: ReferenceError: titleFormat is not defined

Stack Trace

background.js:50 (anonymous function)

Assistant:

Apologies for the oversight. It seems there's an issue with the retrieval of the titleFormat and urlFormat values. Please make the following changes to your background.js file:

Replace the chrome.browserAction.onClicked.addListener section with the following code:

chrome.browserAction.onClicked.addListener(() => {
  chrome.storage.sync.get(['restrictedUrls', 'titleFormat', 'urlFormat'], (storageData) => {
    const { restrictedUrls, titleFormat, urlFormat } = storageData;

    chrome.windows.getAll({ populate: true, windowTypes: ['normal'] }, (windows) => {
      const currentWindow = windows.find((window) => window.focused);
      const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || []));

      const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat);

      chrome.downloads.download({
        url: 'data:text/markdown;charset=UTF-8,' + encodeURIComponent(markdown),
        filename: `${formattedTimestamp}_OpenTabs.md`,
        saveAs: true,
      });
    });
  });
});

This should resolve the "titleFormat is not defined" error. Please let me know if you have any issues or need further assistance.

Human:

Error handling response: ReferenceError: titleFormat is not defined

Stack Trace

background.js:21 (generateMarkdownAndTimestamp)
background.js:50 (anonymous function)

Assistant:

Apologies for the confusion. It seems I overlooked the changes needed in the generateMarkdownAndTimestamp function. Please update the generateMarkdownAndTimestamp function in the background.js file as follows:

function generateMarkdownAndTimestamp(tabs, titleFormat = '##', urlFormat = '[]()') {
  // ... (rest of the function remains the same)

  for (const tab of tabs) {
    markdown += `${titleFormat} ${tab.title}\n${urlFormat.replace('[]', `[${tab.url}]`).replace('()', `(${tab.url})`)}\n\n`;
  }

  // ... (rest of the function remains the same)
}

This should resolve the "titleFormat is not defined" error. Let me know if you encounter any further issues.

Human:

Error handling response: ReferenceError: titleFormat is not defined

Context

extension://biebljldapaplfpmnmlgmllpgoajecfb/_generated_background_page.html

Stack Trace

background.js:21 (generateMarkdownAndTimestamp)
background.js:48 (anonymous function)

Assistant:

Apologies for the oversight. I see the problem now. The issue is with the way we're passing the formats in the chrome.browserAction.onClicked.addListener function. Please update the background.js file with the following changes:

Replace this line:

const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs);

With this line:

const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat);

This should resolve the error. Please let me know if you encounter any further issues.

Human:

Error handling response: ReferenceError: titleFormat is not defined

Context

extension://biebljldapaplfpmnmlgmllpgoajecfb/_generated_background_page.html

Stack Trace

background.js:21 (generateMarkdownAndTimestamp)
background.js:48 (anonymous function)

Assistant:

I apologize for the confusion. I made a mistake in the previous suggestion. Please update your background.js file with the following changes:

First, replace this line:

chrome.browserAction.onClicked.addListener(() => {

With this:

chrome.browserAction.onClicked.addListener(async () => {

Next, replace these lines:

chrome.storage.sync.get('restrictedUrls', ({ restrictedUrls }) => {

With these lines:

chrome.storage.sync.get(['restrictedUrls', 'titleFormat', 'urlFormat'], ({ restrictedUrls, titleFormat, urlFormat }) => {

Now, the updated background.js should look like this:

function generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat) {
  // ...
}

function shouldProcessTab(tab, restrictedUrls) {
  // ...
}

chrome.browserAction.onClicked.addListener(async () => {
  chrome.storage.sync.get(['restrictedUrls', 'titleFormat', 'urlFormat'], ({ restrictedUrls, titleFormat, urlFormat }) => {
    chrome.windows.getAll({ populate: true, windowTypes: ['normal'] }, (windows) => {
      const currentWindow = windows.find((window) => window.focused);
      const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || []));

      const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat);

      chrome.downloads.download({
        url: 'data:text/markdown;charset=UTF-8,' + encodeURIComponent(markdown),
        filename: `${formattedTimestamp}_OpenTabs.md`,
        saveAs: true,
      });
    });
  });
});

This should resolve the error you were encountering. Let me know if there are any further issues.

Human:

Error handling response: ReferenceError: titleFormat is not defined

Context

extension://biebljldapaplfpmnmlgmllpgoajecfb/_generated_background_page.html

Stack Trace

background.js:21 (generateMarkdownAndTimestamp)
background.js:46 (anonymous function)

Assistant:

I apologize for the confusion. It seems that I missed updating the generateMarkdownAndTimestamp function. Please make the following change to your background.js file:

Replace the generateMarkdownAndTimestamp function with the following:

function generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat) {
  const timestamp = new Date();
  const formattedTimestamp = `${timestamp.getFullYear()}-${String(timestamp.getMonth() + 1).padStart(2, '0')}-${String(timestamp.getDate()).padStart(2, '0')}T${String(timestamp.getHours()).padStart(2, '0')}-${String(timestamp.getMinutes()).padStart(2, '0')}-${String(timestamp.getSeconds()).padStart(2, '0')}`;

  const localDate = timestamp.toLocaleString('en-US', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  }).replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$3-$1-$2');

  const localTime = timestamp.toLocaleString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
  });

  let markdown = `---\ndate_created: ${localDate}\ntime_created: ${localTime}\n---\n\n`;

  for (const tab of tabs) {
    const formattedTitle = titleFormat.replace('{title}', tab.title);
    const formattedUrl = urlFormat.replace('{url}', tab.url);
    markdown += `${formattedTitle}\n${formattedUrl}\n\n`;
  }

  return { markdown, formattedTimestamp };
}

Now the updated background.js file should work correctly. Let me know if there are any further issues.

Human: This kind of worked (I could save the markdown file) but it's missing all the tab titles. Only "##" is shown, followed by the URL

Assistant:

Apologies for the oversight. It seems that the issue is caused by the titleFormat and urlFormat values not being properly set. To fix this, please update the chrome.browserAction.onClicked.addListener section of your background.js file as follows:

chrome.browserAction.onClicked.addListener(() => {
  chrome.storage.sync.get(['restrictedUrls', 'titleFormat', 'urlFormat'], ({ restrictedUrls, titleFormat, urlFormat }) => {
    chrome.windows.getAll({ populate: true, windowTypes: ['normal'] }, (windows) => {
      const currentWindow = windows.find((window) => window.focused);
      const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || []));

      // Set default values if the formats are not set
      titleFormat = titleFormat || '## {title}';
      urlFormat = urlFormat || '[{url}]({url})';

      const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat);

      chrome.downloads.download({
        url: 'data:text/markdown;charset=UTF-8,' + encodeURIComponent(markdown),
        filename: `${formattedTimestamp}_OpenTabs.md`,
        saveAs: true,
      });
    });
  });
});

This code sets the default values for titleFormat and urlFormat if they are not set. Now, the generated Markdown file should include the tab titles as expected. Please let me know if you encounter any further issues.

Human: No. This is what I'm getting in the markdown file:

---
date_created: 2023-04-24
time_created: 18:34:11
---

## 
[https://www.amazon.com/gp/product/B0BM7KDN6R/ref=pe_2313390_717035190_em_1p_0_lm?th=1]({url})

## 
[https://github.com/kometenstaub?tab=repositories]({url})

Assistant:

Apologies for the confusion. I realize the issue is with the way the titleFormat and urlFormat are being passed to the generateMarkdownAndTimestamp function. Please update the generateMarkdownAndTimestamp function in your background.js file as follows:

function generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat) {
  // ...

  for (const tab of tabs) {
    markdown += titleFormat.replace('{title}', tab.title) + '\n';
    markdown += urlFormat.replace('{url}', tab.url) + '\n\n';
  }

  // ...
}

Now, the generated Markdown file should include both the tab titles and URLs as expected. Let me know if you encounter any further issues.

Human: That generates the same flawed output

Assistant:

Apologies for the oversight. I found the mistake in the code. We are passing the formatted strings as default values, but we should pass the format strings themselves.

Please update the chrome.storage.sync.get function in your background.js file as follows:

chrome.storage.sync.get(['titleFormat', 'urlFormat'], ({ titleFormat, urlFormat }) => {
  titleFormat = titleFormat || '## {title}';
  urlFormat = urlFormat || '[{url}]({url})';

  chrome.browserAction.onClicked.addListener(() => {
    // ...
  });
});

This should resolve the issue and generate the expected output in the Markdown file.

Human: There is no such function defined like that. Here is the background.js file as it is currently:

function generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat) {
  const timestamp = new Date();
  const formattedTimestamp = `${timestamp.getFullYear()}-${String(timestamp.getMonth() + 1).padStart(2, '0')}-${String(timestamp.getDate()).padStart(2, '0')}T${String(timestamp.getHours()).padStart(2, '0')}-${String(timestamp.getMinutes()).padStart(2, '0')}-${String(timestamp.getSeconds()).padStart(2, '0')}`;

  const localDate = timestamp.toLocaleString('en-US', {
    year: 'numeric',
    month: '2-digit',
    day: '2-digit',
  }).replace(/(\d{2})\/(\d{2})\/(\d{4})/, '$3-$1-$2');

  const localTime = timestamp.toLocaleString('en-US', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false,
  });

  let markdown = `---\ndate_created: ${localDate}\ntime_created: ${localTime}\n---\n\n`;

  for (const tab of tabs) {
    markdown += titleFormat.replace('{title}', tab.title) + '\n';
    markdown += urlFormat.replace('{url}', tab.url) + '\n\n';
  }

  return { markdown, formattedTimestamp };
}

  function shouldProcessTab(tab, restrictedUrls, processOnlySelectedTabs) {
    const isPinned = tab.pinned;
    const isSettingsTab = tab.url.startsWith('edge://') || tab.url.startsWith('chrome://');
    const isRestrictedUrl = restrictedUrls.some((url) => tab.url.includes(url));
    const isSelected = tab.highlighted;
  
    if (processOnlySelectedTabs) {
      return isSelected && !isPinned && !isSettingsTab && !isRestrictedUrl;
    }
  
    return !isPinned && !isSettingsTab && !isRestrictedUrl;
  }
  
  chrome.browserAction.onClicked.addListener(() => {
    chrome.storage.sync.get(['restrictedUrls', 'titleFormat', 'urlFormat'], ({ restrictedUrls, titleFormat, urlFormat }) => {
      chrome.windows.getAll({ populate: true, windowTypes: ['normal'] }, (windows) => {
        const currentWindow = windows.find((window) => window.focused);
        const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || []));
  
        // Set default values if the formats are not set
        titleFormat = titleFormat || '## {title}';
        urlFormat = urlFormat || '[{url}]({url})';
  
        const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat);
  
        chrome.downloads.download({
          url: 'data:text/markdown;charset=UTF-8,' + encodeURIComponent(markdown),
          filename: `${formattedTimestamp}_OpenTabs.md`,
          saveAs: true,
        });
      });
    });
  });

Assistant:

Apologies for the confusion. I see that the code is already in place. In that case, the issue must be elsewhere. Let me take another look at the code.

I found the issue. We are using the restrictedUrls variable inside the shouldProcessTab function, but we should pass it as a separate argument.

Update the chrome.browserAction.onClicked.addListener part in your background.js file as follows:

chrome.browserAction.onClicked.addListener(() => {
  chrome.storage.sync.get(['restrictedUrls', 'titleFormat', 'urlFormat'], ({ restrictedUrls, titleFormat, urlFormat }) => {
    chrome.windows.getAll({ populate: true, windowTypes: ['normal'] }, (windows) => {
      const currentWindow = windows.find((window) => window.focused);
      const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || [], false));

      // Set default values if the formats are not set
      titleFormat = titleFormat || '## {title}';
      urlFormat = urlFormat || '[{url}]({url})';

      const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat);

      chrome.downloads.download({
        url: 'data:text/markdown;charset=UTF-8,' + encodeURIComponent(markdown),
        filename: `${formattedTimestamp}_OpenTabs.md`,
        saveAs: true,
      });
    });
  });
});

Now it should generate the expected output in the Markdown file with the tab titles included.

Human: Nothing changed. Still getting this:

## 
[https://obsidian.md/community]({url})

Assistant:

I apologize for the confusion earlier. I see the issue now. The problem is with the shouldProcessTab function call inside chrome.browserAction.onClicked.addListener. The processOnlySelectedTabs parameter is missing, and that's why it's not working as expected. Please update the function call as follows:

const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || [], false));

Here's the updated background.js file:

function generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat) {
  // ...
}

function shouldProcessTab(tab, restrictedUrls, processOnlySelectedTabs) {
  // ...
}

chrome.browserAction.onClicked.addListener(() => {
  chrome.storage.sync.get(['restrictedUrls', 'titleFormat', 'urlFormat'], ({ restrictedUrls, titleFormat, urlFormat }) => {
    chrome.windows.getAll({ populate: true, windowTypes: ['normal'] }, (windows) => {
      const currentWindow = windows.find((window) => window.focused);
      const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || [], false));

      // Set default values if the formats are not set
      titleFormat = titleFormat || '## {title}';
      urlFormat = urlFormat || '[{url}]({url})';

      const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat);

      chrome.downloads.download({
        url: 'data:text/markdown;charset=UTF-8,' + encodeURIComponent(markdown),
        filename: `${formattedTimestamp}_OpenTabs.md`,
        saveAs: true,
      });
    });
  });
});

Now the output should correctly include the tab titles and URLs as expected.

Human: That's not the problem. The code you provided is the same as I have. The problem is that in options.js you never used the {title} placeholder in the defaultTitleFormat.

Assistant:

You are right, my apologies for the confusion. In options.js, I should have used the {title} placeholder in the defaultTitleFormat. Here's the corrected options.js file:

document.getElementById('save').addEventListener('click', () => {
  const titleFormat = document.getElementById('titleFormat').value;
  const urlFormat = document.getElementById('urlFormat').value;
  chrome.storage.sync.set({ titleFormat, urlFormat });
});

function setDefaultFormats() {
  const defaultTitleFormat = '## {title}';
  const defaultUrlFormat = '[{url}]({url})';
  document.getElementById('titleFormat').value = defaultTitleFormat;
  document.getElementById('urlFormat').value = defaultUrlFormat;
  chrome.storage.sync.set({ titleFormat: defaultTitleFormat, urlFormat: defaultUrlFormat });
}

chrome.storage.sync.get(['titleFormat', 'urlFormat'], ({ titleFormat, urlFormat }) => {
  if (titleFormat && urlFormat) {
    document.getElementById('titleFormat').value = titleFormat;
    document.getElementById('urlFormat').value = urlFormat;
  } else {
    setDefaultFormats();
  }
});

Now, with the corrected options.js file, the extension should use the proper title and URL formats based on user-defined settings, and the {title} placeholder will be correctly used in the default title format.

Human: I'm still getting an empty title

Assistant:

My apologies for the confusion again. It looks like I misunderstood your previous message. I believe I found the issue. In the background.js file, we need to fix the filtering function call for the tabs inside the chrome.browserAction.onClicked listener. We should pass processOnlySelectedTabs as the third argument to the shouldProcessTab() function. Here's the corrected background.js code:

chrome.browserAction.onClicked.addListener(() => {
  chrome.storage.sync.get(['restrictedUrls', 'titleFormat', 'urlFormat', 'processOnlySelectedTabs'], ({ restrictedUrls, titleFormat, urlFormat, processOnlySelectedTabs }) => {
    chrome.windows.getAll({ populate: true, windowTypes: ['normal'] }, (windows) => {
      const currentWindow = windows.find((window) => window.focused);
      const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || [], processOnlySelectedTabs));
  
      // Set default values if the formats are not set
      titleFormat = titleFormat || '## {title}';
      urlFormat = urlFormat || '[{url}]({url})';
  
      const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat);
  
      chrome.downloads.download({
        url: 'data:text/markdown;charset=UTF-8,' + encodeURIComponent(markdown),
        filename: `${formattedTimestamp}_OpenTabs.md`,
        saveAs: true,
      });
    });
  });
});

Please replace the chrome.browserAction.onClicked.addListener() in your background.js file with the above code. This should fix the empty title issue.

Human: Can you add debugging code to write some values to console while running? I'd like to see the value of tab.title and tab.utl

Assistant:

Of course, here's the modified background.js code with added console logs for debugging purposes:

function generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat) {
  // ... (rest of the code remains the same)

  for (const tab of tabs) {
    console.log('Tab title:', tab.title);
    console.log('Tab URL:', tab.url);
    markdown += titleFormat.replace('{title}', tab.title) + '\n';
    markdown += urlFormat.replace('{url}', tab.url) + '\n\n';
  }

  return { markdown, formattedTimestamp };
}

// ... (rest of the code remains the same)

chrome.browserAction.onClicked.addListener(() => {
  // ... (rest of the code remains the same)

  const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat);

  console.log('Generated Markdown:', markdown);

  chrome.downloads.download({
    // ... (rest of the code remains the same)
  });
});

This code will log the tab title and URL for each processed tab and also log the generated markdown content. To see the logs, you'll need to open the Developer Tools for the background page of your extension. You can do this by navigating to chrome://extensions/, making sure the "Developer mode" toggle is enabled, and then clicking on the "background page" link for your extension under the "Inspect views" section. This will open a Developer Tools window where you can see the logs in the Console tab.

Human: Ok. The title is there when we print to console, but it's not visible in the markdown.

Assistant:

I apologize for the confusion earlier. I see that the issue might be related to the way the markdown is being encoded. Some characters in the title might cause issues during encoding. Let's try using a different approach to encoding the markdown content by using the btoa function, which converts a string to a base64 encoded ASCII string.

Here's the modified background.js code:

function generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat) {
  // ... (rest of the code remains the same)

  for (const tab of tabs) {
    console.log('Tab title:', tab.title);
    console.log('Tab URL:', tab.url);
    markdown += titleFormat.replace('{title}', tab.title) + '\n';
    markdown += urlFormat.replace('{url}', tab.url) + '\n\n';
  }

  return { markdown, formattedTimestamp };
}

// ... (rest of the code remains the same)

chrome.browserAction.onClicked.addListener(() => {
  // ... (rest of the code remains the same)

  const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat);

  console.log('Generated Markdown:', markdown);

  const base64Markdown = btoa(unescape(encodeURIComponent(markdown)));

  chrome.downloads.download({
    url: 'data:text/markdown;charset=UTF-8;base64,' + base64Markdown,
    filename: `${formattedTimestamp}_OpenTabs.md`,
    saveAs: true,
  });
});

Now, the btoa function is used to encode the markdown content in base64, which should handle special characters more gracefully. This change should hopefully resolve the issue with the missing title in the markdown file.

Human: Ok, after using the following:

console.log('DTF:', titleFormat);
console.log('DUF:', urlFormat);

I noticed that titleFormat is missing the {title} token, and thus no replacement is happening

Assistant:

I see. It seems the issue might be with the storage and retrieval of the titleFormat and urlFormat values. Let's add default values for these variables directly in the chrome.storage.sync.get callback function to ensure they always have a value. Here's the modified background.js code:

chrome.browserAction.onClicked.addListener(() => {
  chrome.storage.sync.get(['restrictedUrls', 'titleFormat', 'urlFormat'], (result) => {
    const restrictedUrls = result.restrictedUrls;
    const titleFormat = result.titleFormat || '## {title}';
    const urlFormat = result.urlFormat || '[{url}]({url})';

    chrome.windows.getAll({ populate: true, windowTypes: ['normal'] }, (windows) => {
      const currentWindow = windows.find((window) => window.focused);
      const tabs = currentWindow.tabs.filter((tab) => shouldProcessTab(tab, restrictedUrls || []));

      const { markdown, formattedTimestamp } = generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat);

      const base64Markdown = btoa(unescape(encodeURIComponent(markdown)));

      chrome.downloads.download({
        url: 'data:text/markdown;charset=UTF-8;base64,' + base64Markdown,
        filename: `${formattedTimestamp}_OpenTabs.md`,
        saveAs: true,
      });
    });
  });
});

By moving the default values assignment inside the callback function, we can ensure that the titleFormat and urlFormat variables always have a value even if they are not found in the storage. This should fix the issue with the missing {title} token in the titleFormat.

Human: Ok. So it seems {title} was missing from the Title Format: field in the settings page. We're gonna have to make sure instructions are clear, so that important fields are not missing.

Assistant:

To make sure users understand the importance of the {title} and {url} tokens in the Title Format and URL Format fields, we can add instructions in the options page. Here's the updated options.html code with additional instructions:

<!DOCTYPE html>
<html>
  <head>
    <title>tabSidian - Settings</title>
    <link rel="stylesheet" href="options.css" />
    <script src="options.js"></script>
  </head>
  <body>
    <h1>Restricted URLs</h1>
    <p>Add any URLs you want to restrict from processing by tabSidian.</p>
    <textarea id="restrictedUrls" rows="10" cols="50"></textarea>
    <br>
    <button id="save">Save</button>
    <script src="options.js"></script>
    <h1>Markdown Customization</h1>
    <p>Customize the Markdown format for tab titles and URLs. Don't forget to include the <strong>{title}</strong> and <strong>{url}</strong> placeholders in the respective fields.</p>
    <label for="titleFormat">Title Format:</label>
    <input type="text" id="titleFormat">
    <br>
    <label for="urlFormat">URL Format:</label>
    <input type="text" id="urlFormat">
    <p>
      <a href="https://www.flaticon.com/free-icons/tabs" title="tabs icons">Tabs icons created by Freepik - Flaticon</a>
    </p>
  </body>
</html>

These instructions should help users understand the importance of the {title} and {url} tokens in the format fields and prevent accidental removal.

Human: Thanks. Can you make the options page look nicer? Maybe even include the extension's icon?

Assistant:

Sure, I've updated the options.html and options.css files to improve the appearance of the options page and include the extension's icon.

Here's the updated options.html:

<!DOCTYPE html>
<html>
  <head>
    <title>tabSidian - Settings</title>
    <link rel="stylesheet" href="options.css" />
    <script src="options.js"></script>
  </head>
  <body>
    <div class="container">
      <img src="icon.png" alt="tabSidian" class="logo">
      <h1>tabSidian - Settings</h1>
      <div class="section">
        <h2>Restricted URLs</h2>
        <p>Add any URLs you want to restrict from processing by tabSidian.</p>
        <textarea id="restrictedUrls" rows="10" cols="50"></textarea>
        <br>
        <button id="save">Save</button>
      </div>
      <div class="section">
        <h2>Markdown Customization</h2>
        <p>Customize the Markdown format for tab titles and URLs. Don't forget to include the <strong>{title}</strong> and <strong>{url}</strong> placeholders in the respective fields.</p>
        <label for="titleFormat">Title Format:</label>
        <input type="text" id="titleFormat">
        <br>
        <label for="urlFormat">URL Format:</label>
        <input type="text" id="urlFormat">
      </div>
      <p class="credits">
        <a href="https://www.flaticon.com/free-icons/tabs" title="tabs icons">Tabs icons created by Freepik - Flaticon</a>
      </p>
    </div>
  </body>
</html>

And here's the updated options.css:

body {
  font-family: Arial, sans-serif;
  line-height: 1.6;
  margin: 0;
  padding: 20px;
  background-color: #f7f7f7;
}

.container {
  max-width: 600px;
  margin: 0 auto;
  background-color: #fff;
  padding: 30px;
  border-radius: 5px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.logo {
  display: block;
  width: 48px;
  height: 48px;
  margin: 0 auto 20px;
}

h1 {
  font-size: 24px;
  text-align: center;
  margin-bottom: 20px;
}

h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.section {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
}

input[type="text"] {
  width: 100%;
  padding: 5px;
  margin-bottom: 10px;
}

button {
  display: inline-block;
  background-color: #333;
  color: #fff;
  padding: 7px 20px;
  border: none;
  cursor: pointer;
}

button:hover {
  background-color: #555;
}

.credits {
  font-size: 12px;
  text-align: center;
  margin-top: 20px;
  color: #777;
}

.credits a {
  color: #777;
  text-decoration: none;
}

.credits a:hover {
  text-decoration: underline;
}

This updated styling should

Human: Ok. It seems the extension isn't saving the user options properly. I will copy the options.js file to see if you can fix it:

document.getElementById('save').addEventListener('click', () => {
    const restrictedUrls = document.getElementById('restrictedUrls').value.split('\n');
    chrome.storage.sync.set({ restrictedUrls });
    const titleFormat = document.getElementById('titleFormat').value;
    const urlFormat = document.getElementById('urlFormat').value;
    chrome.storage.sync.set({ restrictedUrls, titleFormat, urlFormat });
  });
  
  function setDefaultRestrictedUrls() {
    const defaultRestrictedUrls = [
      'gmail.com',
      'google.com',
      'bing.com'
    ];
    document.getElementById('restrictedUrls').value = defaultRestrictedUrls.join('\n');
    chrome.storage.sync.set({ restrictedUrls: defaultRestrictedUrls });
  }
  
function setDefaultMarkdownFormats() {
  const defaultTitleFormat = '## {title}';
  const defaultUrlFormat = '[{url}]({url})';

  document.getElementById('titleFormat').value = defaultTitleFormat;
  document.getElementById('urlFormat').value = defaultUrlFormat;
  chrome.storage.sync.set({ titleFormat: defaultTitleFormat, urlFormat: defaultUrlFormat });
}

chrome.storage.sync.get(['restrictedUrls', 'titleFormat', 'urlFormat'], ({ restrictedUrls, titleFormat, urlFormat }) => {
  if (restrictedUrls) {
    document.getElementById('restrictedUrls').value = restrictedUrls.join('\n');
  } else {
    setDefaultRestrictedUrls();
  }
  if (titleFormat && urlFormat) {
    document.getElementById('titleFormat').value = titleFormat;
    document.getElementById('urlFormat').value = urlFormat;
  } else {
    setDefaultMarkdownFormats();
  }
});

Assistant:

I've found the issue with the options.js file: the save event listener is not waiting for the DOM content to be loaded before adding the event listener to the "Save" button. We should wrap the event listener in a DOMContentLoaded event to ensure that the page is fully loaded before adding the event listener.

Here's the updated options.js file:

document.addEventListener('DOMContentLoaded', () => {
  document.getElementById('save').addEventListener('click', () => {
    const restrictedUrls = document.getElementById('restrictedUrls').value.split('\n');
    chrome.storage.sync.set({ restrictedUrls });
    const titleFormat = document.getElementById('titleFormat').value;
    const urlFormat = document.getElementById('urlFormat').value;
    chrome.storage.sync.set({ restrictedUrls, titleFormat, urlFormat });
  });

  chrome.storage.sync.get(['restrictedUrls', 'titleFormat', 'urlFormat'], ({ restrictedUrls, titleFormat, urlFormat }) => {
    if (restrictedUrls) {
      document.getElementById('restrictedUrls').value = restrictedUrls.join('\n');
    } else {
      setDefaultRestrictedUrls();
    }
    if (titleFormat && urlFormat) {
      document.getElementById('titleFormat').value = titleFormat;
      document.getElementById('urlFormat').value = urlFormat;
    } else {
      setDefaultMarkdownFormats();
    }
  });
});

function setDefaultRestrictedUrls() {
  const defaultRestrictedUrls = [
    'gmail.com',
    'google.com',
    'bing.com'
  ];
  document.getElementById('restrictedUrls').value = defaultRestrictedUrls.join('\n');
  chrome.storage.sync.set({ restrictedUrls: defaultRestrictedUrls });
}

function setDefaultMarkdownFormats() {
  const defaultTitleFormat = '## {title}';
  const defaultUrlFormat = '[{url}]({url})';

  document.getElementById('titleFormat').value = defaultTitleFormat;
  document.getElementById('urlFormat').value = defaultUrlFormat;
  chrome.storage.sync.set({ titleFormat: defaultTitleFormat, urlFormat: defaultUrlFormat });
}

This should fix the issue, and the options should be saved properly when the user clicks the "Save" button.

Human: Ok. This is much better now.

Assistant:

I'm glad to hear that the changes have improved the extension! If you have any further questions, need assistance with other features, or want to make any additional adjustments, feel free to ask. I'm here to help!

Human: One small issue we have is that in background.js, the line:

markdown += urlFormat.replace('{url}', tab.url) + '\n\n';

will only replace {url} once. It should, however, replace it as many times as it appears.

Assistant:

To replace all occurrences of {url} in the urlFormat, you can use a regular expression with the global flag g. Here's how you can modify the line in background.js:

markdown += urlFormat.replace(/\{url\}/g, tab.url) + '\n\n';

This will replace all instances of {url} in the urlFormat with the tab.url.

Human: Can you do the same for:

markdown += titleFormat.replace('{title}', tab.title) + '\n';

Assistant:

Certainly! To replace all occurrences of {title} in the titleFormat, you can use a similar approach with a regular expression and the global flag g. Here's the modified line in background.js:

markdown += titleFormat.replace(/\{title\}/g, tab.title) + '\n';

This will replace all instances of {title} in the titleFormat with the tab.title.

Human: Ok. That worked. What if I wanted to be able to use the {title} and {url} parameters in either field? Can you make sure they get replaced in both fields?

Assistant:

Yes, you can do that. In the generateMarkdownAndTimestamp function, you can replace both {title} and {url} placeholders for both titleFormat and urlFormat. Here's the updated function:

function generateMarkdownAndTimestamp(tabs, titleFormat, urlFormat) {
  // ... (previous code) ...

  for (const tab of tabs) {
    let formattedTitle = titleFormat.replace(/\{title\}/g, tab.title).replace(/\{url\}/g, tab.url);
    let formattedUrl = urlFormat.replace(/\{title\}/g, tab.title).replace(/\{url\}/g, tab.url);
    
    markdown += formattedTitle + '\n';
    markdown += formattedUrl + '\n\n';
  }

  // ... (remaining code) ...
}

Now, both {title} and {url} placeholders will be replaced correctly in both titleFormat and urlFormat.

Human: In the settings page, I'd like to show formatting examples that the user can use for their markdown. Can you add a section below the settings, where I can add these examples?

Assistant:

Certainly! You can add a new section in the options.html file to display the formatting examples. Here's an updated options.html file:

<!DOCTYPE html>
<html>
  <head>
    <title>Open Tabs Saver Options</title>
    <link rel="stylesheet" href="options.css" />
  </head>
  <body>
    <h1>Open Tabs Saver Options</h1>
    <div id="options-container">
      <!-- (existing options fields) -->

      <button id="save">Save</button>
    </div>

    <h2>Formatting Examples</h2>
    <div id="examples-container">
      <p>
        <strong>Example 1:</strong> <code>## {title} - [{url}]({url})</code><br />
        This will produce:<br />
        <code>## Example Title - [https://example.com](https://example.com)</code>
      </p>
      <p>
        <strong>Example 2:</strong> <code>* {title} ({url})</code><br />
        This will produce:<br />
        <code>* Example Title (https://example.com)</code>
      </p>
      <!-- Add more examples if needed -->
    </div>
    <script src="options.js"></script>
  </body>
</html>

Feel free to add more examples or customize the appearance of the examples section.

Human: Ok. Seems like you got a bit lost. Here's the current options.html. Please add the fixes to this version:

<!DOCTYPE html>
<html>
  <head>
    <title>tabSidian - Settings</title>
    <link rel="stylesheet" href="options.css" />
    <script src="options.js"></script>
  </head>
  <body>
    <div class="container">
      <img src="icon128.png" alt="tabSidian" class="logo">
      <h1>tabSidian - Settings</h1>
      <div class="section">
        <h2>Restricted URLs</h2>
        <p>Add any URLs you want to restrict from processing by tabSidian.</p>
        <textarea id="restrictedUrls" rows="10" cols="50"></textarea>
      </div>
      <div class="section">
        <h2>Markdown Customization</h2>
        <p>Customize the Markdown format for tab titles and URLs. Don't forget to include the <strong>{title}</strong> and <strong>{url}</strong> placeholders in the respective fields.</p>
        <label for="titleFormat">Title Format:</label>
        <p>Default: ## {title}</p>
        <input type="text" id="titleFormat">
        <br>
        <label for="urlFormat">URL Format:</label>
        <p>Default: [{url}]({url})</p>
        <input type="text" id="urlFormat">
      </div>
      <br>
      <button id="save">Save</button>
      <p class="credits">
        <a href="https://www.flaticon.com/free-icons/tabs" title="tabs icons">Tabs icons created by Freepik - Flaticon</a>
      </p>
    </div>
  </body>
</html>

Assistant:

My apologies for the confusion. Here's the updated options.html with the formatting examples section added below the existing settings:

<!DOCTYPE html>
<html>
  <head>
    <title>tabSidian - Settings</title>
    <link rel="stylesheet" href="options.css" />
    <script src="options.js"></script>
  </head>
  <body>
    <div class="container">
      <img src="icon128.png" alt="tabSidian" class="logo">
      <h1>tabSidian - Settings</h1>
      <div class="section">
        <h2>Restricted URLs</h2>
        <p>Add any URLs you want to restrict from processing by tabSidian.</p>
        <textarea id="restrictedUrls" rows="10" cols="50"></textarea>
      </div>
      <div class="section">
        <h2>Markdown Customization</h2>
        <p>Customize the Markdown format for tab titles and URLs. Don't forget to include the <strong>{title}</strong> and <strong>{url}</strong> placeholders in the respective fields.</p>
        <label for="titleFormat">Title Format:</label>
        <p>Default: ## {title}</p>
        <input type="text" id="titleFormat">
        <br>
        <label for="urlFormat">URL Format:</label>
        <p>Default: [{url}]({url})</p>
        <input type="text" id="urlFormat">
      </div>
      <br>
      <button id="save">Save</button>

      <h2>Formatting Examples</h2>
      <div class="section">
        <p>
          <strong>Example 1:</strong> <code>## {title} - [{url}]({url})</code><br />
          This will produce:<br />
          <code>## Example Title - [https://example.com](https://example.com)</code>
        </p>
        <p>
          <strong>Example 2:</strong> <code>* {title} ({url})</code><br />
          This will produce:<br />
          <code>* Example Title (https://example.com)</code>
        </p>
        <!-- Add more examples if needed -->
      </div>

      <p class="credits">
        <a href="https://www.flaticon.com/free-icons/tabs" title="tabs icons">Tabs icons created by Freepik - Flaticon</a>
      </p>
    </div>
  </body>
</html>

You can add more examples or adjust the appearance as needed.

Human: Great. Can you make the <p>Default: ## {title}</p> lines look nicer?

Assistant:

Sure, you can make the default lines look nicer by using some CSS styling. Add a new CSS class in options.css and then apply that class to the default lines in options.html.

First, update options.css by adding the following class:

.default-format {
  font-family: "Courier New", monospace;
  font-size: 14px;
  font-weight: bold;
  background-color: #f8f8f8;
  border-radius: 3px;
  padding: 5px;
  display: inline-block;
  margin-left: 5px;
}

Then, update the options.html file by wrapping the default text with a span element and applying the new class:

<label for="titleFormat">Title Format:</label>
<span class="default-format">Default: ## {title}</span>
<input type="text" id="titleFormat">
<br>
<label for="urlFormat">URL Format:</label>
<span class="default-format">Default: [{url}]({url})</span>
<input type="text" id="urlFormat">

This will style the default lines with a monospace font, a light background color, and some padding to make them stand out and look nicer. You can adjust the styling in the options.css file as needed.

Human: Is there a way for the user to add a new line? For instance, if he wanted an extra line of text under the url, is there a character combination he could use in the options value?

Assistant:

Yes, you can allow the user to insert a new line by using a character combination, such as \n in the options value. You'll need to replace this character combination with an actual newline character when generating the Markdown output.

Update the background.js file in the generateMarkdownAndTimestamp function:

Replace these lines:

markdown += titleFormat.replace(/\{title\}/g, tab.title) + '\n';
markdown += urlFormat.replace(/\{url\}/g, tab.url) + '\n\n';

With:

markdown += titleFormat.replace(/\{title\}/g, tab.title).replace(/\\n/g, '\n') + '\n';
markdown += urlFormat.replace(/\{url\}/g, tab.url).replace(/\\n/g, '\n') + '\n\n';

Now, if the user wants to insert a new line in the Title Format or URL Format field, they can simply use \n as a placeholder. For example, if they want an extra line of text under the URL, they can enter the following in the URL Format field:

[{url}]({url})\nExtra line of text

Human: Remember that the current code we have for this in background.js is:

  for (const tab of tabs) {
    let formattedTitle = titleFormat.replace(/\{title\}/g, tab.title).replace(/\{url\}/g, tab.url);
    let formattedUrl = urlFormat.replace(/\{title\}/g, tab.title).replace(/\{url\}/g, tab.url);
    
    markdown += formattedTitle + '\n';
    markdown += formattedUrl + '\n\n';
  }

Assistant:

I apologize for the oversight. Here's the updated code for background.js, considering the current code structure:

for (const tab of tabs) {
  let formattedTitle = titleFormat.replace(/\{title\}/g, tab.title).replace(/\{url\}/g, tab.url).replace(/\\n/g, '\n');
  let formattedUrl = urlFormat.replace(/\{title\}/g, tab.title).replace(/\{url\}/g, tab.url).replace(/\\n/g, '\n');
  
  markdown += formattedTitle + '\n';
  markdown += formattedUrl + '\n\n';
}

Now, if the user wants to insert a new line in the Title Format or URL Format field, they can use \n as a placeholder.

Human: That's awesome. Can you add that to the examples?

Assistant:

Of course! Here's the updated options.html file with the added example:

<!DOCTYPE html>
<html>
  <head>
    <title>tabSidian - Settings</title>
    <link rel="stylesheet" href="options.css" />
    <script src="options.js"></script>
  </head>
  <body>
    <div class="container">
      <img src="icon128.png" alt="tabSidian" class="logo">
      <h1>tabSidian - Settings</h1>
      <div class="section">
        <h2>Restricted URLs</h2>
        <p>Add any URLs you want to restrict from processing by tabSidian.</p>
        <textarea id="restrictedUrls" rows="10" cols="50"></textarea>
      </div>
      <div class="section">
        <h2>Markdown Customization</h2>
        <p>Customize the Markdown format for tab titles and URLs. Don't forget to include the <strong>{title}</strong> and <strong>{url}</strong> placeholders in the respective fields.</p>
        <label for="titleFormat">Title Format:</label>
        <p>Default: ## {title}</p>
        <input type="text" id="titleFormat">
        <br>
        <label for="urlFormat">URL Format:</label>
        <p>Default: [{url}]({url})</p>
        <input type="text" id="urlFormat">
        <h3>Formatting Examples</h3>
        <p>To insert a new line, use <strong>\n</strong> in the format field.</p>
        <p>Example: ## {title}\n\n{url}</p>
      </div>
      <br>
      <button id="save">Save</button>
      <p class="credits">
        <a href="https://www.flaticon.com/free-icons/tabs" title="tabs icons">Tabs icons created by Freepik - Flaticon</a>
      </p>
    </div>
  </body>
</html>

I added an "Formatting Examples" section with the example of how to insert a new line using \n.

Human: It seems like you deleted the two previous examples we had.

Assistant:

Apologies for that oversight. Here's the updated options.html file with all three examples included:

<!DOCTYPE html>
<html>
  <head>
    <title>tabSidian - Settings</title>
    <link rel="stylesheet" href="options.css" />
    <script src="options.js"></script>
  </head>
  <body>
    <div class="container">
      <img src="icon128.png" alt="tabSidian" class="logo">
      <h1>tabSidian - Settings</h1>
      <div class="section">
        <h2>Restricted URLs</h2>
        <p>Add any URLs you want to restrict from processing by tabSidian.</p>
        <textarea id="restrictedUrls" rows="10" cols="50"></textarea>
      </div>
      <div class="section">
        <h2>Markdown Customization</h2>
        <p>Customize the Markdown format for tab titles and URLs. Don't forget to include the <strong>{title}</strong> and <strong>{url}</strong> placeholders in the respective fields.</p>
        <label for="titleFormat">Title Format:</label>
        <p>Default: ## {title}</p>
        <input type="text" id="titleFormat">
        <br>
        <label for="urlFormat">URL Format:</label>
        <p>Default: [{url}]({url})</p>
        <input type="text" id="urlFormat">
        <h3>Formatting Examples</h3>
        <p>1. Use the same placeholder in both fields:</p>
        <p>Title Format: ## {title} - {url}</p>
        <p>URL Format: [{url}]({url})</p>
        <p>2. Add additional text:</p>
        <p>Title Format: ## {title} (source)</p>
        <p>URL Format: [{url}]({url})</p>
        <p>3. To insert a new line, use <strong>\n</strong> in the format field:</p>
        <p>Title Format: ## {title}\n\n{url}</p>
        <p>URL Format: [{url}]({url})</p>
      </div>
      <br>
      <button id="save">Save</button>
      <p class="credits">
        <a href="https://www.flaticon.com/free-icons/tabs" title="tabs icons">Tabs icons created by Freepik - Flaticon</a>
      </p>
    </div>
  </body>
</html>

Now the Formatting Examples section contains all three examples.

Navigation Menu

Building version 1.5 with GPT 4

Uh oh!

Uh oh!

Uh oh!

Clone this wiki locally