Like many others, I use LLM every day to learn new things, ask questions or to translate contents. I like to use different LLMs as they have their own pros and cons. The problem is that I have to switch different tab frequently, which I don’t enjoy. While exploring, I discoursed Google Chrome has a feature call sidebar. I wondered if there was any collection of LLMs that I could access and use directly. It turns out that even the paid one can’t be use this way. I tried multiple plugins, but most of them required for me to paid and it’s not native (They were using APIs behind the scenes and they are charing for it). Eventually, I decided to create my own.

My use case is quite simple. I want to quickly access different LLMs without switching different tabs. I want to use Chrome’s Sidebar to open and hide the side bar with keyboard shortcut. On the left side of the sidebar, I want to add icons that people would be able to quickly access it when needed. I plan to embed the websites directly using iframe. I start working on it and realized it wasn’t possible as websites add x-frame-options and content-security-policy policies. This make sense as it’s a security requirement for most companies. Then I found out this StackOverflow answer. It turn out you can block or modify network requests by specifying declarative rules. I created the following rule for my plugin

[
  {
    "id": 1,
    "priority": 1,
    "action": {
      "type": "modifyHeaders",
      "requestHeaders": [
        { "header": "sec-fetch-dest", "operation": "set", "value": "document" }
      ],
      "responseHeaders": [
        { "header": "x-frame-options", "operation": "remove" },
        { "header": "content-security-policy", "operation": "remove" }
      ]
    },
    "condition": {
      "urlFilter": "*",
      "resourceTypes": [
        "main_frame",
        "sub_frame",
        "xmlhttprequest",
        "websocket"
      ]
    }
  }
]

I modify sec-fetch-dest requestHeaders and remove x-frame-options and content-security-policy from the websites that extension is tries to access. This option is works quite well for most of the websites. However, it doesn’t work for the websites which use WebSockets. The extension UI itself is quite straightforward, but the trouble come when you have to modify the headers. With the above information, I hope it make thing easier for you. You can also check my chrome extension on Chrome store and Github for source code.