Chrome 浏览器扩展神器油猴 ，安装油猴（公众号内回复 油猴 获取）可以参考之前的文章上不了谷歌如何安装 Chrome 扩展？...安装油猴扩展后打开脚本地址 https://greasyfork.org/zh-CN/scripts/373563-bilibili-evolved ，直接安装就好。 ?...再次打开b站，页面左侧多出了个工具栏，av和BV号都直接显示出来了。 ? 选择顶栏布局，点击右侧的图标可以显示/隐藏它们。 ? 选择隐藏的元素，刷新后页面上方都空白了。 ?...这就需要暴力猴扩展了，关于暴力猴之前写过文章介绍Chrome 浏览器扩展神器暴力猴 暴力猴 这也是个Chrome扩展 https://chrome.google.com/webstore/detail/...hl=zh-CN ，一款非常强大的浏览器脚本管理工具，安装后打开b站点击扩展里的 为此站点查找脚本。 ?
scripts -- 内容脚本 Content scripts 脚本是指能够在浏览器已经加载的页面内部运行的 javascript 脚本。...以我上面的 URLHelper 为例子，在这个扩展中，当我点击扩展程序界面中的刷新页面按钮的时候，会从扩展界面的 DOM 上将修改后参数取出拼好，并且通过 Chrome 的消息传递机制 传递给 Content...scripts，然 后 Content scripts 拿到新的参数，赋值给当前浏览器窗口页面的 document.location.href，实现页面的刷新。...事件页面只在需要时加载，当事件页面不活动时就会卸载，以便释放内存和其他系统资源，所以一般而言是推荐使用事件页面。 它存在的目的在于，在扩展的整个生命周期内需要长时间管理一些任务或状态。...runtime.getBackgroundPage 以我上面的 URLHelper 为例子，在这个扩展中，我使用的是持续运行的后台网页，当浏览器页面刷新第一次注入 Content Script 时，会获取到当前页面
开发Chrome插件首先就是配置manifest.json文件了，利用它我们可以定义在什么时机以及在什么网页执行什么脚本，有一些什么行为，下面我一起来看看这个文件有哪些配置项以及有什么作用： {...URL "app": {}, // 指定扩展进程的background运行环境及运行脚本 "background": { "scripts": [..."chrome_url_overrides": { "pageToOverride": "html/overrides.html" }, // 指定在web页面运行的脚本...用于在扩展管理页面跳转到选项设置 "options_page": "aFile.html", // 申请权限 "permissions": [ "https://...点击图标时弹出的页面，以及插件的标题，建议始终保留一个，不设置这个属性图标会是灰色的，设置了后才会亮起来； 7. background 背景页，扩展进程的背景运行环境，可以拦截修改请求等等； 8. content_scripts
它还必须位于扩展程序的根目录中。清单记录重要的元数据，定义资源，声明权限，并标识哪些文件在后台和页面上运行 2 content scripts 内容脚本在网页上下文中执行 Javascript。...它可以使用所有的Chrome API，但不能直接与网页内容交互；这就是内容脚本的工作 4 popup/page 扩展可以包含各种 HTML 文件，例如弹出窗口、选项页面和其他 HTML 页面。...扩展程序（chrome://extensions/） 打开开发者模式 加载已解压的扩展程序（包含清单文件的文件夹） PS：插件开发过程中会多次修改，在修改后需要在浏览器的扩展程序中重新刷新后生效 实现专注阅读模式..."suggested_key": { "default": "Ctrl+B", "mac": "Command+B" } } } } 在扩展程序中刷新插件并测试.../popups/popup.html" } } 后编写（编写页面、编写样式、编写脚本） 编写页面 <!
Github： https://github.com/antfu-collective/vitesse-webext 特性： ⚡️ Instant HMR - 在 dev 上使用 Vite（不再刷新！...TypeScript - 类型安全 组件自动导入 图标 - 直接从任何图标集中访问图标 内容脚本 - 即使在内容脚本中也可以使用 Vue WebExtension - Chrome、Firefox...components - 自动导入的 Vue 组件，在弹出窗口和选项页面中共享。...styles - 在 popup 和 options 页面中共享的样式 assets - Vue 组件中使用的资源 manifest.ts - 扩展的清单。 extension - 扩展包根目录。...scripts - 开发和捆绑帮助程序脚本。 开发 pnpm dev 然后在浏览器中加载带有 extension/ 文件夹的扩展。
1、添加一个隐形的文本框 <input type="text" style="display:none"/> 2、form表单设置 添加 onsubmit=...
用vuex来做全局的状态管理， 发现当刷新网页后，保存在vuex实例store里的数据会丢失 产生原因 其实很简单，因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载vue实例，store...而第二种可以保证刷新页面数据不丢失且易于读取。...vue是单页面应用，操作都是在一个页面跳转路由；sessionStorage可保证打开页面时sessionStorage的数据为空，而如果是localStorage则会读取上一次打开页面的数据。...因为我们是只有在刷新页面时才会丢失state里的数据，想法在点击页面刷新时先将state数据保存到sessionStorage,然后才真正刷新页面 beforeunload这个事件在页面刷新时先触发的。...$store.state,JSON.parse(sessionStorage.getItem("store")))) } //在页面刷新时将vuex里的信息保存到sessionStorage
扩展页图标 (16 * 16) 最好是 png 格式 6. browser_action 可以用来定义点击图标后展示的窗口，对应接口 chrome.browserAction，这项配置与 page_action...猜测 browser_action 适用于用户需要点击图标后在弹窗中操作的场景 page_action 试用与在后台运行，重要工作是监听用户行为的插件 官方建议：如果要实现的功能只针对某一个页面有用则建议使用...page_action 否则使用 browser_action 8. background 用来定义后台脚本部分 扩展是基于事件的程序，这些事件包括导航到新页面、删除书签、或者关闭选项卡，...扩展在他们的后台脚本中监视这些事件，然后用指定的指令进行响应 关于后台脚本的状态 首次下载后或者更新后被加载 后台脚本下载后会处于休眠状态，直到它侦听的某个事件被触发， 侦听到事件后，会使用指定的指令响应...注入之后，其他任何脚本或者 DOM 之前注入；document.end DOM 完成之后立即注入，但是在图像等资源之前 编程方式注入，不需要指定可访问的域名，可以针对当前活动的选项卡运行，获取临时访问权限
由于弹出页面只在被打开时存在，因此需要与持久运行的后台脚本通信来保持状态和执行操作。 应用示例: 用户在弹出页面中点击按钮后，向后台脚本发送消息，后台脚本接收后执行相应的操作，如保存数据或触发通知。...应用示例: 用户在选项页面修改扩展的配置后，通过消息通知后台脚本，后台脚本更新配置并将新设置应用到所有活动的内容脚本中。选项页面在加载时请求后台脚本提供当前设置数据，以便用户查看和修改。 5....应用示例: 扩展在某个部分（如弹出页面）执行某个操作后，通过广播消息通知扩展的所有其他部分（如内容脚本、后台脚本），确保整个扩展的一致性。...这些场景展示了message 通信机制在Chrome扩展开发中的广泛应用，它使得扩展能够有效地管理和协调其不同部分，确保功能的顺畅运行和用户体验的一致性。...后台脚本接收到消息后可以执行相应的操作，如记录日志或更新扩展的状态。 弹出页面通知后台脚本执行操作: 用户在弹出页面中进行的操作（如点击某个按钮）可能需要触发后台脚本执行某些任务。
首先，我们在 VSCode 中安装一个 Debugger for Chrome 扩展。...Egret 官方提供了一个 Chrome 扩展，安装完成后，我们能通过 Chrome DevTools Egret 面板查看到具体的元素层级和布局信息。...在使用时，需要注意两个问题： Egret 虚拟画布节点通常不会自动刷新，需要手动点击“选中点击对象”后的刷新按钮来强制刷新； 控制台偶尔会报错 Uncaught TypeError: this.addChild...Egret Live Reload 配置 在进行 Web 项目开发时，很多时候我们需要一边编写代码，一边刷新预览页面的呈现效果，H5 游戏开发也不例外。...此时，Whistle Live Reload 进程正在实时监听 bin-debug 目录的变化，在收到变化通知后，通过 WebSocket 通知浏览器页面进行自动刷新，从而实现我们所需的开发体验。
加载未封装的扩展程序 要在开发者模式下加载已解压的扩展程序，请执行以下操作： 在新标签页中输入 chrome://extensions，转到“扩展程序”页面。..., ... } 保存文件后，若要在浏览器中查看此更改，您还必须刷新扩展程序。...Worker 是 内容脚本 是（以及托管网页） 弹出式窗口 否 选项页面 否 其他扩展程序 HTML 网页 否 查找控制台日志和错误 控制台日志 在开发过程中，您可以通过访问浏览器控制台日志来调试代码...在本示例中，我们 可找到该弹出式窗口的日志。首先，在 hello.html 中添加脚本标记。...点击错误按钮，详细了解具体错误： 如需详细了解如何调试 Service Worker、选项页面和内容脚本，请参阅调试 扩展程序。
如何运行一个浏览器脚本 安装用户脚本管理器 首先需要安装一个脚本管理器插件，Tampermonkey支持Chrome、Firefox、Safari、Microsoft Edge等主流浏览器，可以在https...[add penguin user script] 运行用户脚本 安装之后打开或刷新http://www.qq.com 页面就能看到页面已经改变！...，刷新搜索结果页面，可以看到右侧边栏已经隐藏掉了。...这是因为用户脚本默认是在页面完成加载后开始执行的，但是在搜索结果页面再次搜索时，百度是通过ajax请求的方式来获取结果的，而在结果返回后，head标签内的所有style标签会被重置掉。...我们可以在脚本中增加对ajax请求的监控，在监测到有搜索的ajax请求后，再次把样式代码增加到head标签内即可。
油猴脚本（Tampermonkey）是一个流行的浏览器扩展，可以运行用户编写的扩展脚本，来实现各式各样的功能，比如去广告、修改样式、下载视频等。 如何写一个油猴脚本? 1....，过滤后只剩3个，瞬间就找到你要调试页面，再也不用从几百个页面中寻找你自己的那个啦！...改写vue.config.js manifest.json对文件引用的结构基本决定了打包后的文件路径 打包后的路径 // dist目录用来chrome扩展导入 ├── dist │ ├── favicon.ico...热刷新 我们希望修改插件源代码进行打包之后，chrome插件对应的页面能主动更新。为什么叫热刷新而不是热更新呢？因为它其实是全局刷新页面，并不会保存状态。...参考 【干货】Chrome插件(扩展)开发全攻略 油猴脚本编写教程
-- 内容脚本 Content scripts 脚本是指能够在浏览器已经加载的页面内部运行的 javascript 脚本。...以我上面的 URLHelper 为例子，在这个扩展中，当我点击扩展程序界面中的刷新页面按钮的时候，会从扩展界面的 DOM 上将修改后参数取出拼好，并且通过 Chrome 的消息传递机制 传递给 Content...（刚开始使用的时候可以理解为一个东西） 应用和扩展程序通常需要长时间运行的脚本来管理某些任务或状态，这就是后台页面的作用。...事件页面只在需要时加载，当事件页面不活动时就会卸载，以便释放内存和其他系统资源，所以一般而言是推荐使用事件页面。 它存在的目的在于，在扩展的整个生命周期内需要长时间管理一些任务或状态。...以我上面的 URLHelper 为例子，在这个扩展中，我使用的是持续运行的后台网页，当浏览器页面刷新第一次注入 Content Script 时，会获取到当前页面 url ，然后发送消息并带上 url
异步处理未正确处理： 在处理消息的函数中进行了异步操作，但未正确返回 Promise 或未在适当的时机发送响应。 连接被意外关闭： 消息通道在响应之前被关闭，例如页面刷新或扩展被卸载。...检查消息通道的稳定性 确保在发送消息和接收响应的过程中，消息通道不会被意外关闭。例如，避免在发送消息后立即卸载扩展或刷新页面。 5....步骤： 打开扩展的后台页： 进入 chrome://extensions/ 页面，找到对应的扩展，点击“背景页”旁的“检查视图”按钮。...始终处理可能的错误： 在发送消息后，检查 chrome.runtime.lastError，以捕获可能的错误。...良好的消息传递机制不仅能提升扩展的稳定性和用户体验，也有助于开发者在复杂的扩展开发过程中保持代码的清晰和可维护性。 希望本文能为您在Chrome扩展开发过程中提供有价值的帮助。
在 Elements 面板中，我们可以： 查看 HTML 结构：左侧展示的是页面的 HTML 结构，可以直接在这里修改任何标签或属性，查看页面更新后的即时效果。...2.3 刷新页面 在调试时，有时需要频繁刷新页面查看效果，可以使用以下方式进行刷新： 普通刷新：按下 F5 键，这会重新加载页面缓存，并非强制刷新。...强制刷新：按下 Ctrl + F5，强制刷新会忽略缓存，重新加载所有资源，适用于样式和脚本更新后没有即时生效的情况。 3....过滤资源类型：可以通过上方的过滤按钮，只查看特定类型的资源，例如仅查看图片、脚本或文档。 7....设置断点：可以点击代码行号设置断点，页面运行到这里时会自动暂停，方便我们逐行调试代码。 逐行调试：在暂停的位置，可以使用顶部的调试控制按钮逐行执行代码、跳过函数调用等。 8.
从官方的介绍我们可以知道，Background Pages的作用就是在浏览器运行时，会长时间执行的脚本。只要浏览器处于打开状态，在Background Pages中的脚本就会在后台执行。...从上面官方的介绍我们可以知道，Content Script其实就是我们需要写的将会在我们希望的目标页面中执行的脚本文件。每次目标页面刷新时，这部分脚本也会重新加载执行。...（长时间执行脚本监听用户操作） 能够在特定页面中将保存的表情发送出去（在目标页面中使用脚本与页面进行交互） 能够在插件中管理已有表情（插件管理相关功能） 因此，需要完成上述功能，我们就需要用到上面我们提到的功能模块...background Background Pages文件 permissions 扩展应用所需权限 权限列表见此处。申请权限后，可以使用chrome对象来进行访问该权限提供的API接口。...管理已有表情（Options） 通过Options，我们能够给chrome扩展应用开发一个“设置”页面。当我们指定options_page字段后，它的值就是我们的“设置”页面。
app的加载页面 书写加载页面的内容 使用chrome的扩展程序加载程序代码manifest.json chrome的app的配置文件有固定的形式，简单配置如下{ "manifest_version...app的加载页面 由于入口是一个js文件，而实际我们是需要创建一个界面来展示数据和做一些交互，所以这里会借助chrome的一个api来实现这个功能，在应用启动的时候，我们来创建一个页面出来 chrome.app.runtime.onLaunched.addListener...的扩展插件出于安全考虑，是不能写内联的脚本的，内联样式是可以的 引用第三方的cdn服务器上得脚本也是不允许的 使用chrome的扩展程序加载程序代码 打开chrome-工具（右上角条纹按钮）-更多工具...点击加载已解压扩展程序，指定到上面我们项目的根目录，加载成功后即可启动程序。...web页面的调试，所以在浏览器端可以做很多调试了，而只有少部分问题需要在模拟机或者真机上调试。
然后，Microsoft Edge（以下简称Edge）在升级到新版以后活脱脱就是个Chrome的翻版，因为用的就是谷歌的内核，Edge也有自己的插件市场，所以，在导入了Chrome的配置之后，我得以完美的从...安装完成后，如果你之前用的是Chrome，那你可以直接导入Chrome的使用数据。点击Edge浏览器右上角的 。。。...而且和BBS论坛的刷新有冲突，安装了Dark Mode以后，在BBS论坛评论了不会自动刷新，严重影响体验。...多线程下载工具可以参考这篇教程:基于NDM和TamperMonkey脚本实现高速下载 百度文库下载 这个脚本在百度文库页面左上角加了一个下载按钮，点击后会自动跳转到别人提供的接口页面，因为接口是需要开发者自己付费建设的...写在最后 在Atom安装和配置教程里就有提过，插件和脚本的探索是无止境的，只要还有富有想象力的开发者在就会有无数种脚本和插件，所以尽量朝着把浏览器配置的更加方便的方向走就好，可不要为了追求花里胡哨而安装一大堆无用的装饰品来拖慢运行速度
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
ICP备案
即时通信 IM
云直播
实时音视频
