Extension API 360浏览器的插件文档 中文, 虽然内核差不多但是不一定与 Chrome api 一致, 可以作为参考 Chrome 官方案例库 案例 如何实现网页和Chrome插件之间的通信...matches: ["http://"] 指定匹配的网址， js 设置注入脚本 css 设置注入样式 run_at 定义注入要本的时机 document_idle 表示浏览器帮你把握时机，会在 DOM...extension~'}); } }); 13. offline_enabled 扩展是否需要离线工作，默认为 true, 当chrome 检测到离线时，程序会被高亮显示 14. permissions...[permissionName] API,全部的权限字符串可以点击上边链接查看，一下列出常用的权限 activeTab 允许用户在调用扩展时临时访问当前活动的选项卡， background 后台权限...(例如，) 只有扩展包内的脚本和资源才会被加载！
": "__MSG_Plugin_Desc__", //默认语言(如果当前浏览器设置的语言不存在多语言配置文件，则默认中文)，Chrome插件的多语言只能根据当前浏览器设置的语言来设定，无法通过代码更改语言...“背景页”也将变成“Service Worker”，改动之后background.js将和浏览器完全分离，即无法调用window和ducoment对象 //可以看介绍： //1、//developer.chrome.com...": "document_end" } ], //API权限，需要使用某些API时需要设置该API权限才行 "permissions": [ "contextMenus...“Service Worker”将显示无效， //且无法点开“Service Worker”的开发者工具控制台以及点击插件图标时触发的这个方法会报错：chrome.action.onClicked.addListener...方法如下 首先，需要增加配置 externally_connectable:{matches:[“https://*.xxx.com/”]}指定允许哪些网站可以给当前插件发送消息，相当于白名单，只有在白名单中的站点发送的消息
background的权限非常高， 几乎可以调用所有的Chrome扩展API（除了devtools）， 而且它可以无限制跨域，也就是可以跨域访问任何网站而无需要求对方设置CORS event-pages...比如第一次安装、插件更新、有content-script向它发送消息，等等 popup opup是点击browseraction或者pageaction图标时打开的一个小窗口网页，焦点离开网页就立即关闭...但是这种方法极度低效， 直接chrome://extensions/找到你插件的ID ?...然后找到extension目录 打包 当您为扩展程序打包时，扩展程序将获得唯一的密钥对，扩展程序的标识符基于公钥的散列，私有密钥用来为每一个版本的扩展程序签名，必须严格保护，不能由公众访问。..."keyword": "aString" }, // 其他需要的 permission, // 在使用 chrome.permissions API 时用到, 并非安装插件时需要 "optional_permissions
Chrome插件：由manifest.json和script.js组成。 manifest.json 填入一些基本数据。 background中scripts传入需执行的js文件。...externally_connectable用来声明哪些应用和网页可以通过runtime.connect和runtime.sendMessage连接到插件。...": { "matches": ["*://localhost:*/*"] } } script.js // script.js chrome.runtime.onMessageExternal.addListener...RTCDataChannel提供了send方法和message事件。使用起来与WebSocket类似。...但是开发中发现切换时设置码率无效。SDK那边给的答复是：因为缓存问题，会以第一次推流设置的参数为准，将会在下个版本中修复。
当你打开chrome的“扩展程序”界面，看着琳琅满目的插件，有没有想过亲自动手，打造一个自己的插件呢？当然，这种想法不应该是闲着某个部位疼，刻意的去开发一个连自己都不会实际使用的插件。...看完之后对chrome插件的基本配置和文件结构会有一个大致的认识，同时也学会了如何在chrome上加载自己在本地开发的插件。...所以当插件逻辑并不复杂时，通常就将配置文件和插件代码直接放在同一层目录下。插件配置文件中，配置了该插件扩展的描述信息、扩展的功能，以及插件的访问权限。...那么有没有一种好的方法，可以保存这些数据，并且在同一个google账号上共享呢？还真有：chrome.storage。官方文档中详细介绍了其用法，以及如何在同账号不同浏览器上自动同步数据。...基于chrome.storage，本插件的各种扩展点的数据流操作图如下： ? 上图中，content_script和background的脚本运行环境不一样，通过message来进行通讯。
过去一年，开发了两款插件并上架谷歌商店，在最初技术调研时原本想使用plasma，考虑插件包的体积与其他未知原因，最终我还是选择了webpack5搭建了一个基础的chrome插件，具体可参考之前写的一篇文章...会生成一个build文件夹，我们只需要打开chrome插件的开发者模式，添加这个build 此时我们加载完插件后，popup.html插件就是这样的 我们修改popup.tsx的任何一行代码时，此时会热更新到插件...公众号：Web技术学苑 ) } export default IndexPopup 在初始化后的文件夹，我们可以使用src来组织我们的插件，具体可以参考src,从扩展页面中可以发现...，为什么会改变我们浏览网页的内容呢，真正影响的当前页面布局的是contents 如何在网站插入内容？...我们知道插件的content.js是可以获取到当前网页的浏览器内容的，也就是说可以操作当前网页的dom，你可以理解成加载当前网页后，chrome插件给开发者开了一个黑盒，开发者只要用户安装了这个插件，我就可以改变当前页面的
当然，如果你想深入研究浏览器插件的开发，可以参考 Google Chrome 扩展文档和 Firefox Browser 扩展文档。...到此我们浏览器插件就编写完成了，接下来介绍如何在 Google Chrome 和 Firefox Browser 中使用。...在浏览器地址栏输入 about:addons 或者依次点击右上角【打开应用程序菜单】—>【扩展和主题】，也可以直接使用快捷键 Ctrl + Shift + A 来到扩展页面，在管理您的扩展目录旁有个设置按钮...TamperMonkey 可以直接在各大浏览器扩展商店里面安装，也可以去 TamperMonkey 官网进行安装，安装过程这里不再赘述。...一般将其设置为 document-start 重新来到航班查询页面，启用 TamperMonkey 脚本，如果配置正确的话，就可以看到我们编写的 Hook 脚本已开启，随便输入出发地和目的地，点击查找航班
在日常浏览网页时，我们有时会遇到一些不太满意的网站界面交互设计。然而，作为普通用户，我们并没有网站的源码，如何在这种情况下进行界面改造呢？...以Chrome浏览器为例，可以按照以下步骤操作： 打开Chrome浏览器，进入Chrome Web Store。 搜索“Tampermonkey”，点击“添加至Chrome”按钮进行安装。...安装完成后，浏览器右上角会出现一个油猴的图标。 编写和安装用户脚本 安装好油猴插件后，我们可以开始编写用户脚本。...浏览器插件（也称扩展或插件）是用来扩展浏览器功能的小程序。与油猴脚本类似，浏览器插件也可以修改网页的内容和行为，但其功能更强大，可以实现更加复杂的操作。...打开Chrome浏览器，进入“扩展程序”页面（chrome://extensions/）。 打开“开发者模式”，点击“加载已解压的扩展程序”，选择刚才创建的文件夹。
说明 Chrome插件又称为谷歌浏览器插件,是谷歌Chrome浏览器的扩展插件,使用Chrome插件可以为Chrome浏览器带来一些功能性的扩展,进而提高Chrome的使用体验。...之后，都是2 version ：插件的版本号 description：插件描述 browser_action：设置扩展信息栏的图标、图标悬浮提示、点击图标时弹出窗口，我这里设置了设置的是默认图标...（default_icon）和默认标题（default_title） icons：插件图标，需准备16*16（扩展信息栏）、48*48（扩展管理页面）、128*128（用在安装过程中）像素的三个图标文件...content_scripts 中的 matches 属性定义了哪些页面会被注入脚本。...安装之后我们就能在扩展程序中看见，我们做的插件了。 ? 然后当我们进入CSDN 网站， class 为 tracking-ad 的元素 就会隐藏起来了。
Chrome拓展是扩展浏览器功能的小程序，用户可以通过Chrome Web Store下载和安装。这些拓展能够增强浏览器的性能和用户体验，例如广告拦截、实时翻译、任务管理、笔记记录等。...后台脚本在浏览器启动时运行，管理扩展的生命周期和处理事件。 浏览器动作： action：定义扩展图标的默认行为，如点击图标时弹出的页面（popup），可以设置默认弹出页面和图标。...常用功能 popup 页面 在 Chrome 扩展中，popup 页面是指当用户点击扩展图标时弹出的界面。这个界面通常用于提供用户交互或展示信息。...; }); }); background background.js 文件是 Chrome 扩展的后台脚本，用于处理长期运行的任务、事件和状态管理。它在浏览器的后台运行，并且在浏览器启动时加载。...处理安装事件 在扩展安装或更新时执行一些初始化操作： chrome.runtime.onInstalled.addListener((details) => { if (details.reason
谷歌浏览器插件开发是指开发可以在谷歌浏览器中运行的扩展程序，可以为用户提供额外的功能和定制化的体验。谷歌浏览器插件通常由HTML、CSS和JavaScript组成，非常利于前端开发者。...version：本插件的版本，和发布相关 action：点击图标时，设置一些交互 16、32、48、128 default_icon：展示图标 default_popup：popup.html，一个弹窗页面...document_end：dom加载完成之后 exclude_matches：排除匹配到的url地址。作用和matches相反。...页面之间进行数据通信 如需将单条消息发送到扩展程序的其他部分并选择性地接收响应，请调用 runtime.sendMessage()[7] 或 tabs.sendMessage()[8]。...通过这些方法，您可以从内容脚本向扩展程序发送一次性 JSON 可序列化消息，或者从扩展程序向内容脚本发送。如需处理响应，请使用返回的 promise。
大部分网站都会对关键参数进行加密，JS 逆向时，我们首要任务是定位参数具体的加密逻辑 常见方式包含：关键字搜索、堆栈调试、XHR 及事件监听、AST 内存漫游、JS Hook 注入等 本篇文章以 JS...Hook 注入定位 Cookie 中某个加密参数为例进行讲解 Cookie 监听 编写一个 Chrome 插件（ V3 版本）监听浏览器 Cookie 值的变动，当 Cookie 的 Name 匹配时执行...((request) => { if (request.action === "debugger") { debugger; } }); 将编写好的 Chrome 插件安装到浏览器上，...cookie_name"; //Hook Cookie Set //注意：这种方法可能与某些网站的JavaScript代码不兼容，因为它依赖于废弃的__defineSetter__方法 function...浏览器中安装扩展后，打开浏览器开发者工具和目前网站，一旦目标 Cookie 被设定一个值后，会自动进入断点模式 在调试模式下，我们就可以在 Source 面板利用 Call Stack 调用栈一步步查询到加密参数生成的具体逻辑
创建一个 Chrome 插件是一个有趣的项目，特别是当结合使用强大的工具如 React、TypeScript、TailwindCSS 和 Vite 时 在这篇文章中，我们将逐步引导完成整个过程，了解如何在...通过本文将拥有一个功能齐全的扩展，并具备扩展它的知识。 设置开发环境 安装 Node.js 和 npm 首先，从官方网站下载并安装 Node.js。这也会安装 npm，你将使用它来管理项目依赖项。...弹出 UI：点击扩展图标时出现的界面。 将 React 与 Vite 集成 在 Vite 中设置 React 创建 Vite 项目后，导航到项目目录并运行 npm install。...要测试你的扩展，打开 Chrome 并导航到 chrome://extensions。启用 开发者模式 并点击 加载已解压的扩展程序。选择项目的 dist 文件夹。...结论 使用 React、TypeScript、TailwindCSS 和 Vite 创建一个 Chrome 插件是提升开发技能的好方法，并通过尝试新功能和技术不断学习。
如何实现一个谷歌浏览器插件 一、什么是Chrome插件？ ★Chrome插件就是我们运行在Chrome浏览器 上的扩展程序，比如说vue-devtool。...准确的说，其实更应该叫做Chrome扩展，因为插件是更偏向于底层的技术。Chrome插件本质上来说，就是利用WEB开发技术，包括HTML、CSS和JS等开发出来的web页面，用来增强浏览器的功能。..."48": "img/icon.png", // 显示在扩展程序管理页面上 "128": "img/icon.png" // 在安装和Chrome Webstore...chrome.runtime.onInstalled.addListener(function() { // 在页面跳转时，移除旧的规则加入新的规则 chrome.declarativeContent.onPageChanged.removeRules..., sender, sendResponse) {…} ) 二、popup和background之间 可以直接获取background实例，然后直接里面定义的方法 var bg = chrome.extension.getBackgroundPage
一、安装过程 1.打开chrome的‘更多工具’--‘扩展程序’中安装（Chrome浏览器安装过程请自行百度下载安装） 图1 2.搜索Postman找下面的应用安装（不能上Google...的童鞋请自行访问外国网站，你懂得···） 图2 3.安装好之后在扩展程序里面可以看到,点击详细信息,创建快捷方式 图3 4.快捷图标如下 图4 二、postman...完成验证代码的编写 >点击Send按钮，重新发送请求，并执行测试：Tests(1/2) 验证接口参数 四、发送POST请求 1.POST表单提交示例： 表单提交示例 上图示例中设置了请求方法.... 3.XML提交示例： XML提交示例 上图中，当我们选择了XML(text/xml)时，postman同样帮我们自动设置了Content-Type，可以自行的去查看Headers....4.自行设置Content-Type: >HTTP的POST请求的参数，都是放在请求正文中的，只是根据Content-Type来判断请求正文的格式，那么我们同样可以在表单提交时，选择raw，然后自行设置
我之前接触过一个Chrome的插件叫 TamperMonkey，这个工具允许用户自己创建js脚本并挂载到目标网页上，以实现修改网页样式、行为的目的。...安装TamperMonkey TamperMonkey为主流浏览器（Chrome, Microsoft Edge, Safari, Opera Next, 和 Firefox）都提供了插件，...我们先给浏览器安装TamperMonkey插件，我用的Chrome，但是由于Google被墙（可恶的*），我们不能通过Google Web Store安装，所以只能从第三方下载并手动安装。...新增脚本后，我们还需要对脚本的使用场景做一些设置。...首先我们需要设置脚本运行的时间点，我们希望在google的jquery script刚被添加到DOM中时就替换它，但是在查阅了大量的资料后我发现这个做不到（如果有人知道怎么做，欢迎留言），所以我们只能选择在尽量早的时间点去执行脚本
chrome插件，所以首先恶补了一上午，再者我们还需要知道从哪里根据歌曲名和歌手名获取歌词，感谢po主给我们推荐了http://geci.me/api/lyric/，这个好用的接口，我们可以在url后加上...我们这次是开发基于page_action的chrome插件，不知道的同学，可以上chrome插件开发文档看看。 以下是本项目的文件结构： ?...= '900px';//下面几行是设置css lyrics_div.style.backgroundColor = '#F00'; lyrics_div.style.zIndex =...代码和打包后的插件下载地址：http://download.csdn.net/detail/xanxus46/7127063 插件安装： 首先打开扩展程序页面： ?...然后把下载压缩包里的douban lyric.crx拖到扩展程序的页面里安装，然后打开豆瓣就能看到效果了。
从官方的介绍我们可以了解，Options部分就是我们对于扩展的管理功能。我们能够通过一个模块来对chrome扩展应用的设置和数据进行处理。...配置文件（Manifest File） 首先，在进行具体的功能开发时，我们需要来看下我们的项目配置文件。这个配置文件在整个chrome扩展应用中非常重要，包含了项目的属性、配置、权限和资源信息。...我所开发的扩展应用主要是使用到了右键菜单和存储权限 content_scripts Content Script文件 matches字段表示Content Script文件生效的域名 options_page...接下来让我们来看下我们的“设置”页面应该怎么开发。 管理已有表情（Options） 通过Options，我们能够给chrome扩展应用开发一个“设置”页面。...总结 我们通过一个简单的表情插件的例子来快速的介绍了chrome扩展应用的各个模块的功能和开发方法。通过这篇文章大家应该知道了chrome扩展应用各个模块的作用和开发的方法。
因此就有本文，记录了在测试时的所遇到的坑。...基于比较基因组方法代表性研究是Jones-Rhoades和Bartel (2004)利用拟南芥和水稻全基因组鉴定在两个物种中保守的miRNA序列。...基于大规模测序数据的发掘方法 今天的推送介绍一下比较基因组中所开发使用了 MirCheck 程序如何在本地运行的吧。 README 以下操作步骤均在 win10 64位系统下测试demo数据通过。...第一个问题需要将 touch 改为 echo test>，这是windows下的使用方法。 第二个问题竟然是默认我安装了 patscan，你咋不在 REQUIREMENTS 说呢！ ?...然后默默地再安装： patscan下载地址 http://www.theseed.org/servers/downloads/scan_for_matches.tgz 安装也会遇到问题... ?
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
腾讯会议
云直播
对象存储
