首页
学习
活动
专区
圈层
工具
发布

从零实现的Chrome扩展

从零实现的Chrome扩展 Chrome扩展是一种可以在Chrome浏览器中添加新功能和修改浏览器行为的软件程序,例如我们常用的TamperMonkey、Proxy SwitchyOmega、AdGuard...目前用于构建FireFox扩展的技术在很大程度上与被基于Chromium内核的浏览器所支持的扩展API所兼容,例如Chrome、Edge、Opera等。...那么本文就以Chrome扩展为例,聊聊如何从零实现一个Chrome扩展,本文涉及的相关的代码都在https://github.com/WindrunnerMax/webpack-simple-environment...那么由此看来,浏览器扩展其实就是一个Web应用,只不过其运行在浏览器的上下文中,并且可以调用很多浏览器提供的特殊API来做到一些额外的功能。...不过我们可以有一些简单的方法,来缓解这个问题,我们在开发扩展的最大的一个问题是需要在更新的时候去手动点击刷新来加载插件,那么针对于这个问题,我们可以借助chrome.runtime.reload()来实现一个简单的插件重新加载能力

1.5K20

Chrome扩展开发,跨域请求API

这次问题是从Btools更换获取数据方式开始的,因为B站收藏夹在前台页面返回的数据中删除了失效视频的封面和标题,导致原来的程序无法获取视频信息。...于是我就想如果请求收藏夹的API,是否可以获取这些信息。但打开后发现,这些数据是从请求API的时候就被删除或者说被过滤掉了。 可以看到title是“已失效视频”,cover是失效视频的封面。...用插件的API发送请求。...现在改为先在background js中添加监听函数,然后在content script中用插件API的chrome.runtime.sendMessage进行通信,此时background js中的chrome.runtime.onMessage.addListener...之后还是会像这样边做边发现问题边学吧,虽然可能找问题解决方案会很花时间。(话说那大概是插件开发的基础吧,不要喷我 233

3.7K10
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    Chrome 居然提供了可以直接调用 LLM 的 API!

    AI 时代的高速发展,我们都习惯了使用 ChatGPT、Claude、Gemini 和其他 AI 工具来询问各种问题,目前大部分的 AI 应用都是通过服务端 API 来实现的。...另外,我们也无需承担自行部署模型的成本,也无需担心使用其他 AI 服务引发的安全隐私问题。...Chrome Canary 是 Google Chrome 的一个实验版本,专为想要在最新功能和 API 广泛发布之前测试它们的开发人员和技术爱好者而设计。...Prompt API 提案是 Chrome 内置 AI 的早期设计提案,此提案的目标是: 为 Web 开发者提供一个统一的 JavaScript API,用于访问浏览器提供的语言模型。...,比如下面的场景: 对任意文本进行分类、标记和关键词提取; 帮助用户撰写文本,如博客文章、评论或传记; 总结文章、用户评论或聊天记录; 从文章内容生成标题或摘要; 基于网页的非结构化内容回答问题; 语言之间的翻译

    1K10

    Taro开发小程序扩展全局调用API的实践

    实际电源的两种模型及其等效变换 前情回顾 上篇文章大致总结了前端开发人员在开发过程中需要考虑的问题。今天聊一下Taro开发小程序扩展全局调用API的实践。...基于Taro扩展API调用组件的实践 尝试实现全局API调用 按照以往的经验,封装一个组件,组件内部提供show,hide方法,然后将该组件挂载到全局对象上即可。...小程序的通信模型下图所示: 个人对jsCore的理解仅限于知道它是WebKit 的 JavaScript 引擎,基于C言实现的。所以这个基于Taro扩展一个全局调用的API算是失败了。...这个方法也是个比较不错的方法,新项目的话可以很方便的进行全局调用,如果是老项且页面特别多的情况下,就需要多次复制粘贴才行。 扩展一个全局调用的API到底能不能实现?...() 今日总结 实现API调用的方法 小程序通信模型 考虑上面那些问题的目的在于提高生产效率 下一篇文章聊聊多语言适配方案 javascript基础知识总结

    2.3K10

    那些实用的 Chrome 扩展神器

    作者:苏生不惑 来源:苏生不惑 之前已经写过不少Chrome扩展那些我常用的 Chrome 扩展,这里继续推荐那些实用Chrome扩展 ,所谓实用就是能解决实际问题。...简单来说就是打开谷歌的扩展管理页面 chrome://extensions/ ,然后将下载crx文件拖进去,如果提示该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的或者程序包无效...先把文件后缀.crx 改成 .rar,然后解压得到一个文件夹,再打开chrome://extensions/ ,点击右上角的开发者模式,就可以看到加载已解压的扩展程序,选择刚才解压好的文件夹,确认新增扩展程序就安装好了...自己摸索几下就会了,上谷歌后安装扩展就不用这么折腾了。 ? 下面是推荐的5个Chrome扩展。...相册导出的原图为高清原图,不包含Exif信息的,如果想清除图片exif看之前的文章如何清除手机拍照的图片 exif 防止泄露你的隐私 扩展地址 https://chrome.google.com/webstore

    1.6K20

    从油猴脚本管理器的角度审视Chrome扩展

    从油猴脚本管理器的角度审视Chrome扩展 在之前一段时间,我需要借助Chrome扩展来完成一个需求,当时还在使用油猴脚本与浏览器扩展之间调研了一波,而此时恰好我又有一些做的还可以的油猴脚本 TKScript...目前用于构建FireFox扩展的技术在很大程度上与被基于Chromium内核的浏览器所支持的扩展API所兼容,例如Chrome、Edge、Opera等。...那么由此看来,浏览器扩展其实就是一个Web应用,只不过其运行在浏览器的上下文中,并且可以调用很多浏览器提供的特殊API来做到一些额外的功能。...虽然我们不能够Hook自面量的创建,但是我们总得调用浏览器提供的API,只要用API的调用,我们就可以想办法来劫持掉函数的调用,从而拿到我们想要的数据,例如可以劫持Function.prototype.call...那么解决这个问题的方式也比较简单,很明显在这里发起的通信并不是直接从页面的window发起的,而是从浏览器扩展发出去的,所以在这里我们就需要讨论如何做到在用户页面与浏览器扩展之间进行通信的问题。

    1.1K10

    那些实用的 Chrome 扩展神器

    之前已经写过不少Chrome扩展那些我常用的 Chrome 扩展,这里继续推荐那些实用Chrome扩展 ,所谓实用就是能解决实际问题。...简单来说就是打开谷歌的扩展管理页面 chrome://extensions/ ,然后将下载crx文件拖进去,如果提示该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的或者程序包无效...先把文件后缀.crx 改成 .rar,然后解压得到一个文件夹,再打开chrome://extensions/ ,点击右上角的开发者模式,就可以看到加载已解压的扩展程序,选择刚才解压好的文件夹,确认新增扩展程序就安装好了...自己摸索几下就会了,上谷歌后安装扩展就不用这么折腾了。 ? 下面是推荐的5个Chrome扩展。...相册导出的原图为高清原图,不包含Exif信息的,如果想清除图片exif看之前的文章如何清除手机拍照的图片 exif 防止泄露你的隐私 扩展地址 https://chrome.google.com/webstore

    1.3K20

    我的首个Chrome扩展发布了

    忙活了有一段时间,零零散散的写了一个Chrome扩展。这里发发一篇文章安利一下。 怎样的一个扩展呢 它是一个Gmail 过滤器辅助工具,使用这个扩展可以轻松的创建邮件过滤器。 有图有真相 ?...如何下载 Chrome Store 大中华局域网用户下载地址 为什么写这个扩展 还是那个原因,自己遇到了不爽与痛点。 我是一个重度的Gmail用户,工作的邮箱使用Gmail托管。...好在,我是一个程序员(虽然不是一个前端攻城狮),但是还是花了周末的一个下午写出了这个应用的雏形。再加上后续的修修改改就成了这个样子。...开源么 当然开源,原因如下 个人能力和精力毕竟有限 希望通过社区的力量推动这个扩展持续发展 所以,如果你有想法的话,可以访问这个Github地址 https://github.com/androidyue.../Gmail-Helper-Filter 贡献力量 除了开源贡献代码外,如果你有想法,也可以共享力量,比如 提需求 提bug 分享本文或扩展 捐赠(下面那个红色按钮) 感谢 再次感谢我的御用设计师 大麦

    91830

    那些实用的 Chrome 扩展神器(二)

    之前已经写过 那些实用的 Chrome 扩展神器 ,如果你不能上谷歌没法直接安装Chrome扩展,可以使用https://crxdl.com/ 这个网站下载crx文件,然后手动安装。 ?...下面继续推荐几个实用的Chrome扩展神器。 划词翻译 支持谷歌、百度、有道三大翻译和朗读引擎,可以方便的查看、复制和朗读不同引擎的翻译结果,选中文字直接翻译。 ? 也可以翻译英文 ?...可以一键切换为手机、平板电脑、PC浏览器的UserAgent,方便开发者在PC上测试网站,解决网站的兼容性问题。 ?...Chrome扩展地址 https://chrome.google.com/webstore/detail/rooster-for-chrome/pimolnhbniceppehbgmibnbgcnhpkhfh...OBS这类直播软件,就可以把浏览器任何页面直播到B站、斗鱼或者虎牙的直播间里去,假如你有自己的直播间并且也安装了Node.js的话,那么可以安装这个Chrome扩展玩下,适合做无人值守音乐轮播或者电影轮播什么的

    1.7K10

    Java程序调用外网API时CA问题

    前面在配置一个Java应用程序的API调用功能,可当启用此功能参数后,发现API调用没能成功,跟进下后台的日志报错信息,找到如下三行关键栈日志: 1 2 3 4 5 6 7 java.lang.RuntimeException...重新思考可能发生的问题环节,回想起来当时构建Docker镜像的时候,使用的OpenJDK只是JRE解压版本(为了减小Docker镜像的大小),猜测大概是这个有相关的影响,找了其他非Docker环境下可正常运行的节点...个条目 然后再切换回Docker环境中,检查了下解压版本JRE的安全证书,果然这里的密钥库是空的,但至于为何会是空的暂且不讨论,想的办法就是从系统中链接一个密钥库过去。.../jre/lib/security/cacerts 然后再尝试重新启动Java应用程序,发现API调用服务是可以正常的开始工作啦,这不知道算不算一种幸运的解法。...不管怎么说问题是成功解决,所以特此记录并分享一下。 不过需要注意的是,上面提到的CA证书文件并不是所有Linux发行版本系统中默认存在,请根据自己系统的实际情况直接查找。

    43110

    分享几个实用的Chrome扩展程序

    这次分享几个自己工作这几年下来,平常用的比较多的几个谷歌浏览器的扩展程序。 AdBlock 最受欢迎的 Chrome 扩展,拥有超过 6000 万用户!拦截网页上的广告。...Source Shell App 这是一款可以将Chrome当成SSH连接工具的浏览器应用。...最后 最后推荐一下,我一直都装着的一个小工具,Start Today,这个Chrome插件可以让每次打开新的标签页时都是展示一个随机的背景图,图片的来源都是从unsplash上精心挑选出来的,每次打开都是不同风格的背景美图...如果大家不知道怎么下载Chrome插件的话,可以百度一下另一个插件SetupV**,这个工具具体是干啥的,我就不多说了。...最后的最后,这些扩展程序都是自己经常用到的,如果大家也有好用的Chrome插件也可以推荐给我。

    2.3K20

    那些有趣实用的 Chrome 扩展神器

    谷歌浏览器一直是我推荐的浏览器,之前也写过几篇文章: 如何让你的搜索更高效 实用油猴脚本推荐,让你的谷歌浏览器更强大 谷歌浏览器安装的 Chrome 扩展越来越多,怎么管理?...Chrome 浏览器扩展神器油猴 请停用以开发者模式运行的扩展程序?搞定谷歌浏览器插件弹窗 上不了谷歌如何安装 Chrome 扩展?...Chrome 浏览器扩展神器暴力猴 那些你可能不知道的谷歌浏览器实用技巧 最近发现谷歌浏览器地址栏可以显示https前缀了,右键选择总是显示完整网址就行了。 ?...这里再推荐几个有趣/实用的 Chrome 扩展神器,都是我经常使用的。...二管家 这是一个管理扩展的扩展 ,可以获取扩展更新通知并记录拓展历史,自动开启/关闭拓展,根据当前网站获取二管家社区推荐,Chrome 扩展地址 https://chrome.google.com/webstore

    2.4K21

    如何解决 chrome 浏览器无法安装扩展程序问题

    --chrome浏览器无法安装扩展,并出现以下几种提示:程序包无效:CRX_REQUIRED_PROOF_MISSING该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的扩展的按钮开关为灰色...点击 计算机配置 -> 管理模板,右键菜单 添加/删除模板 -> 添加,选择刚才解压的 chrome.adm 文件,然后关闭对话框即可。...找到无法开启的应用,复制不可用的扩展ID,例如:edjmlggggbhakhfmkbffngikmionpolh 填入白名单中,然后点击确定。重启 Chrome 浏览器后扩展即可正常使用。...(若拖动没反应,请刷新本页)若依然无效,则解压 zip 文件,回到浏览器扩展页面,点击【加载解压缩的扩展】按钮,选择刚才解压的文件夹,扩展安装成功。...Chrome 浏览器,扩展程序,无法安装,解决方法,浏览器设置,网络连接,版本更新,开发者模式,手动安装,安全策略,兼容性问题,权限限制,缓存清理,插件冲突,技术支持

    4K10

    分享一些好用的 Chrome 扩展

    前言 使用浏览器扩展程序可以使你的工作效率提高数倍不止,那么下面我就向大家分享一下我日常使用的扩展,可能大多数扩展大家都已经在使用了,不过也难免有一两个是你不知道的。...2、 AdBlock 最受欢迎的 Chrome 扩展,拥有超过 6000 万用户!拦截网页上的广告。 ?...9、翻译侠 这是我用了众多翻译扩展后最喜欢的一个,貌似之前的作者已经不再维护了,现在由网友接手,挺好的,从此不再需要打开谷歌翻译网站。 ?...10、图流 这个厉害了,你是否曾为了看图片,一张一张的点,看完一个系列手都费了,简直痛不欲生,现在,福音来了。 让我们打开知乎问题《平常人可以漂亮到什么程度?》,查看全部答案,开启图流,你会发现。...16、Tampermonkey 油猴怕是没有人不知道,它基本上是所有扩展中的佼佼者了。

    70240

    分享 15 个好用 + 实用的 Chrome 扩展

    Stylus 写在最后 ---- 使用浏览器扩展程序可以使你的工作效率提高数倍不止,那么下面我就向大家分享一下我日常使用的扩展,可能大多数扩展大家都已经在使用了,不过也难免有一两个是你不知道的。...AdBlock 最受欢迎的 Chrome 扩展,拥有超过 6000 万用户!拦截网页上的广告。 ? 链接:AdBlock 3....图流 这个厉害了,你是否曾为了看图片,一张一张的点,看完一个系列手都费了,简直痛不欲生,现在,福音来了。 让我们打开知乎问题《平常人可以漂亮到什么程度?》,查看全部答案,开启图流,你会发现。 ?...Tampermonkey 油猴怕是没有人不知道,它基本上是所有扩展中的佼佼者了。...链接:Stylus 写在最后 如何你觉得安装太多扩展后严重挤占地址栏的话,可以使用隐藏扩展+快键键的方式。 最后,如果你也有一些好用的扩展,不妨向我推荐下

    85530

    分享几个实用的 chrome 和 edge 扩展

    话说没有扩展的浏览器是没有灵魂的,之前分享过几篇关于Chrome扩展的文章(微软的edge也是通用的)这里再分享几个实用的扩展: 网易云音乐 这个扩展在之前文章分享过分享几个音乐神器 APP,免费听全网音乐...终结内容农场 平常使用搜索引擎的时候经常会发现些垃圾seo网站 ,打开后都是从其他网站拼凑的内容,这个扩展可以标示内容农场链接,防止误入内容农场网站,并封锁内容农场的广告与恶意程序,扩展地址https:...jpg/png 现在公众号文章的图片都是webp格式,这个扩展就可以把webp保存为jpg或者png,扩展地址 https://chrome.google.com/webstore/detail/save-image-as-type...在线office 这个Chrome扩展支持在线编辑 Word、Excel、PPT 文件,几乎可以取代 Microsoft Office,WPS 等本地软件,支持的文件格式包含doc、docx、xls...JSON格式的数据,不过不方便预览,这个扩展可以很直观的查看数据,层次分明, 比如之前分享的查看b站账户硬币数的接口 每天自动签到b站快速升级LV6 , 扩展地https://chrome.google.com

    1.8K20
    领券