学习编写chrome插件:Hello World 扩展

编写 Hello World

以下内容主要参考: chrome文档-Hello World 扩展

1. 创建项目

创建项目,在根目录创建 manifest.json 文件,添加如下内容:

json 复制代码
{
  "name": "Hello Keely",
  "description": "keely的插件",
  "version": "1.0",
  "manifest_version": 3,
  "action": {
    "default_popup": "hello.html",
    "default_icon": "hello.png"
  }
}

创建 hello.html,填入如下内容

css 复制代码
<html>
  <body>
    <h1>Hello Keely</h1>
  </body>
</html>

项目结构如下:

2. 加载未打包的扩展程序

  • 在chrome新标签页中输入 chrome://extensions 即可前往"扩展程序"页面。
  • 打开开发者模式
  • 加载未打包扩展程序:选择刚才创建的项目目录即可
  • 每次程序更新后,可以点击右下角的刷新icon进行插件的刷新

3. 查看扩展程序:

点击扩展程序的icon,找到刚才导入的插件

点击插件效果:

相关推荐
一点一木7 小时前
深度体验TRAE SOLO移动端7天:作为独立开发者,我把工作流揣进了兜里
前端·人工智能·trae
天外飞雨道沧桑8 小时前
TypeScript 中 omit 和 record 用法
前端·javascript·typescript
Lee川8 小时前
mini-cursor 揭秘:从 Tool 定义到 Agent 循环的完整实现
前端·人工智能·后端
canonical_entropy9 小时前
从 Spec-Driven Development 到 Attractor-Guided Engineering
前端·aigc·ai编程
研☆香9 小时前
聊聊前端页面的三种长度单位
前端
给钱,谢谢!9 小时前
React + PixiJS 实现果园成长页:从状态机到浇水动画
前端·react.js·前端框架
暗冰ཏོ10 小时前
VUE面试题大全
前端·javascript·vue.js·面试
次元工程师!10 小时前
LangFlow开发(三)—Bundles组件架构设计(3W+字详细讲解)
java·前端·python·低代码·langflow
Bug-制造者11 小时前
现代Web应用全栈开发:从架构设计到部署落地实战
前端
青春喂了后端12 小时前
IntelliGit 前端状态层重构:把一个全局 Store 拆成清晰的状态边界
前端·重构·状态模式