Chrome 114 带着侧边栏扩展来了

效果展示

manifest.json

javascript 复制代码
{
  "manifest_version": 3,
  "name": "ChatGPT学习",
  "version": "0.0.2",
  "description": "ChatGPT,GPT-4,Claude3,Midjourney,Stable Diffusion,AI,人工智能,AI",
  "icons": {
    "16": "./src/images/logo.png",
    "48": "./src/images/logo.png",
    "128": "./src/images/logo.png"
  },
  "side_panel": {
    "default_path": "./src/views/panel.html",
    "openPanelOnActionClick": true
  },
  "permissions": ["sidePanel"],
  "action": {
    "default_title": "点击打开ChatGPT学习侧边栏"
  },
  "background": {
    "service_worker": "./src/scripts/service-worker.js"
  },
  "content_scripts": [
    {
      "matches": ["http://*/*", "https://*/*"],
      "exclude_matches": [
        "https://chat.xutongbao.top/*",
        "http://localhost:*/*"
      ],
      "css": ["./dist/lib/layui.css", "./dist/css/app.css"],
      "js": ["./dist/lib/layui.js", "./dist/js/app.js", "./index.js"]
    }
  ],
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self';"
  }
}

目录结构

src/scripts/service-worker.js

javascript 复制代码
chrome.sidePanel
  .setPanelBehavior({ openPanelOnActionClick: true })
  .catch((error) => console.error(error))

panel.html

html 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ChatGPT学习</title>
  <link rel="stylesheet" href="./index.css">
</head>
<body>
  <iframe src="https://chat.xutongbao.top" class="m-side-panel-iframe"></iframe>
</body>
</html>

index.css

css 复制代码
body{position: absolute;top: 0;left: 0;right: 0;bottom: 0; margin: 0;padding: 0;overflow: hidden;}
.m-side-panel-iframe{width: 100%;height: 100%;border: 0;}

官方文档:

https://developer.chrome.com/docs/extensions/reference/api/sidePanel?hl=zh-cn#description

人工智能学习网站:

https://chat.xutongbao.top

相关推荐
东方隐侠安全团队-千里36 分钟前
网安瞭望台第17期:Rockstar 2FA 故障催生 FlowerStorm 钓鱼即服务扩张现象剖析
网络·chrome·web安全
顾平安1 小时前
Promise/A+ 规范 - 中文版本
前端
聚名网1 小时前
域名和服务器是什么?域名和服务器是什么关系?
服务器·前端
桃园码工1 小时前
4-Gin HTML 模板渲染 --[Gin 框架入门精讲与实战案例]
前端·html·gin·模板渲染
沈剑心1 小时前
如何在鸿蒙系统上实现「沉浸式」页面?
前端·harmonyos
一棵开花的树,枝芽无限靠近你1 小时前
【PPTist】组件结构设计、主题切换
前端·笔记·学习·编辑器
m0_748237052 小时前
Chrome 关闭自动添加https
前端·chrome
prall2 小时前
实战小技巧:下划线转驼峰篇
前端·typescript
开心工作室_kaic2 小时前
springboot476基于vue篮球联盟管理系统(论文+源码)_kaic
前端·javascript·vue.js
川石教育2 小时前
Vue前端开发-缓存优化
前端·javascript·vue.js·缓存·前端框架·vue·数据缓存