学习编写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,找到刚才导入的插件

点击插件效果:

相关推荐
chase。2 分钟前
Python包构建工具完全指南:python -m build 使用详解
开发语言·chrome·python
console.log('npc')5 分钟前
partial在react接口定义中是什么意思
前端·javascript·typescript
SuperEugene6 分钟前
前端 utils 工具函数规范:拆分 / 命名 / 复用全指南,避开全局污染等高频坑|编码语法规范篇
开发语言·前端·javascript
C澒10 分钟前
微前端容器标准化 —— 公共能力篇:通用请求
前端·架构
llxxyy卢18 分钟前
web部分中等题目
android·前端
若惜28 分钟前
selenium自动化测试web自动化测试 框架封装Pom
前端·python·selenium
Amumu1213841 分钟前
Js:内置对象
开发语言·前端·javascript
广州华水科技43 分钟前
2026年单北斗GNSS变形监测系统推荐,助力精准监控与智慧城市建设
前端
鸡吃丸子1 小时前
如何编写一个高质量的AI Skill
前端·ai
我命由我123451 小时前
Element Plus 2.2.27 的单选框 Radio 组件,选中一个选项后,全部选项都变为选中状态
开发语言·前端·javascript·html·ecmascript·html5·js