# 【开发者自荐】用AI写的chrome插件sidebarTab-支持在chrome侧边栏打开一个固定网页

**URL:** <https://meta.appinn.net/t/topic/54320>\
**Category:** 发现频道\
**Tags:** chrome\
**Created:** [2024 年3 月 25 日 11:04 UTC](https://meta.appinn.net/t/topic/54320 "2024-03-25T11:04:04Z")\
**Posts on this page:** 1\
**Page:** 1

<div class="post-metadata">

**Author:** ![vine\_chen](https://meta-edge.appinn.com/user_avatar/meta.appinn.net/vine_chen/32/50205_2.png) [@vine\_chen](https://meta.appinn.net/u/vine_chen)\
**Post date:** [2024 年3 月 25 日 11:04 UTC](https://meta.appinn.net/t/topic/54320/1 "2024-03-25T11:04:04Z")

</div>

## 🪧 插件名称

sidebarTab

## ❓一句话简介

在Chrome浏览器原生侧边栏，固定一个网页。  
（切换Chrome不同标签页tab时，该网页依然固定显示）

## 👨‍💻 开发背景

去年[chrome推出了side panel的api](https://developer.chrome.com/docs/extensions/reference/api/sidePanel?hl=zh-cn)，我觉得这个特性很有意思，产品和开发同事经常需要盯着开发或接口文档，于是我想到通过能在侧边栏做个小浏览器，允许固定展示一个网页（如开发文档、chatgpt 、stackoverflow 等）。

我没有编程基础，于是借助gpt4来编写代码，我告诉AI关于side panel的示例，然后再加上我的需求，很快就上线了第一个版本。并且获得获得了chrome商店精选：

 ![image](https://meta-edge.appinn.com/uploads/default/original/3X/6/3/63c1190bbd86f9fe95eb5c19e057ea09a38ba692.jpeg)

后来不少[海外的媒体](https://www.makeuseof.com/chromes-side-panel-best-browser-hack-youre-not-using/)在宣传chrome新api时，发现了我的这个插件并跟进报道，于是带来了大概一千多的用户。

3月初时我发现有不少海外用户希望增加一些特性，例如希望可以隐藏地址栏、希望重启时自动打开上一次的网页、希望能快捷切换不同url，于是我再次给ai提需求，迭代了新的版本，支持了这些用户的诉求：

[![截屏2024-03-21 16 35 05](https://private-user-images.githubusercontent.com/96530597/315215893-c97ce192-1acf-437a-b6de-2186d48bc7f5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTEzNjI2MTksIm5iZiI6MTcxMTM2MjMxOSwicGF0aCI6Ii85NjUzMDU5Ny8zMTUyMTU4OTMtYzk3Y2UxOTItMWFjZi00MzdhLWI2ZGUtMjE4NmQ0OGJjN2Y1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAzMjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMzI1VDEwMjUxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY2ZDBmYWNkNmE0YWE2Y2ViZmZiNjRiMDUxOWI2ZmYyZTUwYjNmNGRkZDIzYTJkY2RlN2NlMzc2NTc2YzcxZWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.RLYdfPPvztf6LYjiUnx9r6ivURW2i0T2jF8eRcUtBNU)](https://private-user-images.githubusercontent.com/96530597/315215893-c97ce192-1acf-437a-b6de-2186d48bc7f5.png?jwt=eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpc3MiOiJnaXRodWIuY29tIiwiYXVkIjoicmF3LmdpdGh1YnVzZXJjb250ZW50LmNvbSIsImtleSI6ImtleTUiLCJleHAiOjE3MTEzNjI2MTksIm5iZiI6MTcxMTM2MjMxOSwicGF0aCI6Ii85NjUzMDU5Ny8zMTUyMTU4OTMtYzk3Y2UxOTItMWFjZi00MzdhLWI2ZGUtMjE4NmQ0OGJjN2Y1LnBuZz9YLUFtei1BbGdvcml0aG09QVdTNC1ITUFDLVNIQTI1NiZYLUFtei1DcmVkZW50aWFsPUFLSUFWQ09EWUxTQTUzUFFLNFpBJTJGMjAyNDAzMjUlMkZ1cy1lYXN0LTElMkZzMyUyRmF3czRfcmVxdWVzdCZYLUFtei1EYXRlPTIwMjQwMzI1VDEwMjUxOVomWC1BbXotRXhwaXJlcz0zMDAmWC1BbXotU2lnbmF0dXJlPTY2ZDBmYWNkNmE0YWE2Y2ViZmZiNjRiMDUxOWI2ZmYyZTUwYjNmNGRkZDIzYTJkY2RlN2NlMzc2NTc2YzcxZWImWC1BbXotU2lnbmVkSGVhZGVycz1ob3N0JmFjdG9yX2lkPTAma2V5X2lkPTAmcmVwb19pZD0wIn0.RLYdfPPvztf6LYjiUnx9r6ivURW2i0T2jF8eRcUtBNU)

## :sparkles:使用场景

- 工程师看开发文档、需求文档，需要固定显示一个网页，切换到别的tab时也可以对照查看文档内容；
- 摸鱼时可以打开Reddit刷一刷；
- 可以把一些ai固定在侧边栏。

## :rocket: 插件地址

[https://chromewebstore.google.com/detail/acghhljehhigfeinngmggkpgbacpikfe](https://chromewebstore.google.com/detail/acghhljehhigfeinngmggkpgbacpikfe)

## 🔆 使用效果

[![](https://lh3.googleusercontent.com/gk8VsRmAyPKgRGtfD6a19bn31DOu8uk3cUuMd3Tr62N85Zj5D5xZ2FAqxujkYCjbSTjGRspATLsv4zrHt7V3o4eo=s1600-w1600-h1000)](https://lh3.googleusercontent.com/gk8VsRmAyPKgRGtfD6a19bn31DOu8uk3cUuMd3Tr62N85Zj5D5xZ2FAqxujkYCjbSTjGRspATLsv4zrHt7V3o4eo=s1600-w1600-h1000)  
[![](https://lh3.googleusercontent.com/ufuIB_GZ0SdWD4-rRbM_WEiTqHaCEjLUUoPhb72SzAA7NeNxmRsLkKHl57SkvlxiT6UZWjmwCJpBrX0pvKLnu_UY=s1600-w1600-h1000)](https://lh3.googleusercontent.com/ufuIB_GZ0SdWD4-rRbM_WEiTqHaCEjLUUoPhb72SzAA7NeNxmRsLkKHl57SkvlxiT6UZWjmwCJpBrX0pvKLnu_UY=s1600-w1600-h1000)