文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗？
是的
没有找到

小技巧 | 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 插件管理界面 开启「 开发者模式 」，然后点击左侧的「 加载已解压的扩展程序 」加载上面创建的项目文件夹 开启扩展插件，每次打开目标网站或退出登录时，会发现网页会自动完成登录操作

1K00

小技巧 | 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.1K20

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与浏览器的标签系统进行交互，可以查询，创建、修改和重新排列浏览器中的标签页;我们在使用浏览器时，经常会打开很多标签页，显得很混乱，中途想要找打开的某个页面时

1.7K40

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

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

1.4K10

制作一个简单的chrome扩展

最好的解决方式,就是用js编写程序,直接放到对方的浏览器里运行,毕竟也没有那个浏览器不支持js,如果对方安装了chrome内核的浏览器,你可以直接把程序改成chrome扩展,打包发给对方,问题也就很轻松的完美解决了.... ---- 当然如果你的扩展足够好,你可以把扩展上传到google商店,让全世界的用户,都能使用你的程序....想做到这些,你得先知道chrome的扩展的开发流程是什么! ? chrome商店 我们要做这样一个小玩意儿: ? 动图_效果演示 什么是扩展: 可以简单把扩展理解为浏览器的插件....打开chrome浏览器,在地址栏键入chrome://extentions,回车 ? 跳转扩展页面 2.打开开发者模式: ? 勾选开发者模式 3.点击"加载已解压的扩展程序" ?...("ibtn"); var best_food = document.getElementById("ifood"); // 点击按钮后的事件 btn.onclick = (function

1.1K130

开发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

29510

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：（服务器内部错误） 服务器遇到错误，无法完成请求

84510

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重新刷新，那么就可以正常的获取缓存了。

1.5K10

金格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.3K30

15分钟手摸手教你写个可以操控 Chrome 的插件

chrome 的扩展程序页加载我们的文件目录 即可 2.png 然后我们启用插件 随手打开一个页面就发现我们的插件已经生效了 3.png 4.png 第二步 在本地创建 websocket 的服务...7.png 第三步 开始使 chrome 插件 与 本地的 node 服务相互通信 在开始与 node 服务通信前我们要了解下 chrome 插件的几种 js 的使用场景 content-scripts.../background.js"> 我们可以使用两种方式来调试 这个常驻后台文件 1.直接在 chrome 拓展点击对应按钮即可弹出调试 8.png 9.png 2.直接在浏览器上输入对应的地址...即可 chrome-extension://${extensionID}/background.html 每次更新代码点击按钮刷新即可 为了调试方便起见我在 popup.js 中加入了以下代码 每次点击我们的插件图标即可新开一个后台页面...插件的朋友们也可以尝试下 参考资料 【干货】Chrome 插件(扩展)开发全攻略（https://www.cnblogs.com/liuxianan/p/chrome-plugin-develop.html

1.4K20

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

我的计划是：在页面加载时，在的文本框中显示由后台处理来的数据，比如这里的字符串 “hello, my friend!”。...而使用id访问，也必须在文档载入完成之后，否则就可能 找不到这个元素。下面是个测试页面，在所有浏览器下都通过： 代码如下: <!...换句话说，IE6/7/8实现document.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

2.3K10

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

中的代码（包括直接写onclick和addEventListener2种方式都不行），但是，“在页面上添加一个按钮并调用插件的扩展API”是一个很常见的需求，那该怎么办呢？...，改为使用扩展提供的页面。...扩展可以替代如下页面： 历史记录：从工具菜单上点击历史记录时访问的页面，或者从地址栏直接输入 chrome://history 新标签页：当创建新标签的时候访问的页面，或者从地址栏直接输入 chrome...我们先看老版的options： { // Chrome40以前的插件配置页写法 "options_page": "options.html", } 这个页面里面的内容就随你自己发挥了，配置之后在插件管理页就会看到一个选项按钮入口...打包与发布 打包的话直接在插件管理页有一个打包按钮： ?

11.5K40

前端开发必备之Chrome开发者工具（上篇）

Chrome 中的Web开发和调试工具，可用来对网站进行迭代、调试和分析 打开 Chrome 开发者工具的方式有： 在Chrome菜单中选择 更多工具 > 开发者工具 在页面元素上右键点击，选择 “检查...Chrome DevTools 的 Device Mode 打造移动设备优先的完全自适应式网站 该模式不可替代真实设备测试 切换 Device Mode 按钮可以打开或关闭 Device Mode ?...在 Elements 面板中选择元素，然后在 Styles 窗格中点击 :hov 按钮，使用复选框启用或停用当前选定元素的选择器 ?...： document.getElementById('main-content').remove(); 查看元素事件侦听器 在 Event Listeners 窗格中查看与 DOM 节点关联的 JavaScript...其他框架和扩展程序在其自身的环境中运行。要使用这些其他环境，您需要从下拉菜单中选中它们。

8.2K111

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

中就不能在配置 action:default_popup 在newPage.js文件中可以使用*chrome.tabs[3]*和chrome.windows[4]API；可以使用 chrome.runtime.getUrl...动态配置注入 在特定时刻才进行注入，比如点击了某个按钮，或者指定的时刻 需要在popup.js或background.js中执行注入的代码。...通过这些方法，您可以从内容脚本向扩展程序发送一次性 JSON 可序列化消息，或者从扩展程序向内容脚本发送。如需处理响应，请使用返回的 promise。...onMessage 在扩展程序和内容脚本中使用相同的代码 chrome.runtime.onMessage.addListener( function(request, sender, sendResponse...}) 然后就可以在content.js或popup.js中获取到数据 // 这里的参数是，获取不到数据时的默认参数 chrome.storage.sync.get({color: 'yellow'},

27811

selenium+python自动化101-execute_script 方法获取 JavaScript 返回值

前言 之前经常使用 execute_script() 方法执行 JavaScript 的来解决页面上一些 selenium 无法操作的元素，但是一直无法获取执行的返回值。...最近翻文档，发现 execute_script 是可以拿到 JavaScript 执行后的返回值的 演示案例 以打开https://www.cnblogs.com/yoyoketang/网页为示例，使用...目标元素元素属性 博客园 我们可以在浏览器 Console.../yoyoketang/ driver = webdriver.Chrome() driver.get("https://www.cnblogs.com/yoyoketang/") # 定位博客首页...(blog) 运行后结果返回 None,之前一直没找到解决办法，最近翻文档发现需在 JavaScript 脚本前面加 return 即可解决 return 返回值 在 JavaScript 脚本前面加

1.8K10

什么是AJAX？

这意味着可以在不重新加载整个网页的情况下，对网页的某部分进行更新。 传统的网页（不使用 AJAX）如果需要更新内容，必需重载整个网页面。...document.getElementById("myDiv").innerHTML=xmlhttp.responseText; } } //如需将请求发送到服务器，我们使用 XMLHttpRequest...，对话框又是链接的另外的html页面，如此通过$(“#formid”)的方式是找不到对话框中的form的，因此这种情况下只能使用这种方式提交表单。...相比于复杂的$.ajax而言，GET请求功能则显得更加简单，请求成功时可调用回调函数。当然如果需要在出错时执行函数，那么还请使用$.ajax。...POST请求功能也相对比较简单，请求成功时可调用回调函数。如果需要在出错时执行函数，那么请使用 $.ajax请求。

1.7K20

从0到1开发Chrome插件

document_end" }], "permissions": [ "tabs" ] } 如上，manifest.json 中的 content_scripts 意为：当请求路径匹配到百度和哔哩哔哩时加载...my.js，具体操作在 my.js 中定义。...jquery 暂时预留，你可以将 js 和 css 等文件放在根目录，也可以将其放置到自定义文件中，区别只是使用时路径不一样。 其他的文件前面已经解释，不再介绍了。...因为在哔哩哔哩网站中未找到 ID 为“su”的元素，所以执行变红变大动作中断。 访问百度首页 启用插件前 百度首页的搜索按钮“百度一下”为白色，大小合适。...启用插件后 百度首页的搜索按钮“百度一下“为红色，大小较大。 至此，我们的 Chrome 插件从 0 到 1 就成功结束了。

1.5K30
点击加载更多

扫码

添加站长 进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

更多标签

活动推荐

    运营活动

    活动名称
    广告关闭

    腾讯云开发者

    扫码关注腾讯云开发者

    扫码关注腾讯云开发者

    领取腾讯云代金券

    热门产品

    热门推荐

    更多推荐

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

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

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

    领券