Add alternative bookmarklet that uses browser metadata (#1159)

bookmarks/templates/bookmarks/bookmarklet.js

@@ -1,7 +1,7 @@
 (function () {
-  var bookmarkUrl = window.location;
-  var applicationUrl = '{{ application_url }}';
+  const bookmarkUrl = window.location;
 
+  let applicationUrl = '{{ application_url }}';
   applicationUrl += '?url=' + encodeURIComponent(bookmarkUrl);
   applicationUrl += '&auto_close';
 

bookmarks/templates/bookmarks/bookmarklet_clientside.js

@@ -0,0 +1,25 @@
+(function () {
+  const bookmarkUrl = window.location;
+  const title =
+    document.querySelector('title')?.textContent ||
+    document
+      .querySelector(`meta[property='og:title']`)
+      ?.getAttribute('content') ||
+    '';
+  const description =
+    document
+      .querySelector(`meta[name='description']`)
+      ?.getAttribute('content') ||
+    document
+      .querySelector(`meta[property='og:description']`)
+      ?.getAttribute(`content`) ||
+    '';
+
+  let applicationUrl = '{{ application_url }}';
+  applicationUrl += '?url=' + encodeURIComponent(bookmarkUrl);
+  applicationUrl += '&title=' + encodeURIComponent(title);
+  applicationUrl += '&description=' + encodeURIComponent(description);
+  applicationUrl += '&auto_close';
+
+  window.open(applicationUrl);
+})();

bookmarks/templates/settings/integrations.html

@@ -25,15 +25,33 @@
       <p>The bookmarklet is an alternative, cross-browser way to quickly add new bookmarks without opening the linkding
         application first. Here's how it works:</p>
       <ul>
-        <li>Drag the bookmarklet below into your browsers bookmark bar / toolbar</li>
+        <li>Choose your preferred method for detecting website titles and descriptions below (<a href="https://linkding.link/troubleshooting/#automatically-detected-title-and-description-are-incorrect" target="_blank">Help</a>)</li>
+        <li>Drag the bookmarklet below into your browser's bookmark bar / toolbar</li>
         <li>Open the website that you want to bookmark</li>
-        <li>Click the bookmarklet in your browsers toolbar</li>
+        <li>Click the bookmarklet in your browser's toolbar</li>
         <li>linkding opens in a new window or tab and allows you to add a bookmark for the site</li>
-        <li>After saving the bookmark the linkding window closes and you are back on your website</li>
+        <li>After saving the bookmark, the linkding window closes, and you are back on your website</li>
       </ul>
-      <p>Drag the following bookmarklet to your browser's toolbar:</p>
-      <a href="javascript: {% include 'bookmarks/bookmarklet.js' %}" data-turbo="false"
-         class="btn btn-primary">📎 Add bookmark</a>
+
+      <div class="form-group radio-group" role="radiogroup" aria-labelledby="detection-method-label">
+        <p id="detection-method-label">Choose your preferred bookmarklet:</p>
+        <label for="detection-method-server" class="form-radio">
+          <input id="detection-method-server" type="radio" name="bookmarklet-type" value="server" checked>
+          <i class="form-icon"></i>
+          Detect title and description on the server
+        </label>
+        <label for="detection-method-client" class="form-radio">
+          <input id="detection-method-client" type="radio" name="bookmarklet-type" value="client">
+          <i class="form-icon"></i>
+          Detect title and description in the browser
+        </label>
+      </div>
+      <div class="bookmarklet-container">
+        <a id="bookmarklet-server" href="javascript: {% include 'bookmarks/bookmarklet.js' %}" data-turbo="false"
+           class="btn btn-primary">📎 Add bookmark</a>
+        <a id="bookmarklet-client" href="javascript: {% include 'bookmarks/bookmarklet_clientside.js' %}" data-turbo="false"
+           class="btn btn-primary" style="display: none;">📎 Add bookmark</a>
+      </div>
     </section>
 
     <section aria-labelledby="rest-api-heading">
@@ -90,4 +108,28 @@
       </p>
     </section>
   </main>
+
+  <script>
+    (function init() {
+      const radioButtons = document.querySelectorAll('input[name="bookmarklet-type"]');
+      const serverBookmarklet = document.getElementById('bookmarklet-server');
+      const clientBookmarklet = document.getElementById('bookmarklet-client');
+
+      function toggleBookmarklet() {
+        const selectedValue = document.querySelector('input[name="bookmarklet-type"]:checked').value;
+        if (selectedValue === 'server') {
+          serverBookmarklet.style.display = 'inline-block';
+          clientBookmarklet.style.display = 'none';
+        } else {
+          serverBookmarklet.style.display = 'none';
+          clientBookmarklet.style.display = 'inline-block';
+        }
+      }
+
+      toggleBookmarklet();
+      radioButtons.forEach(function(radio) {
+        radio.addEventListener('change', toggleBookmarklet);
+      });
+    })();
+  </script>
 {% endblock %}

docs/src/content/docs/troubleshooting.md

@@ -13,11 +13,11 @@ To fix this, check the [reverse proxy setup documentation](/installation#reverse
 
 ## Automatically detected title and description are incorrect
 
-linkding automatically fetches the title and description of the web page from the metadata in the HTML `<head>`. This happens on the server, which can return different results than what you see in your browser, for example if a website uses JavaScript to dynamically change the title or description, or if a website requires login.
+linkding automatically fetches the title and description of the web page from the metadata in the HTML `<head>`. By default, this happens on the server, which can return different results than what you see in your browser, for example, if a website uses JavaScript to dynamically change the title or description, or if a website requires login. Alternatively, both the browser extension and the bookmarklet can use the metadata directly from the page you are currently viewing in your browser. Note that for some websites this can give worse results, as not all websites correctly update the metadata in `<head>` while browsing the website (which is why fetching a fresh page on the server is still the default).
 
-When using the linkding browser extension, you can enable the *Use browser metadata* option to use the title and description that your browser sees. This will override the server-fetched metadata. Note that for some websites this can give worse results, as not all websites correctly update the metadata in `<head>` while browsing the website (which is why fetching a fresh page on the server is still the default).
-
-The bookmarklet currently does not have such an option.
+To use the title and description that you see in your browser:
+- When using the linkding browser extension, enable the *Use browser metadata* option in the options of the extension.
+- When adding the bookmarklet, the respective settings page allows you to choose whether to detect title and description from the server or in the browser.
 
 ## Archiving fails for certain websites