Merge branch 'nanobrowser:master' into typeImporvement_activeTab

README.md

@@ -15,7 +15,7 @@
 
 Nanobrowser is an open-source AI web automation tool that runs in your browser. A free alternative to OpenAI Operator with flexible LLM options and multi-agent system.
 
-⬇️ Get [Nanobrowser](https://github.com/nanobrowser/nanobrowser/releases) for free
+⬇️ Get [Nanobrowser from Chrome Web Store](https://chromewebstore.google.com/detail/nanobrowser/imbddededgmcgfhfpcjmijokokekbkal) for free
 
 👏 Join the community in [Discord](https://discord.gg/NN3ABHggMK) | [X](https://x.com/nanobrowser_ai)
 
@@ -50,6 +50,23 @@ Looking for a powerful AI web agent without the $200/month price tag of OpenAI O
 
 ## 🚀 Quick Start
 
+1. **Install from Chrome Web Store** (Stable Version):
+   * Visit the [Nanobrowser Chrome Web Store page](https://chromewebstore.google.com/detail/nanobrowser/imbddededgmcgfhfpcjmijokokekbkal)
+   * Click "Add to Chrome" button
+   * Confirm the installation when prompted
+
+> **Important Note**: For latest features, install from ["Manually Install Latest Version"](#-manually-install-latest-version) below, as Chrome Web Store version may be delayed due to review process.
+
+2. **Configure Agent Models**:
+   * Click the Nanobrowser icon in your toolbar to open the sidebar
+   * Click the `Settings` icon (top right)
+   * Add your LLM API keys
+   * Choose which model to use for different agents (Navigator, Planner, Validator)
+
+## 🔧 Manually Install Latest Version
+
+To get the most recent version with all the latest features:
+
 1. **Download**
     * Download the latest `nanobrowser.zip` file from the official Github [release page](https://github.com/nanobrowser/nanobrowser/releases).
 
@@ -61,23 +78,15 @@ Looking for a powerful AI web agent without the $200/month price tag of OpenAI O
     * Select the unzipped `nanobrowser` folder.
 
 3. **Configure Agent Models**
-    *   Click the Nanobrowser icon in your toolbar to open the sidebar
-    *   Click the `Settings` icon (top right).
-    *   Add your LLM API keys.
-    *   Choose which model to use for different agents (Navigator, Planner, Validator)
-
-## 🔄 Upgrading
-
-1. **Download**:
-    * Download the latest `nanobrowser.zip` file from the official Github [release page](https://github.com/nanobrowser/nanobrowser/releases).
-
-2. **Replace**:
-    * Unzip `nanobrowser.zip`.
-    * Replace your existing Nanobrowser files with the new ones.
+    * Click the Nanobrowser icon in your toolbar to open the sidebar
+    * Click the `Settings` icon (top right).
+    * Add your LLM API keys.
+    * Choose which model to use for different agents (Navigator, Planner, Validator)
 
-3. **Refresh**:
-    * Go to `chrome://extensions/` in Chrome.
-    * Click the refresh icon on the Nanobrowser card.
+4. **Upgrading**:
+    * Download the latest `nanobrowser.zip` file from the release page.
+    * Unzip and replace your existing Nanobrowser files with the new ones.
+    * Go to `chrome://extensions/` in Chrome and click the refresh icon on the Nanobrowser card.
 
 ## 🛠️ Build from Source
 
@@ -105,7 +114,7 @@ If you prefer to build Nanobrowser yourself, follow these steps:
 
 5. **Load the Extension**:
    * The built extension will be in the `dist` directory
-   * Follow the installation steps from the Quick Start section to load the extension into your browser
+   * Follow the installation steps from the Manually Install section to load the extension into your browser
 
 6. **Development Mode** (optional):
    ```bash

chrome-extension/package.json

@@ -1,6 +1,6 @@
 {
   "name": "chrome-extension",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - core settings",
   "type": "module",
   "scripts": {

chrome-extension/src/background/agent/helper.ts

@@ -117,7 +117,11 @@ export function createChatModel(providerConfig: ProviderConfig, modelConfig: Mod
         topP,
         temperature,
         maxTokens,
-        numCtx: 128000,
+        // ollama usually has a very small context window, so we need to set a large number for agent to work
+        // It was set to 128000 in the original code, but it will cause ollama reload the models frequently if you have multiple models working together
+        // not sure why, but setting it to 64000 seems to work fine
+        // TODO: configure the context window size in model config
+        numCtx: 64000,
       };
       return new ChatOllama(args);
     }

chrome-extension/vite.config.mts

@@ -19,6 +19,15 @@ export default defineConfig({
     conditions: ['browser', 'module', 'import', 'default'],
     mainFields: ['browser', 'module', 'main']
   },
+  server: {
+    // Restrict CORS to only allow localhost
+    cors: {
+      origin: ['http://localhost:5173', 'http://localhost:3000'],
+      methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'],
+      credentials: true
+    },
+    host: 'localhost',
+  },
   plugins: [
     libAssetsPlugin({
       outputPath: outDir,

package.json

@@ -1,6 +1,6 @@
 {
   "name": "nanobrowser",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "AI web automation tool",
   "license": "Apache-2.0",
   "repository": {
@@ -43,25 +43,25 @@
     "@typescript-eslint/parser": "^7.18.0",
     "autoprefixer": "^10.4.20",
     "cross-env": "^7.0.3",
-    "esbuild": "^0.23.0",
+    "esbuild": "^0.25.1",
     "eslint": "8.57.0",
     "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-config-prettier": "9.1.0",
     "eslint-plugin-import": "2.29.1",
     "eslint-plugin-jsx-a11y": "6.9.0",
-    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-prettier": "5.2.4",
+    "eslint-plugin-react": "7.35.2",
     "eslint-plugin-react-hooks": "4.6.2",
     "husky": "^9.1.4",
     "lint-staged": "^15.2.7",
     "postcss": "^8.4.47",
     "prettier": "^3.3.3",
     "rimraf": "^6.0.1",
-    "tailwindcss": "^3.4.14",
+    "tailwindcss": "^3.4.17",
     "tslib": "^2.6.3",
     "typescript": "5.5.4",
     "turbo": "^2.3.3",
-    "vite": "6.0.5",
+    "vite": "6.0.12",
     "run-script-os": "^1.1.6"
   },
   "lint-staged": {
@@ -72,5 +72,10 @@
   "packageManager": "pnpm@9.15.1",
   "engines": {
     "node": ">=22.12.0"
+  },
+  "pnpm": {
+    "overrides": {
+      "cross-spawn": "^7.0.5"
+    }
   }
 }

packages/dev-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/dev-utils",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - dev utils",
   "private": true,
   "sideEffects": false,

packages/hmr/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/hmr",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - hot module reload/refresh",
   "private": true,
   "sideEffects": true,

packages/i18n/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/i18n",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - internationalization",
   "private": true,
   "sideEffects": false,

packages/schema-utils/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/schema-utils",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "JSON schema and related helpers for tools",
   "private": true,
   "type": "module",

packages/shared/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/shared",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - shared code",
   "private": true,
   "sideEffects": false,

packages/storage/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/storage",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - storage",
   "private": true,
   "sideEffects": false,

packages/tailwind-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/tailwindcss-config",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - tailwindcss configuration",
   "main": "tailwind.config.ts",
   "private": true

packages/tsconfig/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/tsconfig",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - tsconfig",
   "private": true
 }

packages/ui/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/ui",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - ui components",
   "private": true,
   "sideEffects": false,

packages/vite-config/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/vite-config",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - vite base configuration",
   "main": "index.mjs",
   "type": "module",

packages/zipper/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/zipper",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - zipper",
   "private": true,
   "sideEffects": false,

pages/content/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/content-script",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - content script",
   "private": true,
   "sideEffects": true,

pages/options/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/options",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - options",
   "private": true,
   "sideEffects": true,

pages/options/src/components/ModelSettings.tsx

@@ -530,7 +530,7 @@ export const ModelSettings = ({ isDarkMode = false }: ModelSettingsProps) => {
           <select
             id={`${agentName}-model`}
             className={`flex-1 rounded-md border text-sm ${isDarkMode ? 'border-slate-600 bg-slate-700 text-gray-200' : 'border-gray-300 bg-white text-gray-700'} px-3 py-2`}
-            disabled={availableModels.length <= 1}
+            disabled={availableModels.length === 0}
             value={
               selectedModels[agentName]
                 ? `${getProviderForModel(selectedModels[agentName])}>${selectedModels[agentName]}`

pages/side-panel/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@extension/sidepanel",
-  "version": "0.1.2",
+  "version": "0.1.3",
   "description": "chrome extension - side panel",
   "private": true,
   "sideEffects": true,

pages/side-panel/src/components/ChatInput.tsx

@@ -62,7 +62,7 @@ export default function ChatInput({
 
   const handleKeyDown = useCallback(
     (e: React.KeyboardEvent) => {
-      if (e.key === 'Enter' && !e.shiftKey) {
+      if (e.key === 'Enter' && !e.shiftKey && !e.nativeEvent.isComposing) {
         e.preventDefault();
         handleSubmit(e);
       }