💭 encodeURIComponent() - JavaScript | MDN
━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

!https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/encodeURIComponent

Date: July 28, 2023

Image: encodeURIComponent() - JavaScript | MDN — The encodeURIComponent() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will only be four escape sequences for characters composed of two surrogate characters). Compared to encodeURI(), this function encodes more characters, including those that are part of the URI syntax. <https://developer.mozilla.org/mdn-social-image.46ac2375.png> encodeURIComponent() - JavaScript | MDN The encodeURIComponent() function encodes a URI by replacing each instance of certain characters by one, two, three, or four escape sequences representing the UTF-8 encoding of the character (will ... MDN Web Docs · developer.mozilla.org

In order to send data that includes special characters such as / in a url you need to url encode it. You have probably seen these many times in urls with things like %20 for spaces.

I’m working on a chrome extension to make quick blog posts, like thoughts or a persistent bookmark tool with comments. The backend is written in fastapi </fastapi/> and when I check to see if I have a post for a page I need to url encode it.

[code]
  curl -X 'GET' \
    'https://thoughts.waylonwalker.com/link/?link=https%3A%2F%2Fhtmx.org%2Fextensions%2Fclient-side-templates%2F' \
    -H 'accept: application/json'

│ curl example generated from the fastapi swagger docs.

Here is how I used javascript’s encodeURIComponent to turn my chrome extension into a notification when I already have a post for the current page.

[code]
  // Event listener for tab changes
  chrome.tabs.onActivated.addListener(function (activeInfo) {
    // Get the active tab information
    chrome.tabs.get(activeInfo.tabId, function (tab) {
      const url = tab.url || "";
  
      getData(`https://thoughts.waylonwalker.com/link/?link=${encodeURIComponent(url)}`).then((data) => {
          console.log('link data: ', data);
        if (data.hasOwnProperty('detail')) {
          chrome.browserAction.setBadgeText({ text: "" });
        } else {
          localStorageKey = `formData-${url}`;
          chrome.browserAction.setBadgeText({ text: "1" });
          chrome.browserAction.setBadgeBackgroundColor({ color: "#80A3D5" });
          localStorage.setItem(localStorageKey, JSON.stringify(data));
        }
      });
    });
  });

NOTE
│ This post is a thought </thoughts/>. It’s a short note that I make about someone else’s content online #thoughts </tags/thoughts/>