- 综合排序
- 最热优先
- 最新优先
- 来自专栏路过君BLOG from CSDN
Chrome扩展开发
manifest_version": 2, // 插件的名称 "name": "demo", // 插件的版本 "version": "1.0.0", // 插件描述 "description": "简单的Chrome 扩展demo", // 图标，一般偷懒全部用一个尺寸的也没问题 "icons": { "16": "img/icon.png", "48": "img/icon.png", "128" "browser_action": { "default_icon": "img/icon.png", // 图标悬停时的标题，可选 "default_title": "这是一个示例Chrome ", // Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个 "options_ui": { "page": "options.html", // 添加一些默认的样式 ，推荐使用 "chrome_style": true }, // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字 "omnibox": { "keyword" : "go" },
1.4K20发布于 2020-06-19 - 来自专栏epoos.com
Chrome扩展开发入门
而提到 Chrome 就绕不开它的扩展，或者叫插件（Chrome Extension）。 可以从 应用商店下载安装。应用商店除了有 Chrome 扩展程序，也有丰富的 Chrome主题背景。 本篇文章主要是从开发者角度来对其进行介绍，帮助开发者对 Chrome 扩展的结构和开发方式有个大致了解，快速入门。 一、Chrome 扩展应用程序构成（manifest v3版本） Chrome 扩展开发所用到的技术栈就是html/js/css。可以说就是纯“前端开发”，其界面是用 html+css 画的。 所以说，Chrome 扩展开发并不是什么新鲜玩意儿，只是一个挂载到 Chrome 浏览器上的一个“扩展”模块，比起微信小程序开发还简单。 这不就是网页应用吗？ 交互界面与组成模块 一个扩展的组成模块如下图所示，整个 Chrome 扩展主要包含六个模块：扩展图标、插件弹窗、选项页、单独页、注入页面脚本、后台脚本。
4.8K30编辑于 2022-09-19 - 来自专栏FunTester
Chrome扩展程开发初探
偶然间被ChatGPT提醒，觉得Chrome拓展开发是一个非常不错的方向。 Chrome拓展是扩展浏览器功能的小程序，用户可以通过Chrome Web Store下载和安装。 据我自己体验，Chrome 拓展的页面相对简单和独立，对于大量功能性页面，不需要太多交互设计，大大降低了开发难度，提升开发效率。 下面正式进入正题，如何开发 Chrome 拓展。 准备 首先你需要具备一些知识：HTML 、CSS 、 JavaScript 等。其次需要了解 Chrome 拓展开发规范和API。 通过配置 manifest.json 文件，可以定义和控制 Chrome 扩展的各种功能和行为，包括用户界面、后台处理、网页内容修改和权限管理。这使得开发者能够创建功能丰富且安全的浏览器扩展。 开发者可以通过 Chrome 扩展来添加自定义的右键菜单选项，以提供更多的功能和交互性。
1.6K10编辑于 2024-07-30 - 来自专栏LNMP开发那些事
使用typescript开发chrome扩展
使用typescript开发chrome扩展 记录一下使用typescript开发chrome扩展的相关配置。 1. 安装依赖 必定需要用到的开发依赖项： chrome-types copy-webpack-plugin ts-loader typescript webpack-cli npm install chrome-types 基本目录结构截图 图片 chrome使用typescript目录结构 MySQL多层级树形结构表的搜索查询优化 使用WordPress作为小程序后端——APPID有效性前置检查 使用WordPress 作为小程序后端——小程序请求前置检查 Windows rclone挂载sftp 迁移——从Electron迁移到Eclipse Theia 使用typescript开发chrome扩展 use multiple
1.7K20编辑于 2023-10-19 - 来自专栏葡萄城控件技术团队
前端开发：这10个Chrome扩展你不得不知
原文出处：https://blog.bitsrc.io/10-top-chrome-extensions-for-front-end-developers-db23a01dce1e 1. 也许您会感到奇怪，Chrome本身的开发者工具不是已经足够了吗，为什么我还要用它？ 其实这个插件比我们浏览器中的开发者工具显示的信息更多也更先进。 Auury是由Rangle.io构建的DevTool扩展，用于调试、分析和优化Angular项目。 如果您曾经尝试从chrome inspector工具中的元素复制CSS样式代码，则可以轻松了解CSSPeeper带来的价值。 10. WhatFont ? 结论 以上只是基于我自己的理解，这些扩展是我的工作更加的轻松快捷。 如果您对上面的内容有任何补充，欢迎评论告诉我，谢谢！
3.2K10发布于 2020-03-19 - 来自专栏Linux技术资源分享
Chrome扩展开发入门体验
****前言**** Chrome浏览器扩展开发算是相当简单的，基本只要掌握HTML+CSS+Javascript，即可快速开发一个属于你的Chrome插件！ ->扩展程序 注意：将开发者模式选中～～～ The first = 点击加载已解压的扩展程序，并选择扩展程序的目录 完成后会在项目的根目录生成xx.crx以及xx.pem两个文件 The second ALic_Chrome ? Alic_Chrome 简单的扩展插件就完成了 ～～～ ---- ****background交互**** 简单来说呢，上面完成的其实就是一个扩展程序的微框架。 {}); 开发一个简单Chrome扩展程序基本是没有什么大问题的！ 我的体会呢，要是主要用于离线的呢，还是开发应用好点，扩展程序也不是不可以，否则数据存储方面就使用js处理即可！ ----
1.5K40发布于 2018-06-08 - 来自专栏黄Java的地盘
chrome扩展应用开发快速科普
由于chrome官方文档中对于如何从零开发一个chrome扩展应用没有一套完整的流程，同时官方的API文档对于初学者也不是那么友好，因此本文将通过一个初学者的视角来讲解如何从零开始快速了解和开发一个chrome 本文的目标群体：已经了解或使用过chrome扩展应用，但是自己不知道如何开发一个chrome扩展应用的工程师。如果有具体的chrome扩展应用开发经验的同学，本篇文章可能太过简单，并不适合你。 本文的主要内容如下： chrome扩展应用模块功能介绍 chrome扩展应用模块开发介绍 本文的内容不包括chrome扩展应用开发时提供的各个API功能详解，有需求的同学可以自行查看官方API文档。 总结 我们通过一个简单的表情插件的例子来快速的介绍了chrome扩展应用的各个模块的功能和开发方法。通过这篇文章大家应该知道了chrome扩展应用各个模块的作用和开发的方法。 如果大家想对chrome扩展应用有一个更加深入的了解，那么建议自己动手开发相关的功能。这样才能够对chrome扩展应用的相关逻辑有一个更加清楚的认识。
1.4K10发布于 2018-09-18 - 来自专栏前端Q
【干货】Chrome插件(扩展)开发全攻略
什么是Chrome插件 严格来讲，我们正在说的东西应该叫Chrome扩展(Chrome Extension)，真正意义上的Chrome插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发 鉴于Chrome插件的叫法已经习惯，本文也全部采用这种叫法，但读者需深知本文所描述的Chrome插件实际上指的是Chrome扩展。 学习Chrome插件开发有什么意义 增强浏览器功能，轻松实现属于自己的“定制版”浏览器，等等。 实例：创建一个devtools扩展 首先，要针对开发者工具开发插件，需要在清单文件声明如下： { // 只能指向一个HTML文件，不能是JS文件 "devtools_page": "devtools.html 文档 模糊匹配规则语法详解 第三方资料 部分中文资料，不是特别推荐： 360安全浏览器开发文档 360极速浏览器Chrome扩展开发文档 Chrome扩展开发极客系列博客
13.1K40发布于 2020-07-23 - 来自专栏凯哥Java
Chrome扩展插件的开发--获取网页Cookies
Chrome扩展插件的开发--获取网页CookiesChrome浏览器在浏览器类应用软件中一直居于榜首，很多人选择Chrome浏览器不仅仅是因为它的稳定，还有它丰富的可拓展性。 那么有没有想自己开发一款自己的谷歌浏览器插件呢？ 本文将介绍大家手动开发一个谷歌浏览器插件获取cookies. 1.Chrome插件开发文档https://developer.chrome.com/docs/extensions/mv3/2.官网入门demoHello manifest.json 的 action 字段配置 popup， 其中 default_popup 指定点击 popup 后显示的 html 内容，路径位置相对于配置文件，另外default_icon设置的是扩展插件图片 浏览器内导入使用 打开chrome的插件管理页面chrome://extensions打开该页面右上角的开发者模式点击加载已解压的扩展程序，上传本地文件即可导入插件点击浏览器右上角扩展程序图标可以将自己的插件固定到浏览器顶部
2K20编辑于 2022-10-30 - 来自专栏凯哥Java
Chrome扩展插件的开发--获取网页Cookies
Chrome扩展插件的开发--获取网页Cookies Chrome浏览器在浏览器类应用软件中一直居于榜首，很多人选择Chrome浏览器不仅仅是因为它的稳定，还有它丰富的可拓展性。 那么有没有想自己开发一款自己的谷歌浏览器插件呢？ 本文将介绍大家手动开发一个谷歌浏览器插件获取cookies. 1.Chrome插件开发文档 https://developer.chrome.com/docs/extensions/mv3/ 2.官网入门 manifest.json 的 action 字段配置 popup， 其中 default_popup 指定点击 popup 后显示的 html 内容，路径位置相对于配置文件，另外default_icon设置的是扩展插件图片 浏览器内导入使用 · 打开chrome的插件管理页面chrome://extensions · 打开该页面右上角的开发者模式 · 点击加载已解压的扩展程序，上传本地文件即可导入插件 · 点击浏览器右上角扩展程序图标可以将自己的插件固定到浏览器顶部
3.1K20编辑于 2022-12-16 - 来自专栏编程社区
chrome扩展开发中文教程-1
创建并加载一个扩展 在这一节中，将编写一个browser action扩展，这个扩展会在谷歌浏览器的工具栏上增加一个图标。 a)点击 图标，在菜单中选择工具>扩展程序，这会打开扩展管理的页面 b)如果“开发人员模式”旁边有个“+”号，点击这个“+”号进入开发人员模式。 “+”号会变成“-”号，同时会显示更多的按钮和信息 c)点击“载入正在开发的扩展程序…”按钮，会出现一个文件选择对话框 d)在对话框中，找到扩展目录并点击“确定” 如果扩展是正确的，它的图标就会显示在地址栏右侧 ，扩展的信息也会显示在扩展管理页面上，如下图所示： 向扩展中添加代码 在这一节，会给扩展增加一点功能 1.编辑manifest.json文件，增加下面的内容： "browser_action": 增加一些代码：CSS and JavaScript code for hello_world 2.回到扩展管理页面，点击“立即更新扩展程序”按钮，这时会重新加载修改后的扩展 3.点击扩展的图标，会弹出一个气泡窗口
85140编辑于 2021-12-24 - 来自专栏finleyMa
开发了一款chrome扩展程序
mafengwo-mp3-downloader 一款识别并下载马蜂窝游记页面背景mp3音乐的chrome扩展程序 主要功能 当打开游记页面 比如 如果检测到有背景音乐， 会弹出包含歌曲信息的chrome unnamed.jpg 安装 源码 webstore下载 感谢 https://github.com/aadsm/jsmediatags https://github.com/sxei/chrome-plugin-demo
52120发布于 2018-09-10 - 来自专栏imba久期的杂货铺
Chrome扩展开发，跨域请求API
一连几天没有任何效果，然后又细致的研究了一下插件开发的官方文档，终于找到了方法。用插件的API发送请求。 // background.js chrome.runtime.onMessage.addListener( function(request, sender, sendResponse) { 错误的根本原因还是对插件开发文档的不熟悉导致，基本没怎么看过文档，也没怎么用过插件的API。 现在改为先在background js中添加监听函数，然后在content script中用插件API的chrome.runtime.sendMessage进行通信，此时background js中的chrome.runtime.onMessage.addListener （话说那大概是插件开发的基础吧，不要喷我 233
3.7K10编辑于 2022-09-23 - 来自专栏京程一灯
用 Vue 开发自己的 Chrome 扩展
由于我们要从文件（而不是Chrome网上应用店）安装自己的扩展程序，因此需要使用页面右上角的切换按钮来激活开发者模式。这应该添加一个额外的菜单栏，其中包含 Load unpacked选项。 dist 文件夹中，来进行开发并监视更改。 我们将用 npm run watch:dev 来开发扩展，然后使用 npm run build-zip 生成一个ZIP文件以上传到 Chrome Web Store。 完成的扩展 将扩展程序上传到 Chrome Web Store 如果想让其他人也可以使用你的扩展程序，可以通过 Chrome Web Store 做到。 系统会提示你输入开发人员详细信息，在发布第一个应用程序之前，你必须支付 5 美元的开发人员注册费（通过信用卡）。 接下来，你需要为自己的应用创建一个 ZIP 文件。
3.6K30发布于 2019-06-11 - 来自专栏小鑫同学编程历险记
全流程 Chrome 扩展开发之按键提示
key-prompt 是一个基于 Extension.js 开发工具和其提供的 vue-typescript 模板开发的 Chrome 扩展程序，可以在任意网页的左下方位置显示你对当前页面的键盘操作，其实这是一个无聊的扩展程序 按键提示扩展开发流程 按键提示 功能常见于视频录制和在线会议的一些演示场景，可以给予学习和参会者更多的键盘上的明确信息，其实基于浏览器���按键提示是有一定的局限性的，我仅以此案例作为浏览器扩展开发的切入点 NOTE] Chrome 扩展程序知识补充： Content scripts 主要用于与网页内容交互，在网页的上下文中运行，但不能直接访问 Chrome 扩展的 API。 它们可以直接访问 Chrome 扩展的所有 API 开发 Content Scripts 部分： VueUse 组合式工具集： VueUse 是 Vue.js 开发时非常用帮助的 Vue 组合式工具集 Chrome 扩展程序。
76810编辑于 2024-08-06 - 来自专栏小鑫同学编程历险记
带你快速走进Chrome扩展开发的大门
本篇文章将带你通过三个简单的案例带你快速走进Chrome扩展开发的大门。 Chrome扩展开发技能要求同创建Web应用程序相同的Web技术编写，也就是作为前端程序员最为熟悉的前端开发三件套，HTML、CSS 和 JavaScript。 Chrome扩展API？ 扩展程序（chrome://extensions/） 打开开发者模式 加载已解压的扩展程序（包含清单文件的文件夹） PS：插件开发过程中会多次修改，在修改后需要在浏览器的扩展程序中重新刷新后生效 实现专注阅读模式 通过开发chrome expansion实现单击扩展ICON进入和退出掘金文章专注阅读模式。 总结 Chrome扩展开发入门指南就先介绍这么多，这三个案例包含了Chrome扩展开发的几个重要概念，更多的Chrome扩展开发学习可以通过阅读官方文档，当然也包括这三个案例，好了动手操作一下吧。
1.4K10编辑于 2023-04-22 - 来自专栏reizhi
chrome扩展推荐-Tampermonkey
reizhi也是chrome的爱好者之一，从最原始的IE，到假死王maxthon，再到轻快的opera，最后让我留恋chrome的理由还是强大的可扩展性。 虽然资源占用永远都是抛不开的弱点，但无与伦比的速度和极致的可扩展性是有目共睹的。 其实把Tampermonkey叫做扩展，倒不如叫做脚本平台。 Tampermonkey下载安装地址 https://chrome.google.com/we……kfjojejmpbldmpobfkfo 在chrome上安装好Tampermonkey扩展后 除了从各大论坛下载JS脚本之外，userscripts也是非常棒的一个脚本扩展集合网站。 去验证码 07 飞速网盘 (ray File) 超大文件下载破解 08 用音乐倾听彼此 (Song Taste) 去注册登录提示 + 解析真实地址 09 中国原创音乐基地 (5 Sing) 解析真实地址 10
1.3K40编辑于 2022-09-26 - 来自专栏无限可能的程序开发
认识Chrome扩展插件
访问 url: chrome://extensions，打开开发者模式 扩展程序是基于 Web 技术（如 HTML、CSS 和 JavaScript）构建的软件程序，使用户能够自定义 Chrome （前端开发人员技能范围之内） 本文从应用着手，通过讲解扩展插件的特性来启发读者对其进一步探索。 扩展通过最终用户 UI 和开发人员 API 进行操作： 扩展用户界面 这为用户提供了一种一致的方式来管理他们的扩展。 对于开发和测试，您可以使用扩展开发者模式将这些“解压”加载到 Chrome 中，或者直接拖动crx文件到管理扩展插件页面。 相信chrome扩展会大有作为，会不会迫不急待的要体验一下呢，我根据Chrome插件开发官网示例写的一个小扩展插件，点击这里查看项目。
2K10编辑于 2022-09-26 - 来自专栏前端儿
编写Chrome扩展程序
Chrome的扩展程序很多，也很容易入门，可以来简单实现一下 看看 官方文档 或者翻译的文档：百度、360，慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含： 一个manifest清单文件 html 一、了解Chrome扩展程序 Chrome扩展程序商店地址为：https://chrome.google.com/webstore/category/extensions? hl=zh-CN 访问Chrome浏览器中已安装的扩展：chrome://extensions/ ? .pem是密钥文件 二、创建Chrome扩展程序 由上述知晓了扩展程序的大致信息，要创建一个扩展程序，也不外乎是创建一个项目，依据一定的规则编写逻辑后再打包安装 接下来就把之前写的简易计算器弄成一个扩展程序 可以看到计算器已经在扩展程序之中 再看看博客文章下的广告，已经被清除了 ? ? 三、发布Chrome扩展程序 自己的Chrome扩展程序写好之后，可以发布到商城之中 这篇文章 讲得挺好，就不多说了
1.3K10发布于 2018-09-03 - 来自专栏Coco的专栏
【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序
如下图所示，这些图标就是各种开发者提供的 chrome 扩展程序： ? 区分扩展与插件 很多人会误称扩展程序为插件，这里有必要区分一下。 扩展（Extension） 指的是通过调用 Chrome 提供的 Chrome API 来扩展浏览器功能的一种组件，工作在浏览器层面，使用 HTML + Javascript 语言开发。 就我而言，最近我开发了一款简单的扩展程序 —— URLHelper 。你可以在 chrome 应用商店下载到它： ? 将扩展程序打包上线发布到 Chrome 应用商店 扩展程序开发好了，希望供他人下载。那么当然需要发布到应用商店。流程大致如下： 登录到 Chrome 开发者信息中心。 后记 其实开发一款 Chrome 扩展程序真的不难，而且非常有意思。感兴趣但又怕麻烦的同学可以参考我这个小项目改改。
2K30发布于 2018-05-28
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号