- 综合排序
- 最热优先
- 最新优先
- 来自专栏路过君BLOG from CSDN
Chrome扩展开发
manifest.json { // 清单文件的版本，这个必须写，而且必须是2 "manifest_version": 2, // 插件的名称 "name": "demo", // 插件的版本 "version": "1.0.0", // 插件描述 "description": "简单的Chrome扩展demo", // 图标，一般偷懒全部用一个尺寸的也没问题 "icons": icon.png", "48": "img/icon.png", "128": "img/icon.png" }, // 会一直常驻的后台JS或后台页面 "background": { // 2种指定方式 "browser_action": { "default_icon": "img/icon.png", // 图标悬停时的标题，可选 "default_title": "这是一个示例Chrome ", // Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个 "options_ui": { "page": "options.html", // 添加一些默认的样式
1.4K20发布于 2020-06-19 - 来自专栏epoos.com
Chrome扩展开发入门
本篇文章主要是从开发者角度来对其进行介绍，帮助开发者对 Chrome 扩展的结构和开发方式有个大致了解，快速入门。 一、Chrome 扩展应用程序构成（manifest v3版本） Chrome 扩展开发所用到的技术栈就是html/js/css。可以说就是纯“前端开发”，其界面是用 html+css 画的。 所以说，Chrome 扩展开发并不是什么新鲜玩意儿，只是一个挂载到 Chrome 浏览器上的一个“扩展”模块，比起微信小程序开发还简单。 这不就是网页应用吗？ 2）扩展弹窗 扩展弹窗的显示时机为当用户点击扩展图标之后弹出。 在如上 manifest.json 文件中的 action.default_popup 字段中配置。 2）也可以从其它渠道获取，然后打开开发者模式，直接加载解压代码包。 这种方式也是我们在开发调试过程中的使用方式。
4.8K30编辑于 2022-09-19 - 来自专栏FunTester
Chrome扩展程开发初探
偶然间被ChatGPT提醒，觉得Chrome拓展开发是一个非常不错的方向。 Chrome拓展是扩展浏览器功能的小程序，用户可以通过Chrome Web Store下载和安装。 据我自己体验，Chrome 拓展的页面相对简单和独立，对于大量功能性页面，不需要太多交互设计，大大降低了开发难度，提升开发效率。 通过配置 manifest.json 文件，可以定义和控制 Chrome 扩展的各种功能和行为，包括用户界面、后台处理、网页内容修改和权限管理。这使得开发者能够创建功能丰富且安全的浏览器扩展。 以上信息建议去官方查看，我就是因为版本 V2 教程耽误了好一阵子功夫。 常用功能 popup 页面 在 Chrome 扩展中，popup 页面是指当用户点击扩展图标时弹出的界面。 开发者可以通过 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 webpack-cli ts-loader typescript copy-webpack-plugin --save-dev 2. 基本目录结构截图 图片 chrome使用typescript目录结构 MySQL多层级树形结构表的搜索查询优化 使用WordPress作为小程序后端——APPID有效性前置检查 使用WordPress 作为小程序后端——小程序请求前置检查 Windows rclone挂载sftp 迁移——从Electron迁移到Eclipse Theia 使用typescript开发chrome扩展 use multiple
1.7K20编辑于 2023-10-19 - 来自专栏Linux技术资源分享
Chrome扩展开发入门体验
****前言**** Chrome浏览器扩展开发算是相当简单的，基本只要掌握HTML+CSS+Javascript，即可快速开发一个属于你的Chrome插件！ "manifest_version":2, //这个是必须的，并且值为2 "description": "Chrome扩展demo", //扩展的基本描述 "browser_action ->扩展程序 注意：将开发者模式选中～～～ The first = 点击加载已解压的扩展程序，并选择扩展程序的目录 完成后会在项目的根目录生成xx.crx以及xx.pem两个文件 The second {}); 开发一个简单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插件是更底层的浏览器功能扩展，可能需要对浏览器源码有一定掌握才有能力去开发 homepage_url 开发者或者插件主页设置，一般会在如下2个地方显示： ? ? badge 所谓badge就是在图标上显示一些文本，可以用来更新一些小的扩展状态提示信息。因为badge空间有限，所以只支持4个以下的字符（英文4个，中文2个）。 实例：创建一个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扩展，这个扩展会在谷歌浏览器的工具栏上增加一个图标。 1.在磁盘上创建一个目录，用来放扩展的代码和资源 2.在这个目录中，创建一个文本文件，命名为manifest.json，其内容为： { "manifest_version": 2, "name a)点击 图标，在菜单中选择工具>扩展程序，这会打开扩展管理的页面 b)如果“开发人员模式”旁边有个“+”号，点击这个“+”号进入开发人员模式。 “+”号会变成“-”号，同时会显示更多的按钮和信息 c)点击“载入正在开发的扩展程序…”按钮，会出现一个文件选择对话框 d)在对话框中，找到扩展目录并点击“确定” 如果扩展是正确的，它的图标就会显示在地址栏右侧 增加一些代码：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 扩展
将以下代码添加到 background.js ，使浏览器在安装扩展时弹出出 hello 对话框： 1chrome.runtime.onInstalled.addListener(() => { 2 alert 由于我们要从文件（而不是Chrome网上应用店）安装自己的扩展程序，因此需要使用页面右上角的切换按钮来激活开发者模式。这应该添加一个额外的菜单栏，其中包含 Load unpacked选项。 dist 文件夹中，来进行开发并监视更改。 我们将用 npm run watch:dev 来开发扩展，然后使用 npm run build-zip 生成一个ZIP文件以上传到 Chrome Web Store。 系统会提示你输入开发人员详细信息，在发布第一个应用程序之前，你必须支付 5 美元的开发人员注册费（通过信用卡）。 接下来，你需要为自己的应用创建一个 ZIP 文件。
3.6K30发布于 2019-06-11 - 来自专栏小鑫同学编程历险记
全流程 Chrome 扩展开发之按键提示
key-prompt 是一个基于 Extension.js 开发工具和其提供的 vue-typescript 模板开发的 Chrome 扩展程序，可以在任意网页的左下方位置显示你对当前页面的键盘操作，其实这是一个无聊的扩展程序 参见上方的示例或遵循以下步骤完成操作： 步骤 1 - 安装扩展程序作为 devDependency npm install extension --save-dev 步骤 2 - 将您的 npm 脚本与可执行的 按键提示扩展开发流程 按键提示 功能常见于视频录制和在线会议的一些演示场景，可以给予学习和参会者更多的键盘上的明确信息，其实基于浏览器���按键提示是有一定的局限性的，我仅以此案例作为浏览器扩展开发的切入点 它们可以直接访问 Chrome 扩展的所有 API 开发 Content Scripts 部分： VueUse 组合式工具集： VueUse 是 Vue.js 开发时非常用帮助的 Vue 组合式工具集 Chrome 扩展程序。
76810编辑于 2024-08-06 - 来自专栏小鑫同学编程历险记
带你快速走进Chrome扩展开发的大门
本篇文章将带你通过三个简单的案例带你快速走进Chrome扩展开发的大门。 思维脑图 https://www.processon.com/view/link/642b9f2edd847f4d0fab623c Chrome扩展开发介绍 技能要求？ Chrome扩展开发技能要求同创建Web应用程序相同的Web技术编写，也就是作为前端程序员最为熟悉的前端开发三件套，HTML、CSS 和 JavaScript。 Chrome扩展API？ 扩展程序（chrome://extensions/） 打开开发者模式 加载已解压的扩展程序（包含清单文件的文件夹） PS：插件开发过程中会多次修改，在修改后需要在浏览器的扩展程序中重新刷新后生效 实现专注阅读模式 总结 Chrome扩展开发入门指南就先介绍这么多，这三个案例包含了Chrome扩展开发的几个重要概念，更多的Chrome扩展开发学习可以通过阅读官方文档，当然也包括这三个案例，好了动手操作一下吧。
1.4K10编辑于 2023-04-22 - 来自专栏reizhi
chrome扩展推荐-Tampermonkey
得益于Google的品牌力量和技术实力，chrome浏览器近年来的市场占有率不断上升。 reizhi也是chrome的爱好者之一，从最原始的IE，到假死王maxthon，再到轻快的opera，最后让我留恋chrome的理由还是强大的可扩展性。 虽然资源占用永远都是抛不开的弱点，但无与伦比的速度和极致的可扩展性是有目共睹的。 其实把Tampermonkey叫做扩展，倒不如叫做脚本平台。 Tampermonkey下载安装地址 https://chrome.google.com/we……kfjojejmpbldmpobfkfo 在chrome上安装好Tampermonkey扩展后 除了从各大论坛下载JS脚本之外，userscripts也是非常棒的一个脚本扩展集合网站。
1.3K40编辑于 2022-09-26 - 来自专栏无限可能的程序开发
认识Chrome扩展插件
访问 url: chrome://extensions，打开开发者模式 扩展程序是基于 Web 技术（如 HTML、CSS 和 JavaScript）构建的软件程序，使用户能够自定义 Chrome 2、Chrome extensions 和 Chrome Plugin的区别 Chrome Extension（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/ ? 扩展程序需要一个manifest清单文件，提供有关应用的各种信息 { "manifest_version": 2, "name": "my-calculator", "description 可以看到计算器已经在扩展程序之中 再看看博客文章下的广告，已经被清除了 ? ? 三、发布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 - 来自专栏程序那些事儿
如何快速地开发一个chrome扩展插件
chrome扩展结构 chrome的扩展是以.crx结尾的安装包，如果你把它下载下来，并把它重命名为.rar压缩包文件，然后你就可以使用压缩软件对它进行解压，加压之后，就会发现其实chrome的扩展包里面就是一些 js，css，html文件，可以说你只要会写前端，那么开发一个chrome扩展插件将会非常容易。 被开发人员所喜爱的另一个原因是它提供了非常强大的调试工具栏，而我们的扩展也是可以加入到调试工具栏的。 扩展的调试 在我们本地开发好扩展之后，我们可以通过本地浏览器进行调试。 首先，我们需要先进入扩展程序页面，打开开发者模式 然后，我们可以通过选择加载已解压的扩展程序加载我们的扩展。 浏览器的扩展开发其实并不难，用到的知识都是基础的js，html，css，我们只需要知道一些和浏览器交互的属性和操作的api，就可以开发出一个属于自己的浏览器扩展。
1.2K20编辑于 2023-07-24
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号