文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    小技巧 | Get 到一个 Web 自动化方案，绝了！

    Chrome 插件 Chrome 扩展插件运行于基于 Chromium 内核的浏览器 包含：Chrome 浏览器、Microsoft Edge、360 浏览器等 一个 Chrome 扩展插件有 3 类文件组成...实战一下 假设我们现在需要完成一个插件，在首次登录或登录失效时，自动完成登录操作 3-1 创建项目 我们创建一个文件夹，项目结构目录如下 3-2 项目配置 我们在 manifest.json 配置文件中.../按钮 const btn_element = document.getElementById("ContentHtml_btnLogin"); //输入后，点击确认 input(username_element..., "**"); input(password_element, "**"); //登录 btn_element.click(); 3-4 测试使用 在定义好插件 icon 图标及 popup...页面后，我们可以进入到 Chrome 插件管理界面 开启「 开发者模式 」，然后点击左侧的「 加载已解压的扩展程序 」加载上面创建的项目文件夹 开启扩展插件，每次打开目标网站或退出登录时，会发现网页会自动完成登录操作

    1.3K20

    小技巧 | Get 到一个 Web 自动化方案，绝了！

    Chrome 插件 Chrome 扩展插件运行于基于 Chromium 内核的浏览器 包含：Chrome 浏览器、Microsoft Edge、360 浏览器等 一个 Chrome 扩展插件有 3 类文件组成...实战一下 假设我们现在需要完成一个插件，在首次登录或登录失效时，自动完成登录操作 3-1  创建项目 我们创建一个文件夹，项目结构目录如下 3-2  项目配置 我们在 manifest.json 配置文件中.../按钮 const btn_element = document.getElementById("ContentHtml_btnLogin"); //输入后，点击确认 input(username_element..., "**"); input(password_element, "**"); //登录 btn_element.click(); 3-4  测试使用 在定义好插件 icon 图标及 popup 页面后...，我们可以进入到 Chrome 插件管理界面 开启「 开发者模式 」，然后点击左侧的「 加载已解压的扩展程序 」加载上面创建的项目文件夹 开启扩展插件，每次打开目标网站或退出登录时，会发现网页会自动完成登录操作

    1.4K00

    快速上手：如何开发一个实用的 Edge 插件

    在日常浏览网页时，背景图片能够显著提升网页的视觉体验。如果你也想为自己的浏览器页面添加个性化背景图片，并希望背景图片设置能够持久保存，本文将介绍如何通过开发一个自定义Edge插件来实现这一功能。...在本示例中，我们将开发一个简单的插件，通过它为网页添加自定义背景图片，并将背景图片URL保存在插件的选项页中，以便下次访问时能够自动加载。...背景设置与保存 我们将使用浏览器的localStorage API来保存用户的背景设置，并在用户每次打开插件时加载保存的设置。...点击“加载已解压的扩展”按钮，选择插件文件夹。 插件安装成功后，可以在浏览器工具栏中看到插件图标，点击它即可更改背景。...三、插件发布与上传流程 一旦开发完成并经过测试，你可能希望将插件发布到Microsoft Edge扩展商店供更多用户使用。以下是发布插件的基本流程： 1.

    1.9K10

    用ChatGPT（o3-mini-high）& Claude-3.7-sonnet开发谷歌浏览器插件！实战+踩坑修复+源码对比

    今天带你亲身体验： 从0开始，生成Chrome插件 遇坑、调试、修复 最后对比不同AI模型的开发体验 项目目标 浏览网页时输入关键词 点击【高亮】，标出所有匹配的文本 点击【清除】，一键恢复正常页面...第一阶段｜用ChatGPT（o3-mini-high）实战开发（含调试过程） 1️⃣ 初次生成 Prompt： 写一个Chrome扩展程序，支持Manifest V3。...用户可以输入一段文字，点击按钮后，在当前网页中高亮所有包含这段文字的内容。...button id="highlightButton">高亮 很基础，一个输入框+一个按钮...在测试时又遇到新报错： Uncaught ReferenceError: removeHighlights is not defined 原因：在 Chrome 插件中注入的函数，只能使用自身作用域内定义的函数

    32910

    Chrome 插件特性及实战场景案例分析

    3.2 Chrome扩展插件的核心机制 Chrome扩展插件中比较核心的几个概念：Extension Page、background.js、Content_script.js ，它们在什么时机触发，扮演着什么角色...四、Chrome扩展插件能做什么 Chrome扩展插件的使用方向主要包含两个部分： 改变浏览器的外观： brower Actions page Actions content menus 桌面通知 Omnibox...下面我们通过实例来分析这些功能的使用案例： 实例1:替换页面 使用替代页，可以将Chrome默认的一些特定页面替换掉，改为使用扩展提供的页面。这让开发者可以开发更多有趣或者实用的基本功能页面。...例如我们在开发工作中，经常需要频繁的清除浏览器缓存，每次都需要先找到清除按钮，弹出对话框，进行确认，操作很繁琐，如果开发一个chrome扩展插件，就可以轻松实现一键快捷清除浏览器Cookie等缓存，可以参考...实例3：标签控制  使用chrome.tabs API与浏览器的标签系统进行交互，可以查询，创建、修改和重新排列浏览器中的标签页;我们在使用浏览器时，经常会打开很多标签页，显得很混乱，中途想要找打开的某个页面时

    2.2K40

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

    前言 在我们的工作过程中，每当需要排查问题、跑冒烟用例、看测试环境的效果时，经常需要在浏览器环境中切换登录账号，另外，在开发的过程中，也需要在编辑器 VS Code 里切换代理登录的账号。...扩展是基于 Web 技术构建的，例如 HTML、JavaScript 和 CSS。它们在单独的沙盒执行环境中运行，并与 Chrome 浏览器交互。...扩展允许您通过使用 API 修改浏览器行为和访问 Web 内容来“扩展”浏览器。...如果不手动删除数据，可支持前端长久保存，并随时可以在控制台中查看，分享给其他合作者。 缺点 统一使用者针对不同浏览器访客角色无法实现账号打通的能力，这一缺陷将在下次接入后端时弥补。...hl=zh-CN) 插件，点击按钮进行重新加载。 安装扩展文件 Chrome 允许安装 Chrome 应用市场和本地文件两种来源的扩展文件。

    2K10

    Ajax 的简介与使用

    2、缺点 不支持浏览器back按钮 安全问题，Ajax 暴露了与服务器交互的细节 对搜索引擎的支持比较弱 三、Ajax 的使用 -- 实现步骤 1、创建 XMLHttpRequest 对象，即创建一个异步调用对象...var XHR; if(window.XMLHttpRequest){   XHR=new XMLHttpRequest(); //IE7+, Firefox, Chrome...形式的响应数据 2、同步处理 XHR.open("GET","demo_get.html",false); XHR.send(); // 直接在 send() 后面处理返回来的数据 document.getElementById...比较常见的有： 200：“OK”（当 readyState 等于 4 且状态为 200 时，表示响应已就绪） 304：该资源在上次请求之后没有任何修改（这通常用于浏览器的缓存机制，使用GET请求时尤其需要注意...） 403：（禁止） 服务器拒绝请求 404：（未找到） 服务器找不到请求的网页 408：（请求超时） 服务器等候请求时发生超时 500：（服务器内部错误） 服务器遇到错误，无法完成请求

    1.2K10

    开发Chrome插件获取当前页面Cookie

    hl=zh-cn 效果是单机插件按钮，弹出一个端面 分析HelloWorld示例 四个文件，分别是一个html,一个json，一个js，和一个png格式的图片 看来插件开发不需要很多的技术储备，会js就够了...扩展文件的发行版本，类似vue2 还是vue3的声明 "action": { // 声明 Chrome 应用作扩展程序的操作图标的图片，以及当用户点击扩展程序的操作图标时在弹出式窗口中显示的 HTML...从本地加载扩展程序 Pasted image 20231230213318 可以看到已经加载成功了，图标正是最后一个图片文件hello_extensions.png 单机Hi图标，在 右键选检查，会再跳出来一个窗口...cookie 2.先打印cookie到端面(控制台要每次审查再进去看，没端面那么方便) 3.把打印内容复制进剪切板 4.确认能够复制以后，整理cookie的格式，使cookie文本可以直接复制进postman使用...hl=zh-cn 其他示例 chrome扩展示例 https://github.com/GoogleChrome/chrome-extensions-samples

    1.3K10

    插件实现12306网站“按预填信息”自动抢票

    当我以为等着页面上的倒计时结束，“按预填信息购票”按钮出现后，立马点击一下就能开始抢票，然而并不是，当时的我心中真的是一万匹**马在崩腾。...希望达到的效果是，通过chrome插件，自动监听页面上的按钮控件，一是当出现“按预填信息购票”按钮时，自动触发点击；二是当出现“提交订单”按钮时，自动触发点击。...模式12306的页面写一个页面，模拟12306页面上的从“1月9日09点 起售”到“按预填信息购票”按钮出现的过程，再模拟当用户点击“按预填信息购票”按钮时，弹出“购票信息确认”窗口，显示“提交订单”按钮...打开右上角的“开发者模式”点击“加载已解压的扩展程序”按钮，选择你的12306 pre-filled buy文件夹。经过以上步骤后，应该就能在Chrome工具栏中看到你的扩展图标。...另外，在使用插件之前，我们需要注意几点：更新主机的系统时间，12306上面的倒计时貌似是根据系统时间来的，如果你的系统时间慢了，结果可想而知mac上可以执行命令：sudo ntpdate -u time.apple.com

    76400

    chrome插件实时通信的几种方式

    (); } }) content.js 在content.js中，使用chrome.runtime.sendMessage(params),当我们在content.js点击设置按钮时，此时就会打开设置页..."black": "red" }); 此时你会发现当你在设置点击按钮操作时，当前激活的tab就会实时触发 但是有一个场景，就是我想修改所有的content的状态，那该怎么办呢？...); }); }); } 缓存 当你在设置页修改状态时，content确实是可以实时变化了，但是，当你刷新，当前的状态的就会改变，所以你需要如何保持当前状态，那么你需要用到插件的缓存功能...在使用缓存功能之前，你需要在permission中添加storage { "permissions": ["storage"] } 在插件的设置页面 // set.js let flag...设置页设置缓存时，你在content重新刷新，那么就可以正常的获取缓存了。

    2.9K10

    【开发一个Chrome导出csv数据插件】

    核心功能包括： 通过内容脚本解析页面DOM结构 提取商品数据并存储 提供交互按钮触发导出操作 生成CSV文件并下载 技术方案 插件结构 manifest.json：定义插件配置和权限 content.js...`amazon_product_${Date.now()}.csv` }); }); 关键点说明 DOM选择器适配 需根据亚马逊不同地区站点（如.com、.co.jp）调整选择器，部分商品可能使用动态加载需等待元素出现...多商品支持 扩展代码可遍历列表页（如div[data-component-type="s-search-result"]），批量提取数据。...测试与优化 在亚马逊商品页（如https://www.amazon.com/dp/B08N5KWB9H）测试插件。 使用console.log调试数据提取逻辑。...完整项目可打包为.zip并通过Chrome的开发者模式加载。

    15110

    金格WebOffice2015-----vue项目

    index.html中引入WebOffice.js 修改iWebOffice2015.js 官网iWebOffice2015.js源文件在下面截图处少了一个闭合标签，如下图添加 由于异步加载不允许使用...浏览器如果需要使用高版本Chrome浏览器,需集成高级版插件'; var t = document.getElementById("OfficeDiv"); t.innerHTML...= t.innerText + str; } } } } */ 在iWebOffice2015.js末尾将拼接好的字符串暴露出来 代码示例 vue文件中import引入iWebOffice2015...、自定义工具栏按钮结束颜色、 //自定义工具栏按钮边框颜色、自定义工具栏开始颜色、控件标题栏文本颜色（默认值为：0x000000） if (!...this.webOfficeObj.HookEnabled(); this.webOfficeObj.CreateFile() // 根据FileType设置的扩展名来创建对应的空白文档

    1.7K30

    解决“Unchecked runtime.lastError: The message port closed before a response was received”错误的详细过程

    扩展时，开发者常常会遇到各种错误提示。...使用调试工具进行排查 利用Chrome的开发者工具和扩展的调试功能，可以有效地排查问题。...步骤： 打开扩展的后台页： 进入 chrome://extensions/ 页面，找到对应的扩展，点击“背景页”旁的“检查视图”按钮。...正确处理异步操作： 在接收方进行异步操作时，务必返回 true，确保响应能够正确发送。 保持消息通道稳定： 避免在发送消息后立即关闭连接或卸载扩展，确保消息能够顺利传递和响应。...良好的消息传递机制不仅能提升扩展的稳定性和用户体验，也有助于开发者在复杂的扩展开发过程中保持代码的清晰和可维护性。 希望本文能为您在Chrome扩展开发过程中提供有价值的帮助。

    6.9K10

    document.getElementById 学习总结「建议收藏」

    我的计划是：在页面加载时，在的文本框中显示由后台处理来的数据，比如这里的字符串 “hello, my friend!”。...而使用id访问，也必须在文档载入完成之后，否则就可能 找不到这个元素。下面是个测试页面，在所有浏览器下都通过： 代码如下: getElementById时没有用到this，而 IE9/Firefox/Safari/Chrome/Opera 需要用到this，这里的this正是...直接调用方式2时内 部的 this却是window对象，所以造成方式2在 Firefox/Safari/Chrome/Opera 不能根据id来正常获取元 素。...所以在使用IE的前提下，document.all(index)要生效需要保证index是唯一的 所以如果你想让你写的js脚本在目前的大多浏览器中使用，需要使用[公共标准] 标准的Javascript

    3.6K10

    手摸手教你，从0到1开发一个Chrome浏览器插件

    开发 Chrome 浏览器插件（也称为扩展）是一段有趣且有成就感的过程。在本教程中，我将引导你从零开始，逐步创建一个简单的 Chrome 插件。...popup.html：用户点击插件图标时显示的界面。style.css：用于美化插件界面的样式表。4....在项目文件夹中添加三种不同尺寸的图标：icon16.png、icon48.png 和 icon128.png。你可以使用在线图标生成器生成图标，或从网络下载适合的图标。5....在 Chrome 中加载扩展打开 Chrome 浏览器，输入 chrome://extensions/ 并按回车。在右上角启用开发者模式。...点击按钮，你应该会看到提示框弹出，显示 “Button clicked!”。现在，你已经成功创建了一个简单的 Chrome 插件！是不是非常简单呢？

    9.8K11
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

      领券