首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

进阶|Chrome还不够神,但你写扩展程序可以很神

一般在网页中用  或者 标签声明部分,就要靠插件来渲染。 开发自己扩展程序 OK,简单了解完什么是扩展程序后,下面我们来看看如何开发一款扩展程序。...中微格式数据 我们可以这样理解它,在页面加载完毕之后,我们扩展程序会向这个页面注入一个或者额多个脚本,这个脚本可以获得浏览器所访问 web 页面的详细信息。...它主要功能及适用场景,大致如下: 1.事件页面监听某个事件触发 2.应用或扩展程序第一次安装或者更新到新版本(为了注册事件) 3.内容脚本或其他扩展程序发送消息 4.扩展程序中其他视图调用了...扩展程序小结 一个扩展程序最重要我觉得就是上述三块内容: 1.Content scripts -- 内容脚本 2.popup -- 弹窗页面 3.background -- 后台网页 我们通过一个...扩展程序消息传递 消息传递存在必要性是因为内容脚本网页而不是扩展程序环境中运行,所以它们通常需要某种方式与扩展程序其余部分通信。

95820

【前端工具】Chrome 扩展程序开发与发布 -- 手把手教你开发扩展程序

一般在网页中用  或者 标签声明部分,就要靠插件来渲染。 开发自己扩展程序 OK,简单了解完什么是扩展程序后,下面我们来看看如何开发一款扩展程序。...扩展程序小结 一个扩展程序最重要我觉得就是上述三块内容: Content scripts -- 内容脚本 popup -- 弹窗页面 background -- 后台网页 ?...接下来,我们扩展要灵活地完成各种功能,最重要就是互相间通信! 信息数据在内容脚本、弹窗页面以及事件页面之间传递是一个扩展程序最重要部分。...扩展程序消息传递 消息传递存在必要性是因为内容脚本网页而不是扩展程序环境中运行,所以它们通常需要某种方式与扩展程序其余部分通信。...在 chrome 浏览器中访问 chrome://extensions(或者单击多功能框最右边按钮:打开 Chrome 浏览器菜单,并选择更多工具 (L) 菜单下扩展程序 (E),进入相同页面)。

1.4K30
您找到你想要的搜索结果了吗?
是的
没有找到

【前端工具】Chrome 扩展程序开发与发布 -- 手把手教你开发扩展程序

一般在网页中用  或者 标签声明部分,就要靠插件来渲染。 开发自己扩展程序 OK,简单了解完什么是扩展程序后,下面我们来看看如何开发一款扩展程序。...扩展程序小结 一个扩展程序最重要我觉得就是上述三块内容: Content scripts -- 内容脚本 popup -- 弹窗页面 background -- 后台网页 ?...接下来,我们扩展要灵活地完成各种功能,最重要就是互相间通信! 信息数据在内容脚本、弹窗页面以及事件页面之间传递是一个扩展程序最重要部分。...扩展程序消息传递 消息传递存在必要性是因为内容脚本网页而不是扩展程序环境中运行,所以它们通常需要某种方式与扩展程序其余部分通信。...在 chrome 浏览器中访问 chrome://extensions(或者单击多功能框最右边按钮:打开 Chrome 浏览器菜单,并选择更多工具 (L) 菜单下扩展程序 (E),进入相同页面)。

1.8K30

浏览器,何必是浏览器

扩展程序及安装教程   扩展程序(插件)核心就是可以增加你浏览器功能 扩展程序允许您为 Chrome 浏览器增加功能,而不需要深入研究本机代码。...它重新定义Chrome新标签页,开启页面添加时代,集成了天气,待办事项,笔记等功能,还有丰富个性化设置。...单击即可重新访问它们。 将突出显示内容组织到文件夹和子文件夹中。 自动为突出显示创建引文。 自动同步到云。随时随地访问精彩片段。 SimpRead   为网页开启阅读模式, 让我们更专注于内容。...CSDN人性化脚本   这个脚本也很好用,他可以csdn更简洁,更人性化,当然如果你认真研究了上一目录第9个Stylus这个插件,Stylus里样式也有类似的功能。...如何创建一个特定网页窗口应用呢?下面以csdn网站为例进行演示。

2.7K11

chrome扩展应用开发快速科普

概述 本文通过对chrome插件各个部分进行快速介绍,从而大家了解插件各个部分关系,并且知道如何将其进行组装成一个完整chrome插件。...由于chrome官方文档中对于如何从零开发一个chrome扩展应用没有一套完整流程,同时官方API文档对于初学者也不是那么友好,因此本文将通过一个初学者视角来讲解如何从零开始快速了解和开发一个chrome...本文目标群体:已经了解或使用过chrome扩展应用,但是自己不知道如何开发一个chrome扩展应用工程师。如果有具体chrome扩展应用开发经验同学,本篇文章可能太过简单,并不适合你。...本文主要内容如下: chrome扩展应用模块功能介绍 chrome扩展应用模块开发介绍 本文内容不包括chrome扩展应用开发时提供各个API功能详解,有需求同学可以自行查看官方API文档。...Options文件 web_accessible_resources 扩展需要访问本地资源 只用列举资源才能够在扩展中通过相对路径方式访问

92910

全网最详细谷歌插件开发小册📚

内容脚本(Content Scripts) 内容脚本是插入到网页脚本,它们可以直接访问和修改网页DOM。...+ command); }); 插件权限系统与内容安全策略(CSP) Chrome插件需要在manifest文件中声明其所需权限,如访问浏览历史,修改网页内容等。...("Menu item clicked: ", info.menuItemId); }); 更多详见谷歌插件API 与网页内容进行交互 与网页内容进行交互是Chrome插件开发中常见需求,可以通过内容脚本和消息传递来实现...下面是如何网页内容进行交互示例: // Content script // 监听来自插件消息 chrome.runtime.onMessage.addListener(function(message...} }); 通过以上代码,插件可以向内容脚本发送消息,并与网页内容进行交互,例如修改网页元素样式、获取网页数据等。

83620

如何在十分钟内创建一个Chrome 插件

在接下来几分钟里,我们不仅将为你详解Chrome扩展基础知识,还将手把手教你如何用五个简单步骤创建自己扩展。 我们将构建什么? 近年来,我们见证了人工智能能力飞速发展。...有些有一个浏览器动作,通过地址栏旁边图标可见,以便快速访问功能。其他一些可能会在后台默默运行,在所有网页上或仅在特定网页上,具体取决于它们设计。...对于我们教程,我们将专注于使用内容脚本扩展类型。该脚本将允许我们与特定页面的DOM进行交互和操作——在我们情况下,即ChatGPT界面。...这个脚本可以直接访问网页内容,允许我们扫描敏感词并根据需要修改页面。 文件:wordsList.js。一个专门用于包含用户指定敏感词或短语列表JavaScript文件。...它们可以查看和操作正在运行页面的 DOM,从而改变网页内容和行为。 这是我们内容脚本

49251

玩转Microsoft Edge

->设置->个人资料->导入浏览器数据,导入位置选择Chrome或者firefox或者任何你想要浏览器。会把Chrome插件、密码存储等等内容统统转移过来,所以要小心密码被盗。...Adguard广告拦截器 顾名思义,能够拦截大部分垃圾广告,支持自定义添加内容。安装好以后还会自动根据用户使用习惯优化拦截规则。...屏蔽广告,同时最新版本还增加了页面css自定义,美化过后百度主页相当好看。当然高手玩家还能自己写更漂亮网页界面。...网盘助手 网盘助手功能包括自动输入百度网盘提取码,生成直链,配合多线程下载工具使用可以显著改善百度网盘人捉急下载速度。...My Novel Reader 小说阅读脚本,统一阅读样式,内容去广告、修正拼音字、段落整理,自动下一页。(直接复制粘贴了,在用网页看轻小说时候很好用。

1.8K30

有哪些实用且堪称神器Chrome插件?吐血推荐!!!

15、Cloudbleed Bookmark Checker:检测书签是否有死链 对于书签收藏狂魔同志,收藏夹里网页肯定有很多都无法访问了吧!这款扩展就是来检测书签是否有死链。...有同步笔记、代办事项等,同时,喜欢它网页图标,提供了很多常用网站图标,自定义书签时很好看~唯一缺点,就是感觉启动比较慢~ 17、crxMouse Chrome Gestures...28、Reader View:Chrome 也有 Safari 阅读模式 将网页转换成 Safari 阅读模式样式,你更方便舒适阅读网页文字,当你访问文章网页时候,扩展程序按钮会显示在地址栏末端...29、DrumUp:个性化浏览推荐 当你打开一个网页时候,为您推荐与现在浏览网页内容相似或者相关内容,对于英文支持比较好,每天阅读很多的人能找到很多关联感兴趣内容。...40、Tampermonkey 俗称‘油猴子’,是一款功能非常强大插件,他包含:方便脚本管理、脚本概览、设置多样性、脚本自动更新、安全、兼容性、Chrome 同步、CodeMirror 编辑器、

9.3K41

如何搜索更高效

关于搜索之前分享过 那些你可能不知道搜索奇技淫巧 ,2020 最全百度网盘搜索,找电影资源不再愁 ,2020 最全电子书搜索网站,找电子书不再愁 ,今天分享如何搜索更高效。...不过大多数人还是用百度居多,这里推荐一个 Chrome 扩展 广告终结者 ,它可以清除网页浮动广告,购物广告,恶意弹窗,跟踪代码,你浏览网页更快更清爽, 而且支持绝大多数浏览器。 ?...hl=zh-CN ,安装Chrome扩展方法见之前文章上不了谷歌如何安装 Chrome 扩展? 安装扩展后再次百度搜索没有垃圾广告了,第一个就是官网,搜索效率明显提高了。 ?...关于油猴脚本之前介绍过很多次了,公众号后台回复 油猴 获取,安装详情见文章实用油猴脚本推荐,谷歌浏览器更强大 搜索框下方列出了网页,翻译,知识,图片,视频,音乐,社交,购物等搜索网站快捷方式,可以直接进入这些网站搜索对应关键词...右键搜 一个优秀右键菜单 Chrome 扩展程序(公众号后台回复 谷歌 获取),右键菜单增加了跳转扩展程序,书签管理,插件,创建短网址,生成二维码等功能。 ? 菜单可以自定义。 ?

65141

堪称神器Chrome插件

15、Cloudbleed Bookmark Checker:检测书签是否有死链 对于书签收藏狂魔同志,收藏夹里网页肯定有很多都无法访问了吧!这款扩展就是来检测书签是否有死链。...有同步笔记、代办事项等,同时,喜欢它网页图标,提供了很多常用网站图标,自定义书签时很好看~唯一缺点,就是感觉启动比较慢~ 17、crxMouse Chrome Gestures 对于国产浏览器自带鼠标手势功能...28、Reader View:Chrome 也有 Safari 阅读模式 将网页转换成 Safari 阅读模式样式,你更方便舒适阅读网页文字,当你访问文章网页时候,扩展程序按钮会显示在地址栏末端...29、DrumUp:个性化浏览推荐 当你打开一个网页时候,为您推荐与现在浏览网页内容相似或者相关内容,对于英文支持比较好,每天阅读很多的人能找到很多关联感兴趣内容。...40、Tampermonkey 俗称‘油猴子’,是一款功能非常强大插件,他包含:方便脚本管理、脚本概览、设置多样性、脚本自动更新、安全、兼容性、Chrome 同步、CodeMirror 编辑器、JSHint

1.9K00

写html页面没意思,来挑战chrome插件开发

开发者可以利用这些技术在浏览器中添加新功能、修改现有功能或者与网页进行交互。...谷歌浏览器插件可以实现各种功能,例如添加新工具栏按钮、修改网页内容、捕获用户输入、与后台服务器进行通信等。开发者可以通过谷歌浏览器插件API来访问浏览器各种功能和数据,实现各种定制化需求。...内容脚本相对于background还是有一些访问API上限制,它可以直接访问以下chromeAPI i18n storage runtime: connect getManifest getURL...替换浏览器默认页面 override功能,是可以替换掉浏览器默认功能页面,可以替换newtab、history、bookmark三个功能,将新开页面、历史记录页面、书签页面设置为自定义内容。...通过这些方法,您可以从内容脚本扩展程序发送一次性 JSON 可序列化消息,或者从扩展程序向内容脚本发送。如需处理响应,请使用返回 promise。

27911

Chrome 插件

日常类 Tampermonkey Tampermonkey(油猴)是最受欢迎浏览器扩展之一,拥有超过 1000 万用户,绝对算是 Chrome 最强大扩展了。...其中脚本可前往Greasy Fork获取。这个脚本中不乏有去广告、网页限制去除等功能。 Tampermonkey Chrono Chrome 有自己默认下载器,但是功能太过简单。...Awesome Screenshot 二维码生成器 (Quick QR) Chrome 上好评率最高二维码生成器:可以方便地把当前页面转化成二维码,也可以把网页上任何文本或链接,甚至是您输入任意内容都转化成二维码...不过新版本 Chrome 在网址输入框尾部自带了生成二维码功能。...Quick QR Fatkun 智能下载器 Fatkun 智能下载器可高效实现下载管理,网页图片,视频,音频等内容嗅探和下载,同时扩展集成多个网站智能脚本,快速提取你想要内容

1.5K10

用好这 42 款 Chrome 插件,每年轻松省出一个年假

15、Cloudbleed Bookmark Checker:检测书签是否有死链 对于书签收藏狂魔同志,收藏夹里网页肯定有很多都无法访问了吧!这款扩展就是来检测书签是否有死链。...有同步笔记、代办事项等,同时,喜欢它网页图标,提供了很多常用网站图标,自定义书签时很好看~唯一缺点,就是感觉启动比较慢~ 17、crxMouse Chrome Gestures 对于国产浏览器自带鼠标手势功能...28、Reader View:Chrome 也有 Safari 阅读模式 将网页转换成 Safari 阅读模式样式,你更方便舒适阅读网页文字,当你访问文章网页时候,扩展程序按钮会显示在地址栏末端...29、DrumUp:个性化浏览推荐 当你打开一个网页时候,为您推荐与现在浏览网页内容相似或者相关内容,对于英文支持比较好,每天阅读很多的人能找到很多关联感兴趣内容。...40、Tampermonkey 俗称‘油猴子’,是一款功能非常强大插件,他包含:方便脚本管理、脚本概览、设置多样性、脚本自动更新、安全、兼容性、Chrome 同步、CodeMirror 编辑器、

1K10

用好这 42 款 Chrome 插件,每年轻松给你省出一个年假!

15、Cloudbleed Bookmark Checker:检测书签是否有死链 对于书签收藏狂魔同志,收藏夹里网页肯定有很多都无法访问了吧!这款扩展就是来检测书签是否有死链。...有同步笔记、代办事项等,同时,喜欢它网页图标,提供了很多常用网站图标,自定义书签时很好看~唯一缺点,就是感觉启动比较慢~ 17、crxMouse Chrome Gestures 对于国产浏览器自带鼠标手势功能...28、Reader View:Chrome 也有 Safari 阅读模式 将网页转换成 Safari 阅读模式样式,你更方便舒适阅读网页文字,当你访问文章网页时候,扩展程序按钮会显示在地址栏末端...29、DrumUp:个性化浏览推荐 当你打开一个网页时候,为您推荐与现在浏览网页内容相似或者相关内容,对于英文支持比较好,每天阅读很多的人能找到很多关联感兴趣内容。...40、Tampermonkey 俗称 ‘油猴子’,是一款功能非常强大插件,它包含:方便脚本管理、脚本概览、设置多样性、脚本自动更新、安全、兼容性、Chrome 同步、CodeMirror 编辑器

88520

用好这 42 款 Chrome 插件,每年轻松省出一个年假(附下载)

15、Cloudbleed Bookmark Checker:检测书签是否有死链 对于书签收藏狂魔童鞋,收藏夹里网页肯定多到都无法访问了吧!这款扩展就是来检测书签是否有死链。...有同步笔记、代办事项等,同时,喜欢它网页图标,提供了很多常用网站图标,自定义书签时很好看~唯一缺点,就是感觉启动比较慢~ ?...28、Reader View:Chrome 也有 Safari 阅读模式 将网页转换成 Safari 阅读模式样式,你更方便舒适阅读网页文字,当你访问文章网页时候,扩展程序按钮会显示在地址栏末端...29、DrumUp:个性化浏览推荐 当你打开一个网页时候,为您推荐与现在浏览网页内容相似或者相关内容,对于英文支持比较好,每天阅读很多的人能找到很多关联感兴趣内容。 ?...40、Tampermonkey 俗称‘油猴子’,是一款功能非常强大插件,他包含:方便脚本管理、脚本概览、设置多样性、脚本自动更新、安全、兼容性、Chrome 同步、CodeMirror 编辑器、JSHint

19.4K22

Chrome插件开发教程

本文将详细介绍如何开发一款Chrome插件,包括插件介绍、开发配置与调试。不包含插件发布、审核等内容。...通过阅读本教程,你能够:了解浏览器器插件,这里专指 Chrome Extension(CE)基本知识和运行原理了解如何开发CE界面和逻辑调试插件,根据错误信息做出修复什么是浏览器插件浏览器插件是一种可增强网页功能嵌入程序...有了插件,用户使用不再局限于网页,还可以享用插件带来增强功能。用户只需到官方插件商店搜索、下载、安装即可使用,非常便捷。...记录浏览历史插件提供了内容脚本 Content Scripts(CS)概念,当用户打开并访问某个网站时,浏览器将CS注入网站文档里执行。因此,我们需在CS脚本里编写记录逻辑。...随便访问几个网页后,点击插件图标可以看到:在这里插入图片描述添加自定义icon默认icon比较简陋,我们用一张熊猫图片作为插件icon。新增assets目录,放一个icon.png文件。

1.3K10

常用 Chrome 插件

,收藏夹里网页肯定有很多都无法访问了吧!...将网页转换成 Safari 阅读模式样式,你更方便舒适阅读网页文字,当你访问文章网页时候,扩展程序按钮会显示在地址栏末端,点击就能轻松享受更好阅读模式。...离线版下载地址: https://u14797164.pipipan.com/fs/14797164-238588468 29、DrumUp:个性化浏览推荐 当你打开一个网页时候,为您推荐与现在浏览网页内容相似或者相关内容...API & HTTP 请求调试工具,它不仅可以调试简单 HTML、CSS 以及脚本等简单网页基本信息,这款 Chrome 插件甚至还能发送几乎所有的 HTTP 请求,可谓是 Web 开发者一大利器...,他包含:方便脚本管理、脚本概览、设置多样性、脚本自动更新、安全、兼容性、Chrome 同步、CodeMirror 编辑器、JSHint 语法检查、快速开发、卸载等功能

1.5K10

【一条工具】教你如何访问谷歌

谷歌访问助手 官网:ggfwzs.com/ 谷歌访问助手是一款为chrome扩展用户量身打造谷歌浏览器插件,主要用于帮助用户解决使用谷歌助手谷歌搜索、邮箱、商店等无法打开问题。...它是一个脚本引擎,相对于扩展脚本更轻量级,不占用太多资源并且只在特定站点生效。他能够通过最简单脚本来更改一个网站或者网页布局、外观、操作。...你每次都质疑自己:这真的是我要打开网页吗? uBlock Origin是一款高效请求过滤工具:占用极低内存和CPU,这是他一打特点。...Infinity新标签页是一款基于html5扩展程序,它将开启你Chrome新标签页高度自定义时代。...图片助手(ImageAssistant) 图片助手(ImageAssistant),是一款Chrome浏览器中用于嗅探、分析网页图片、图片筛选、下载等功能及收藏、检索、分享等在线服务扩展程序,真正做到所见即所得

17.9K121

42款堪称神器 Chrome 插件

,收藏夹里网页肯定有很多都无法访问了吧!...将网页转换成 Safari 阅读模式样式,你更方便舒适阅读网页文字,当你访问文章网页时候,扩展程序按钮会显示在地址栏末端,点击就能轻松享受更好阅读模式。...离线版下载地址: https://u14797164.pipipan.com/fs/14797164-238588468 29、DrumUp:个性化浏览推荐 当你打开一个网页时候,为您推荐与现在浏览网页内容相似或者相关内容...API & HTTP 请求调试工具,它不仅可以调试简单 HTML、CSS 以及脚本等简单网页基本信息,这款 Chrome 插件甚至还能发送几乎所有的 HTTP 请求,可谓是 Web 开发者一大利器...,他包含:方便脚本管理、脚本概览、设置多样性、脚本自动更新、安全、兼容性、Chrome 同步、CodeMirror 编辑器、JSHint 语法检查、快速开发、卸载等功能

1.9K50
领券