Skip to content

Browser Tool: Chrome Extension

CodeFlicker provides the ability to connect with browsers, allowing AI to access browser page content such as page elements and console information. It can also perform operations on specified browser pages, such as clicking, scrolling, and inputting.

The default opening methods are either opening web pages within the IDE or using Chrome's sandbox mode to gain greater browser control privileges. While these two methods are convenient, they have some limitations. However, for projects deployed in local environments that may have dependencies on the browser (such as cookies), we provide a Chrome extension that enables control of the Chrome browser. Below is an introduction to the installation, configuration, and usage of the Chrome extension.

Extension Installation

Method 1: Chrome Web Store

https://chromewebstore.google.com/detail/codeflicker-chrome-extens/chkihcfmnokicddjbagimapohpgbdlhj

How to Use?

Method 1: Using Browser Extension for Web Exploration

  • Modify the default browser opening configuration. The default is "in IDE", which can be switched to the extension.
  • Enter # in the input box to bring up context options and select "Browser". Based on the specific intent of the query, the Agent will invoke browser tool operations (such as viewing, browsing, clicking, inputting, etc.).

Method 2: Using Browser Extension for Project Preview

Click the browser icon below the input box to enable project preview capability. Bring up the opening method, and you can choose to open with the extension.

Use Cases

Typical Browser Usage Scenarios

1. Launch Project

Launch and preview projects through browser tools.

2. "Fix/Optimize" UI Layer Features Through Visual Feedback

  • Select page elements for conversation
  • Click context to locate code

3. Autonomous Verification and Fixing

AI can autonomously verify modification effects and perform fixes.

4. View Solutions with Browser and Generate Code

View existing solutions through the browser to assist in code generation.

5. Conduct Solution Research with Browser

Compared to web search, this is more versatile. Many websites are dynamic and require user information.