如何在我自己的扩展中获得刚打开的页面而不是chrome特殊页面 - 腾讯云开发者社区

文章/答案/技术大牛

发布

Chrome设置断点的各种姿势

- 本文记录一下如何在Chrome上设置断点，以及可以设置哪些断点，并不涉及具体调试相关的操作。...在JavaScript代码中设置断点刚工作时被leader安利了Chrome浏览器，那时一说到调试，就知道这一个操作以为在行号上单击一下就是打断点，就是会调试了:) 当然这也是最最基本的打断点的方式了...首先需要打开Devtools切换到Source页签，然后在左侧file navigation中找到我们要设置断点的文件并打开。在打开的页面上单击对应的行号即可设置断点。...但如果遇到一些特殊情况，断点添加起来不是那么的舒服的时候要肿么办呢？比如说我写了一个循环，该循环会执行10次，可是我发现程序在第8次执行时的结果并不是我想要的。...（不禁回想起刚工作时，有类似的问题，我当时的处理方式就是一手托腮，另一只手放在F8键上，狂按数十下后正襟危坐，开始调试）显然，Chrome已经帮我们想到了这种场景，我们可以通过添加一些条件断点来避免一些无意义的断点

18K8 0

产品发布策略：如何让Chrome插件在竞争激烈的市场中脱颖而出

，如何在竞争激烈的Chrome插件市场中找到自己的位置才是关键。...在两个月全职创业的过程中，我深刻体会到一人公司必须用有限的资源创造最大的市场影响力。Chrome Web Store每天新增很多个插件。...插件刚发布，用户只有我自己，如何在这样的红海市场中找到自己的位置，是我一直在思考的问题。...现有截图工具无法精确选择页面元素。专门针对AIGC内容优化的截图工具市场空白。插件本身是开源的，不考虑商业化。刚开源发布用户只有1人。...这个发布策略虽然基于当前的真实状态，但为Chrome元素截图插件的未来发展提供了清晰的路径。在创业路上，诚实面对现状，制定切实可行的策略，才能获得真正的成功。

1441 0

您找到你想要的搜索结果了吗？

是的

没有找到

设计和实现一个 Chrome 插件提升登录效率

本文将讲述一下如何在浏览器环境，扩展 Chrome 浏览器原有的“记住密码”功能，实现快捷登录、隔离账号信息以及备注标签等方便使用的功能，同时分享给测试、后端、产品等其他的伙伴，提高大家的效率，希望这次探索能给更多的人带来启发...美观的 UI 选型由于原政采云登录页面是用内部基于 AntD 开发的组件库，为了保持视觉风格的统一，我选择了继续使用我们内部的组件库，每个团队也可以根据自己情况选择自己的组件库，或者开源的组件库，如...更便捷的交互设计既然可以访问 Web 内容，那么最简便的操作就是不用触发任何其他的按钮打开弹层，直接识别登录页面，在原有登录页面的空白处中插入我们的组件 DOM 元素，就可以实现最便捷的操作。...name：扩展名，显示在我的扩展文件中 manifest_version：标记 manifest.json 文件的版本号。...访问 chrome://extensions/，打开开发者模式，点击加载已解压的扩展程序，就可以选中我们本地的文件了，Edge 等浏览器也可以用。

1.9K1 0

移动前端页面与Chrome的远程真机调试

前几日刚入手新手机小米5，系统真心流畅呀。为啥要买小米5呢，因为要提高生产力呀，好好玩移动前端开发呀哈哈哈 ? 那么问题来了，要怎么调试手机上的前端页面呢？...很久很久以前，我的做法是：在PC上用Chrome移动模拟器调试好后，基本OK，再把相关文件传到手机上，在真机上测试以防特殊问题出现。...接下来，就通过小米5，诠释这一调试方案的准备过程一、PC端准备Chrome新版本、手机端准备移动Chrome新版本二、手机的开发者选项打开，其中的USB调试打开 ?...1 位置可以自定义链接更新 2 位置是手机Chrome中页面在PC中的映射，这样以来可以直接在此映射上审查元素，如 3 所示 4 位置控制是否需要映射，如果取消选中，则取消映射，且可在手机上审查元素，如图...5 位置中可以做相应设置 ? ? 五、端口转发功能，实现本地/服务器相关页面的调试上面说到的调试只是基本的功能，只能调试服务器（特定链接）上的页面，如果要调试本地的页面文件呢？ ? ? ?

2.6K3 0

「知识」Lighthouse插件在SEO中的应用

珍惜当下的生活，是贫是富都流淌着自己的血汗。奋斗在当下，就是幸福。好久没有写文章了，最近一直忙SEO项目，最近刚上线。现在SEO也是越来越难做了，需要注意到很多细节的优化。...运行 Lighthouse 的方式最常用的是：作为 Chrome 扩展程序运行，或作为命令行工具运行。 Chrome 扩展程序提供了一个对用户更友好的界面，方便读取报告。...如果仅仅是想查子集的话，可以点击左下角的“Options”按钮，进行筛选；一切就绪后，直接点击右下角的“Generate report”按钮以针对当前打开的页面运行 Lighthouse 测试。...在完成审查后，Lighthouse 将打开一个新标签，并在页面的结果上显示一个报告。如下图： ?...您的关注与分享就是我最大的动力

1.1K15 0

粘贴=打开，手都懒废了

每一个步骤，都在你的工作流中插入了“卡顿时刻”：拖着鼠标移动的手感令人烦躁，粘贴链接的机械操作打乱思路，还要补上一个大写的“回车”才算结束。而且，你敢说自己没遇到过这些场景？...由系统自动检测并打开，省去按回车键的麻烦。我的解决方案为了实现这一目标，我开发了一个 Chrome 插件，让这一切变得简单流畅：智能监听粘贴：只要你在页面中粘贴内容，无论在哪里，它都能捕获。...触发新标签页打开：使用 Chrome 的扩展 API chrome.tabs.create 自动在后台打开一个新标签页。为什么开发这个插件？因为懒！...这不是普通的“懒”，而是高级懒人哲学——用技术让自己更高效、更省力。现代社会的节奏已经够快了，我们为什么还要在这些繁琐的动作中浪费时间？...你只需点开这个链接：我的 GitHub 开源项目仓库（假装这里有个金光闪闪的链接），你就能获得：插件完整源码：不仅可以用，还能学！

1520 0

Chrome扩展开发入门

所以说，Chrome 扩展开发并不是什么新鲜玩意儿，只是一个挂载到 Chrome 浏览器上的一个“扩展”模块，比起微信小程序开发还简单。这不就是网页应用吗？...我们的确可以把他看做是网页应用，当然，相比于纯网页页面他也有自己的特点： 1.有独立的入口，可以在浏览器右边的“插件”区域点击打开。...2.相比也网页有更多的功能特性，支持调用 Chrome 浏览器原生API，可跨浏览器 Tab 运行，生命周期不会不随着页面关闭而结束。...二、API 文档前面说了，扩展应用其实就是特殊的 h5 前端应用，相比于传统的 h5 的功能，扩展最大的优势就在于他可以直接调用 chrome 原生Api。...Chrome 扩展提供了许多特殊用途的 Api，囊括了本地存储、定时任务、Tab切换、网络请求、书签、屏幕截图、历史记录、文件下载、devTools信息、页面性能等在内的 100+ 个Api。

4.5K3 0

（新）关于修改window.navigator.webdriver代码失效问题

get: () => undefined }) 我前面试了下，继续操作点击链接、输入网址进入另一个页面，或者开启新的窗口，window.navigator.webdriver又变成了...可以通过写 Chrome 浏览器的插件，在网站刚打开还未运行自带的 JavaScript 之前运行插件里面的 JavaScript 语句（这种方式虽然可以解决问题，但有点儿麻烦，而且重要的是本人不会写插件...我们打开 CDP 的官方文档，可以看到如下的命令： ? 在每个Frame 刚刚打开，还没有运行 Frame 的脚本前，运行给定的脚本。...通过这个命令，给定一段 JavaScript 代码，让 Chrome 刚刚打开每一个页面，还没有运行网站自带的 JavaScript 代码时，先执行给定的这段代码。...’如何在 Selenium 中调用 CDP 的命令？使用driver.execute_cdp_cmd。根据 Selenium 的官方文档，传入需要调用的 CDP 命令和参数即可： ?

2K4 1

那些我常用的 Chrome 扩展神器（三）

知识星球浏览器功能扩展由好友@一条枸杞开发，主要功能有：【黑科技】右下角一键前进到页面底部~【输入增强】输入框特殊符号插入助手（点击后特殊符号会置入剪贴板）【评论增强】评论输入框颜文字输入助手...输入特殊字符 ? ? 置顶星球，这个功能本来只在APP上有，有了扩展网页上也可以用了。 ?...hl=zh-CN 捕捉网页截图捕捉网页截图，编辑并将它们保存为PDF，JPEG，GIF，PNG或BMP；上传，打印，在Photoshop中打开，复制到剪贴板或电子邮件。 ?...如果你购买的商品符合京东价格保护规则，如商品出现降价（不包括支付方式的相关优惠），在价保规则范围内，将赠送您与差额部分等值的款项、或京券、京豆。 ? ? image ?...离线保存网页遇到自己喜欢的网页文章可以离线保存下来，不管是gif还是图片，都会原封不动的保存下来，这里以知乎首页为例。 ? 下载后的网页有8.5M，有点大，页面上的链接图片都在。 ?

2.3K3 0

【干货】Chrome插件(扩展)开发全攻略

插件而不是Firefox插件 Chrome占有率更高，更多人用；开发更简单；应用场景更广泛，Firefox插件只能运行在Firefox上，而Chrome除了Chrome浏览器之外，还可以运行在所有webkit...background 后台（姑且这么翻译吧），是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、全局的代码放在...，虽然你可以通过chrome-extension://xxx/background.html直接打开后台页，但是你打开的后台页和真正一直在后台运行的那个页面不是同一个，换句话说，你可以打开无数个background.html...由于devtools本身就是开发者工具页面，所以几乎没有方法可以直接调试它，直接用 chrome-extension://extid/devtools.html"的方式打开页面肯定报错，因为不支持相关特殊...文档模糊匹配规则语法详解第三方资料部分中文资料，不是特别推荐： 360安全浏览器开发文档 360极速浏览器Chrome扩展开发文档 Chrome扩展开发极客系列博客

12.6K4 0

给网站添加PJAX无刷新

那么如何在自己的网站上实现PJAX呢？开源社区提供了多种解决方案，其中JQuery版本的PJAX因其流行性和丰富性备受关注。...JS 文件放在网站的底部，防止因文件加载过慢而导致的页面阻塞打开缓慢的情况。...只要是个网站，每次切换页面的时候，title 标签是必然得替换的。在我这个案例中，main 是每次切换页面之后会产生内容变化的容器。...是不是非常简单呢？重载函数如果你的页面内容需要配合 JS 实现一些特效（例：图片灯箱），你可能会发现刚打开页面时所执行的 JS 效果失效了。...下面这个是我现在所使用的一个案例，你也可以自己设计一个加载动画，使用图片什么的都是一样的。 HTML：<!

7730 0

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

你可以在 chrome 应用商店下载到它：开发它的原因是因为，在我们的业务开发中，开发过程经常需要面对超长的 URL，带有 N 多个参数，它可能长这样：不是开玩笑，真实情况可能比这个还长。...基于这个出发点，我制作了 URLHelper 这个扩展，它的界面大概长这个样子，可以非常方便的对 URL 参数进行删查改排序，修改参数刷新页面：所以，扩展程序我觉得每个前端都可以开发，用于解决我们工作生活中在使用浏览器遇到的各种问题...可以将 content script 看作是网页的一部分，而不是它所在的扩展程序的一部分。...中的微格式数据我们可以这样理解它，在页面加载完毕之后，我们的扩展程序会向这个页面注入一个或者额多个脚本，这个脚本可以获得浏览器所访问的 web 页面的详细信息。...扩展程序的消息传递消息传递存在的必要性是因为内容脚本在网页而不是扩展程序的环境中运行，所以它们通常需要某种方式与扩展程序的其余部分通信。

1.5K2 0

Python库之玩转Selenium

): 用户每次打开一个网站页面就被记录一次.用户多次打开同一页面,浏览量累计....新访客比率: 新访客数/访客数跳出率: 只浏览了一个页面便离开了网站的访问次数占总的访问次数的百分比平均访问时长: 访客在一次访问中,平均打开网站的时长.即每次访问中,从打开第一个页面到关闭最后一个页面的平均时间...这里给两个思路: a.正面硬刚(获取视频的所有帧,通过图像识别算法进行相似度的分析)是不是有点太难了呢? b....换个思路(那硬刚不行,我就换个思路),已知基本上在视频时长的一半处会弹出答题页面,那我就设置一个定时(定时时间略大于视频长度的一半),然后通过selenium模拟浏览器的点击操作 web端的投票大家都知道吧...哈哈,本周的分享就结束了,希望大家把刷课、投票这些当作一个例子去更好的理解selenium更好的使用它,而不是通过它做什么流氓软件破坏市场对吧,做一个懂规矩的软件人~

1.3K3 0

猫头虎推荐：Chrome MCP Server，让 Chrome 浏览器变成你的 AI 智能助手

与传统的浏览器自动化工具（如 Playwright）不同，Chrome MCP Server 直接使用你日常使用的 Chrome 浏览器，保留你的用户习惯、配置和登录态，让各种大模型或 chatbot...（npm 或 pnpm） Chrome/Chromium 浏览器安装步骤下载 Chrome 扩展从 Releases 页面获取最新版本的已打包扩展： https://github.com/hangwin...加载 Chrome 扩展打开 Chrome，访问 chrome://extensions/ 启用“开发者模式” 点击“加载已解压的扩展程序”，选择刚下载的扩展目录点击插件图标，选择“连接”即可看到.../twI6apRKHsk AI 自动捕获网络请求指令：我想知道小红书的搜索接口是哪个，响应体结构是什么样的示例页面：https://youtu.be/1hHKr7XKqnQ AI 帮你分析浏览记录...指令：分析一下我近一个月的浏览记录示例页面：https://youtu.be/jf2UZfrR2Vk 更多示例请查看官方文档或 Demo 视频。

2.9K2 0

Chrome Extension

background 后台（姑且这么翻译吧），是一个常驻的页面，它的生命周期是插件中所有类型页面中最长的，它随着浏览器的打开而打开，随着浏览器的关闭而关闭，所以通常把需要一直运行的、启动就运行的、...}); 扩展调试 chrome的菜单里打开扩展程序(打开开发者模式) ? 调试通普通页面一样如何优雅的调试右键Chrome工具栏的小图标会弹出一个窗口，选择审查弹出内容即可调试。...然后找到extension目录打包当您为扩展程序打包时，扩展程序将获得唯一的密钥对，扩展程序的标识符基于公钥的散列，私有密钥用来为每一个版本的扩展程序签名，必须严格保护，不能由公众访问。...注意千万不要将您的私有密钥包含在扩展程序中！创建包进入以下URL，打开扩展程序管理页面:chrome://extensions 确保右上角的开发者模式复选框已选中...., 可以使用 page_action 而不是 browser_action //browser_action 应用更加广泛 //如果 page_action 并不应用在当前页面, 会显示灰色 "page_action

3.6K3 0

【Chrome】用户可以手动管理和删除第三方Cookie

如何在Google Chrome浏览器中手动管理和删除第三方Cookie 方法一：通过浏览器设置删除第三方Cookie 1. 打开Chrome浏览器启动Google Chrome浏览器。...访问设置页面点击浏览器右上角的三点菜单（⋮），从下拉菜单中选择“设置”（Settings）。这将打开Chrome的设置页面。在设置页面中，你可以调整浏览器的各种配置以满足你的需求。 3....进入隐私与安全设置在设置页面的左侧导航栏中，点击“隐私与安全”（Privacy and security）。这部分包含了与隐私保护和安全相关的所有设置，如Cookie管理、网站权限等。 4....这些扩展程序提供了自动化的Cookie管理和隐私保护功能。 3. 安装扩展程序点击搜索结果中的扩展程序，选择“添加到Chrome”（Add to Chrome），然后确认安装。...用户将更加重视自己的数据隐私，并采取积极措施来保护个人信息。 8. 表格汇总方法步骤说明方法一：通过浏览器设置删除第三方Cookie 1. 打开Chrome浏览器。2.

9181 0

我是如何用这3个小工具，助力小姐姐提升100%开发效率的。

，就可以进入像chrome控制台一样调试了 image.png 看完流程你应该大概知道问题在哪里了, 远程调试页面列表不仅仅包含我自己的页面，还包括很多其他人的，导致很难快速找到自己想要调试的页面该如何解决...问题解析有什么办法能让我快速找到自己想要调试的页面呢？...，过滤后只剩3个，瞬间就找到你要调试页面，再也不用从几百个页面中寻找你自己的那个啦！...设置/修改device 使用ua：选择新添加的ua，刷新页面，重新开发调试 ua.gif 来看一段对话隔壁98年刚毕业妹子：又过期了，谁又把我挤下去了嘛好的，稍等一会哈，我换个账号测测好麻烦哎...热刷新我们希望修改插件源代码进行打包之后，chrome插件对应的页面能主动更新。为什么叫热刷新而不是热更新呢？因为它其实是全局刷新页面，并不会保存状态。

1.4K3 0

基于Chrome插件的开发工具链

我是在写第二个Chrome插件的时候写下这篇类似记录的东西，一是有些资源找起来方便，二是下次开发插件的时候不需要从头回顾。...唯一有一点不一样的是，在content script中如果要获取插件中的资源文件，需要通过_chrome.extension.getURL_接口来获得完整路径。...URL权限匹配表达式插件可以访问哪些页面是要通过匹配表达式指定的，这个表达式有点像通配符，但是又不是通配符。它的匹配表达式分为协议、主机和路径三部分。...调试 chrome的调试已经非常强大了，在扩展页面上打开开发者模式，可以载入正在开发中的插件的文件夹。后台页的调试可以在扩张页面点击插件下面的地址打开调试面板。...content script可以在网页上打开网页的脚本调试面板，然后脚本列表那里有个tab是Content scripts 打包和自动更新 chrome浏览器自带了打包工具，在扩展页面上就有。

7622 0

看我如何绕过限制访问到Google内部管理系统（价值$13337）

于是，我就用谷歌搜索了大量“绕过谷歌IP限制的方法”，有一篇路径为/blog/forum/comments的文章中透露，我们得需要用Google Access Proxy，也就是谷歌自己的访问代理来实现这种做法...那只有用手机来继续Google了，此时，因为我喜欢用Chrome，出于好奇，我就尝试在手机的谷歌浏览器Chrome中打开了其中一个IP，WTF，竟然出现了一个HTTP的登录页面，这简直是踏破铁鞋无觅处，...以下是Youtube的Youtube 卫星直播管理页面：以下是YouTube TV电视服务管理页面：山重水复疑无路过了一会，来电了，我就换作电脑来打开该IP地址，但是，却怎么也不行，完全打开不了刚刚手机上的登录页面...所有这一切的原因是由于手机Chrome浏览器扩展插件Data saver（流量节省程序）来帮我实现的，我手机上安装并启用了这个Data saver扩展。...谷歌于2015年为Chrome浏览器推出了相当实用的新扩展插件“Data Saver”，它的功能如名称一样，可以为用户节省浏览时的数据使用量，这款扩展使用了谷歌的数据压缩代理服务来为浏览器提供流量优化的页

1.7K4 0

AI浏览器自动化实战

切换到 Edge，关闭 Chrome：确保软件列表中没有 Chrome，完全交由 Browser 控制。接下来开始测试。我更换了一个提示词，前往淘宝电商网站购买一根逗猫棒。...自动打开了 Chrome 浏览器，这个浏览器是我自己电脑上的 Chrome，开始解析网页：网页解析完成后，输入 www.taobao.com 并点击搜索：成功进入淘宝网站，注意查看我截图中的网站是已经登录过的...Successfully，任务完成：除了使用自己的浏览器，还有一种免登录的方式，就是把 cookie 导入进 Playwright，这种方式我更推荐。...操作如下：点击浏览器右上角的扩展，点击管理扩展：找到“在 Chrome 应用商店中发现更多扩展程序和主题”，点击进入：搜索 Cookie Editor：将 Cookie Editor 安装到浏览器中：然后来到我们想要的网站...，比如淘宝，我已经登陆过了，然后在扩展栏目中找到我们刚刚安装的 Cookie Editor，点击打开：在 Cookie Editor 中点击 Export，导出当前网站的 Cookie 信息，导出格式选择

1.3K2 0

点击加载更多

Chrome设置断点的各种姿势

产品发布策略：如何让Chrome插件在竞争激烈的市场中脱颖而出

设计和实现一个 Chrome 插件提升登录效率

移动前端页面与Chrome的远程真机调试

「知识」Lighthouse插件在SEO中的应用

粘贴=打开，手都懒废了

Chrome扩展开发入门

（新）关于修改window.navigator.webdriver代码失效问题

那些我常用的 Chrome 扩展神器（三）

【干货】Chrome插件(扩展)开发全攻略

给网站添加PJAX无刷新

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

Python库之玩转Selenium

猫头虎推荐：Chrome MCP Server，让 Chrome 浏览器变成你的 AI 智能助手

Chrome Extension

【Chrome】用户可以手动管理和删除第三方Cookie

我是如何用这3个小工具，助力小姐姐提升100%开发效率的。

基于Chrome插件的开发工具链

看我如何绕过限制访问到Google内部管理系统（价值$13337）

AI浏览器自动化实战

相关资讯

热门标签

活动推荐

运营活动

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐