Chrome扩展 新建扩展 从HelloWorld开始

最新推荐文章于 2025-08-18 17:55:19 发布
原创 最新推荐文章于 2025-08-18 17:55:19 发布 · 90 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#Chrome #json #HTML

虽然觉得Hello World有点俗，但是还是决定从他开始

新建一个chrome的hello world插件非常容易

1 建一个文件夹
任意命名
在文件夹下放一个icon.png 的小图标
创建一个名为manifest.json文件
文件内容如下：
{
  "name": "Hello World Extension",
  "version": "1.0",
  "description": "about hello world",
  "browser_action": {
    "default_icon": "icon.png"
  }
}


2 载入扩展
点击地址栏后面扳手图标，工具-> 扩展程序 进入扩展页面 -> 载入正在开发的扩展程序 填写文件夹的地址,就可以看到 图标 显示在了地址栏后面

3 弹出hello world
添加hello.html文件，放一句hello world进去
修改manifest.json

  "browser_action": {
    "default_icon": "icon.png",
    "popup": "hello.html"
  }

重新载入扩展文件夹即可显示效果
从0开发一个Chrome插件：弹出页面实战——创建一个简单的弹出页面应用
良月柒
06-10 606
这是《从0开发一个Chrome插件》系列的第十二篇文章，本系列教你如何从0去开发一个Chrome插件，每篇文章都会好好打磨，写清楚我在开发过程遇到的问题，还有开发经验和技巧。从0开发一个Chrome插件：什么是Chrome插件？从0开发一个Chrome插件：开发Chrome插件的必要知识从0开发一个Chrome插件：搭建开发环境从0开发一个Chrome插件：创建第一个Chrome插件从0开发一个Chrome插件：测试项目效果从0开发一个Chrome插件：Manifest 文件详解。
Chrome扩展编写之Hello World（一）
u013790419的专栏
08-28 1376
原文：点击打开链接
chrome扩展程序开发之在目标页面运行自己的JS
胡西风的博客
12-26 894
chrome 插件开发的入门介绍，实现利用 chrome 扩展实现在目标网页运行我们的 js 的功能。关于 chrome 扩展的详细内容，可以通过官网了解。开发工具很简单，记事本就 OK 了，当然还要有一个 chrome 浏览器。新建一个文件夹，比如，HelloWorld然后创建一个文本文件，作为这个扩展程序的配置文件，所以文件名是 manifest.json，注意扩展名是 json，然后输入如下内容。1.png 的话，随便拖一张图片进来就 OK 啦。
谷歌浏览器Chrome插件扩展开发教程
欧阳金城-武
06-08 6547
下文是我看到的一篇很好的Chrome扩展开发攻略，感觉很有价值，内容详尽，遂转载，为了尊重版权，推荐您移步至原文阅览。 原文由小茗同学发表于小茗同学的博客园：【干货】Chrome插件(扩展)开发全攻略 1. 写在前面 我花了将近一个多月的时间断断续续写下这篇博文，并精心写下完整demo，写博客的辛苦大家懂的，所以转载务必保留出处。本文所有涉及到的大部分代码均在这个demo里面：https:/...
JavaScript 入门：从 Hello World 开始的编程之旅
一名热衷于技术的全栈开发者，专注于前端与后端的全面技术探索。在这里，我将分享我在技术领域的学习与成长，助力更多开发者的进步。
12-02 1128
JavaScript 是一门轻量级、跨平台、解释型的编程语言，最初是为在浏览器中动态操作网页而设计的。如今，JavaScript 已经扩展到后端（通过 Node.js）、桌面应用、移动应用甚至游戏开发等多个领域。${从开始，你已经迈入 JavaScript 的世界！通过这篇文章，我们探讨了 JavaScript 的基本概念、环境搭建、语法规则和简单的 DOM 操作。未来的学习中，深入掌握 JavaScript 的高级功能，将使你成为一名高效的开发者！快开启你的 JavaScript 编程之旅吧！
(一)Chrome Extension入门教程---Hello World
zwf193071的专栏
01-25 3374
Chrome Extension是什么 Small programs(小程序) Modify DOM of a web page (修改网页的DOM) HTML, CSS & Javascript 大致组成结构如下图所示： Extension类型 Browser Action 显示在浏览器的tool bar内 随时能被访问 Page Action 显示在浏览器的tool bar内，但功能已被禁用 只在部分页面能被访问到 既不是Browser Action，亦非Page Ac
【转】Chrome插件(扩展)开发全攻略
蓦然回首
03-01 1815
【干货】Chrome插件(扩展)开发全攻略 写在前面 我花了将近一个多月的时间断断续续写下这篇博文，并精心写下完整demo，写博客的辛苦大家懂的，所以转载务必保留出处。本文所有涉及到的大部分代码均在这个demo里面：https://github.com/sxei/chrome-plugin-demo，大家可以直接下载下来运行。 另外，本文图片较多，且图片服务器带宽有限，右下角的目录滚动监听...
我的第一个chrome扩展
书读百遍，其义自见
12-14 918
新建文件夹helloworld 新建名为manifest.json的文件 name: 扩展名称 version: 扩展版本 description: 扩展描述 icons: 扩展相关图标文件的位置 version: 数字组成的版本 browser_action: 指定扩展的图标放在chorme的工具栏中的属性 6.1 default_icon 工具栏图标的位置 6.2 default_title 工具栏鼠标悬停的提示 6.3 default_popup 用户点击图标显示的页面的位置 {
Chrome 浏览器扩展程序开发
Alpinist Wang
07-16 833
Chrome中有很多的拓展程序，今天学习一下怎么自己写一个Chrome扩展程序
Chrome扩展：Markdown到富文本的简易转换工具
weixin_36431145的博客
06-26 865
Markdown是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。它广泛应用于编写技术文档、论坛帖子、README文件等。在Markdown中，你可以使用简单的符号来格式化文本，例如星号(*)、井号(#)和大于号(>)。Markdown的这种简洁性使得其成为程序员和内容创作者的最爱。Markdown是一种轻量级标记语言，它允许人们使用易读易写的纯文本格式编写文档，然后转换成有效的XHTML（或者HTML）文档。
Hello World-crx插件
04-06
Hello World-crx插件是基于Chrome扩展框架构建的，因为CRX是Chrome浏览器扩展的文件格式。这个框架利用了HTML、CSS和JavaScript等Web技术，使得开发者能够创建具有特定功能的应用，这些应用能够在用户的浏览器窗口内...
组装参数（外面再包一层param）
xiyangyang8110的博客
08-18 181
改造核心：把param后面当做一个json串处理，借助tojson方法进行转化GsonUtils.toJson(jsonMap)
JavaScript 核心基础：类型检测、DOM 操作与事件处理
热爱音乐和二次元！
08-15 1330
本文系统梳理 JavaScript 核心知识点，包括数据类型检测规则、遍历方式、DOM操作和事件处理。重点解析 typeof 运算符对不同数据类型的检测结果，数组与对象的遍历方法差异，以及使用 querySelector 获取元素的现代方案。同时详细讲解事件绑定的两种方式（onclick 覆盖 vs addEventListener 多播）和事件冒泡机制，帮助开发者构建扎实的 JS 基础，写出更健壮的代码。
C#对象的本地保存与序列化详解笔记
weixin_66547608的博客
08-17 727
本文介绍了对象持久化的三种常用序列化方式。针对内存对象无法持久保存的问题，对比了原始文本存储（顺序依赖强、扩展性差）与序列化方案的优劣。重点解析了二进制序列化（BinaryFormatter）和JSON序列化（原生DataContractJsonSerializer与第三方Newtonsoft.Json）的实现方法，包括类标记、文件流操作等核心步骤。通过对比指出：二进制序列化效率高但跨平台性差；JSON原生方案需标记特性但可读性好；推荐使用Newtonsoft.Json因其无需标记、跨平台支持好。文章建议根
使用AWS S3 + Lambda + MediaConvert 实现上传视频文件并自动转码
最新发布
cz1803472613的博客
08-18 231
MediaConvert上传文件自动转码
Chrome插件开发实战：从零开发高效Chrome插件，提升浏览器生产力
zimin的专栏
08-14 1267
在当今数字化时代，浏览器已成为我们日常工作和生活的核心工具，而 Chrome 作为全球最受欢迎的浏览器，其扩展生态系统为用户提供了无限的可能性。Chrome 插件（Chrome Extension）是一种基于 Web 技术的浏览器扩展程序，它可以自定义浏览器的功能，提升生产力。例如，一个高效的插件可以帮助你自动填充表单、阻挡广告、管理标签页或整合 AI 工具，从而节省时间，提高效率。
微信原生小程序的一次gulp构建
tiny_qi的博客
08-18 978
├── build├── distbuild：用于存放构建相关的配置文件，是前端工程化的重要部分，里面的子目录和文件会在项目构建过程中发挥作用，以生成符合小程序要求的代码或资源。appConfig：存放微信小程序app.json文件，这里可以根据环境量选择不同的app.json。npm：存放 微信小程序用到的package.json文件，里面不包含构建用的包，只包含小程序代码用到的文件。pageUrlConfig：这个目录用于存放小程序路由map文件。
Python 进阶详解：正则表达式与 JSON —— 文本处理与数据交换的核心技能
这里是 「Py玩家的栈与星辰」，专注分享Python开发、DevOps实践、云原生技术与系统安全领域的深度干货。
08-14 1283
本文系统介绍了Python中正则表达式和JSON两大核心工具的应用。正则表达式通过re模块实现文本模式匹配、提取和替换，详细讲解了基础语法、元字符和常用方法（match/search/findall/sub等）及其实际应用场景，如邮箱验证、URL提取等。JSON部分则重点解析了json模块的数据序列化与反序列化操作，包括dumps/loads方法、文件读写以及API数据处理等典型应用。
UniApp 隐藏系统原生导航栏的配置
weixin_52236586的博客
08-15 172
navigationStyle”: “custom” 是 UniApp 中用来完全隐藏系统原生导航栏的配置项，让开发者可以自定义导航栏的样式和功能。
vue新建简单项目
03-29
### 创建一个简单 Vue.js 项目的指南 要创建一个简单的 Vue.js 项目，可以按照以下方法操作。以下是详细的说明： #### 安装 Vue CLI 工具 为了更方便地管理 Vue 项目，建议安装 Vue CLI (Command Line Interface)，这是一个官方提供的工具，用于快速搭建大型单页应用。 运行以下命令来全局安装 Vue CLI： ```bash npm install -g @vue/cli ``` 验证是否成功安装可以通过执行 `vue --version` 命令[^1]。 #### 初始化一个新的 Vue 项目 通过 Vue CLI 来初始化新的项目结构。打开终端并输入以下命令： ```bash vue create hello-world ``` 这会启动交互式的向导界面，允许选择预设配置或者手动调整功能模块（如路由、Vuex 状态管理器等）。对于初学者来说，默认设置通常已经足够满足需求。 #### 启动开发服务器 进入刚刚创建好的目录，并启动本地开发环境以便实时查看效果变化。 ```bash cd hello-world npm run serve ``` 上述脚本定义于 `package.json` 文件中的 `"scripts"` 部分；如果希望自定义构建行为，则需在此处添加相应条目[^2]。 当服务开启后，在浏览器地址栏访问 http://localhost:8080 即可看到默认页面展示出来。 #### 调试与优化 在实际编码过程中难免遇到各种问题，此时就需要借助一些辅助插件来进行排查分析工作了。比如 Chrome 浏览器上的 **Vue DevTools** 扩展能够直观显示组件树形结构以及数据流动情况等等重要信息。 另外还有其他实用的小型库可以帮助提升效率，像 DejaVue 可视化调试工具 或者 vue-clicky 插件可以直接右键点击任何组件获取其内部详情打印到控制台里去。 --- ### 示例代码片段：基础 Hello World 组件 下面是一个非常基本的例子用来演示如何编写最简单的 Vue 应用程序之一——“Hello world”。 ```html <template> <div id="app"> {{ message }} </div> </template> <script> export default { name: 'App', data() { return { message: 'Hello from Vue!' } }, }; </script> <style scoped> #app { font-family: Arial; } </style> ``` 此模板展示了如何利用双大括号语法绑定变量至 HTML 元素上，并且还包含了样式部分以定制外观表现形式。 ---
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值