Hey Everyone!

Welcome back to Part 2 of the Guide/Walkthrough on how to create a Browser Agent. In this section, we will be adding functionality to the Browser Agent that we created in Part 1. If you were able to successfully complete Part 1, then you should have some code that is ready to be modified. Let's get started!

Lets Begin

Lets install some dependencies

• npm install --save axios fast-deep-equal npm-watch
• Your Package JSON should look like this

"dependencies": {
    "autoprefixer": "10.4.14",
    "cheerio": "^1.0.0-rc.12",
    "eslint": "8.44.0",
    "eslint-config-next": "13.4.7",
    "fast-deep-equal": "^3.1.3",
    "langchain": "^0.0.102",
    "next": "13.4.7",
    "npm-watch": "^0.11.0",
    "postcss": "8.4.24",
    "react": "18.2.0",
    "react-dom": "18.2.0",
    "react-markdown": "^8.0.7",
    "styled-components": "^6.0.2",
    "tailwindcss": "3.3.2"
  }

These are the packages I will be using this part of development

Development

If you are ready for development, here are the npm scripts to run the project. This will prepare and build your project files and watch for updates to rebuild so that you can develop the extension in your browser. I will be using Google Chrome.

This includes your .env, so don’t publish your extension to the public

    "watch:mac": "npm-watch build_mac",
    "watch:win": "npm-watch build_win"

public/manifest.json

This will allow Google Chrome or any other Chrome-based browser like Brave or Edge to install the extension.

{
  "manifest_version": 3,
  "name": "browser-gpt",
  "version": "0.1.0",
  "action": {
    "default_popup": "index.html"
  },
  "description": "Digital Assistance powered by Langchain",
  "permissions": [
    "activeTab",
    "tabs"
  ],
  "host_permissions": [
    "<all_urls>"
  ]
}

To install your browser, make sure to turn on Developer Mode

An Upload the Out folder produced by the Watch or Build Scripts.