从油猴脚本管理器的角度审视Chrome扩展 在之前一段时间，我需要借助Chrome扩展来完成一个需求，当时还在使用油猴脚本与浏览器扩展之间调研了一波，而此时恰好我又有一些做的还可以的油猴脚本 TKScript...为了对抗随机的清理事件，出现了很多肮脏的手段，甚至有的为了保持持续后台，做两个扩展然后相互唤醒。...其本身的能力也是源自于浏览器拓展，而如何将浏览器扩展的这个能力暴露给Web页面就是脚本管理器需要考量的问题了。...API，这相当于是浏览器扩展级别的权限，例如直接获取用户磁盘中的文件内容，并且可以直接将内容跨域发送到恶意服务器，这样的话我们的脚本管理器就会成为一个安全隐患，再比如当前页面已经被XSS攻击了，攻击者便可以借助脚本管理器...，我们不能将这些变量暴露给网站本身，但是又需要将相关的变量传递给脚本，而脚本本身就是运行在用户页面上的，否则我们没有办法访问用户页面的window对象，所以接下来我们就来讨论如何保证我们的高级方法安全地传递到用户脚本的问题
之前分享过很多Chrome扩展的文章，不过都是电脑端的，今天分享几个手机上能安装扩展和油猴脚本的浏览器。 上不了谷歌如何安装 Chrome 扩展？...那些有趣/实用的 Chrome 扩展神器 那些有趣/实用的 Chrome 扩展神器系列（二） 那些有趣/实用的 Chrome 扩展神器系列（三） 微软 edge 浏览器如何安装扩展 实用油猴脚本推荐，让你的谷歌浏览器更强大...Iceraven浏览器 这是基于火狐内核开发的浏览器 https://github.com/fork-maintainers/iceraven-browser ，如果下载不了在公众号后台回复 浏览器 ，...它同样支持安装扩展程序和油猴脚本，也支持火狐账号登录 。...附加组件里直接安装油猴扩展。 ? 打开https://greasyfork.org/zh-CN/scripts/406336 直接安装脚本。 ?
当我们需要将一些 Bash 变量值转换为例如大写时，我们经常使用一些管道，如下所示： foo="foo" foo=$(echo ${foo} | tr a-z A-Z) 或使用 AWK： foo=$...让我们从定义变量及其值开始： foo="foo" 现在让我们将第一个字母 ( f) 设为大写 - F： foo=${foo^} echo $foo Foo 凉爽的！...快乐的脚本！
今天将谷歌浏览器升级到了最新的版本，在安装拓展应用的时候，却发现无法添加应用、拓展程序和用户脚本，让我很是郁闷，现整理解决方法如下： 1.在Google Chrome浏览器的桌面快捷方式上鼠标右键...进入谷歌浏览器的 “拓展程序” 页面（即在谷歌浏览器地址栏输入：chrome://extensions/） 4....右上角有个开发者模式，点击启用就可以添加应用、拓展程序和用户脚本了 谷歌拓展 谷歌浏览器常用的几个插件 1.修改谷歌浏览器默认编码插件 Charset 链接：Charset_v0.4.1...新标签页插件 Infinity New Tab 链接：infinity-pro.crx_免费高速下载|百度网盘-分享无限制 版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。...如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
背景脚本用于处理插件的后台逻辑，而内容脚本则用于在网页中执行JavaScript代码。 谷歌浏览器插件可以实现各种功能，例如添加新的工具栏按钮、修改网页内容、捕获用户输入、与后台服务器进行通信等。...的service_workerAPI可以打开一个独立后台运行脚本。...此脚本会随着插件安装，初始化执行一次，然后一直在后台运行。可以用来存储浏览器的全局状态数据。background脚本是长时间运行在后台，随着浏览器打开就运行，直到浏览器关闭而结束运行。...页面之间进行数据通信 如需将单条消息发送到扩展程序的其他部分并选择性地接收响应，请调用 runtime.sendMessage()[7] 或 tabs.sendMessage()[8]。...通过这些方法，您可以从内容脚本向扩展程序发送一次性 JSON 可序列化消息，或者从扩展程序向内容脚本发送。如需处理响应，请使用返回的 promise。
消息传递 manifest.json 配置说明 manifest.json 用于描述 Chrome 插件的源数据，配置信息等，基本内容如下 { "name": "名称",...扩展是基于事件的程序，这些事件包括导航到新页面、删除书签、或者关闭选项卡，扩展在他们的后台脚本中监视这些事件，然后用指定的指令进行响应 关于后台脚本的状态 首次下载后或者更新后被加载...后台脚本下载后会处于休眠状态，直到它侦听的某个事件被触发， 侦听到事件后，会使用指定的指令响应（怎么相应自定义） 以下情况会需要调用到后台脚本 扩展首次下载或者版本更新 后台脚本中正在监听事件，并且这事件被触发了...content_script 或者其他扩展中调用了 sendMessage 当前扩展中的其他部分，例如弹窗中调用了 runtime.getBackgroundPage 后台脚本定义选项 {...，反之，页面中的js 也不能访问 content_script 中的变量和函数 访问目标网站的 DOM ，可以用来进行通信 分为两种情况，一种是声明型注入脚本，使用 content_scripts
概述 本文通过对chrome插件的各个部分进行快速的介绍，从而让大家了解插件各个部分的关系，并且知道如何将其进行组装成一个完整的chrome插件。...本文的主要内容如下： chrome扩展应用模块功能介绍 chrome扩展应用模块开发介绍 本文的内容不包括chrome扩展应用开发时提供的各个API功能详解，有需求的同学可以自行查看官方API文档。...从官方的介绍我们可以知道，Background Pages的作用就是在浏览器运行时，会长时间执行的脚本。只要浏览器处于打开状态，在Background Pages中的脚本就会在后台执行。...收集网页的图片（Background Pages） 需要收集各个网页的图片，我们需要一个后台常驻的脚本来满足我们的需求。因此，我们需要使用Background Pages。...根据前一节的manifest文件，我们指定了background.js文件作为我们的后台常驻脚本，下面让我们来看下这个文件的部分示例内容。
function() { vd.findVideoLinks(document.body); }; vd.init(); 抓取到所有这些链接后，它们将通过 vd.sendVideoLinks 函数发送到扩展程序的后台页面...以下是在扩展的后台页面中声明的消息侦听器： ?...videoLink 被发送到 vd.addVideoLinkToTab 函数，该函数如下： ? 该脚本检查链接数据是否具有 size 属性。...转到包含上面显示的核心易受攻击的函数 popup.js 脚本文件，我们看到以下内容： ? 单击扩展程序的浏览器图标(浏览器的右上键)时会触发上述代码。...tab 的 ID 取自元数据，get-video-links 调用将发送到后台页面，对应的代码只是调用 sendResponse(vd.getVideoLinksForTab(request.tabId
交互界面与组成模块 一个扩展的组成模块如下图所示，整个 Chrome 扩展主要包含六个模块：扩展图标、插件弹窗、选项页、单独页、注入页面脚本、后台脚本。...5）注入页面脚本 注入脚本在如上 manifest.json 文件中的 content_scripts 字段中配置，其内容会被直接注入到目标网页的页面内容中去。...6）后台脚本 后台脚本在如上 manifest.json 文件中的 background.service_worker 字段中配置。...从名字就可以看出来，这是一个运行在浏览器后台的脚本文件，其运行生命周期页面无关，浏览器打开多个 Tab 都只会共用同一个 background 脚本。...这段代码是位于“后台脚本”的一段代码，大概意思就是当扩展安装加载完成之后将 color 变量存储在本地 storage 中。
执行环境 chrome插件的执行环境主要有三种，一种是后台页，一种是popup页面，还有一种叫内容脚本( content script )。 这三种执行环境分别在三个不同的沙箱中执行。...内容脚本 前面所提到的两种执行环境并不能直接操作网页内容，而这个内容脚本其实就是一个解决这个问题的特殊的脚本环境。 内容脚本必须指定所支持的网页地址，并且在所有匹配的地址中载入这些脚本。...并且这些脚本可以直接访问页面里的dom。 不过值得注意的是这个content script并不能直接操纵网页里的脚本的变量，因为它们执行在不同的沙箱中。...调试 chrome的调试已经非常强大了，在扩展页面上打开开发者模式，可以载入正在开发中的插件的文件夹。 后台页的调试可以在扩张页面点击插件下面的地址打开调试面板。...content script可以在网页上打开网页的脚本调试面板，然后脚本列表那里有个tab是Content scripts 打包和自动更新 chrome浏览器自带了打包工具，在扩展页面上就有。
Web 可访问的资源仅限于指定的站点和扩展。 内容安全策略(CSP)允许为不同的执行上下文指定单独的 CSP，executeScript只能执行脚本文件和函数，不允许任意字符串。...", "web_accessible_resources": ["RESOURCE_PATHS"] } 4.3.2 内容脚本 Chrome 插件中的内容脚本通过配置将 JS 和 CSS 注入到指定的页面中...4.3.3 后台脚本 Chrome 扩展中的后台脚本具有最长的生命周期，并且在浏览器打开时连续运行。它拥有广泛的权限，允许访问大多数 Chrome 扩展 API 和跨源请求，而不受 CORS 限制。...内容脚本，在特定网页上下文中执行的脚本，利用 window.postMessage、 chrome.runtime.sendMessage 和 chrome.runtime.connect 进行脚本间通信...后台脚本，在后台独立运行的脚本，涉及多种方法，例如 chrome.tabs.sendMessage、 chrome.tabs.connect、 chrome.tension.getBackoundPage
后台任务：可以使用PsJob在本地和远程运行后台任务。 ScriptCmdlets：以前只能用静态编译型语言编写Cmdlet，如C#和VB。现在则可以直接使用PowerShell脚本编写。...数据区：数据区可以将脚本的数据与逻辑分隔开，除了易于管理外，还可以用来构建支持国际化的脚本。 脚本调试：可以在“行、列、函数、变量和注释”上设置断点。...Out-GridView：除了将数据显示在控制台中，你还可以选择将它们发送到一个弹出窗口，窗口中包含即时生成的表格，并支持排序和过滤。...与snap-in需要安装不同，你可以简单的将模块拷贝到用户级或系统级目录下，然后就可以在脚本中直接调用了。 事件：可以将WMI和CLR事件发送到事件队列中或直接绑定到一个动作上。...我们使用.net写了很多工具，在powershell到来之前，我们都是写成控制台程序来做这样的工作，现在有了强大的powershell脚本工具，如何将我们的丰富的工具快速转换成powershell脚本呢
chrome扩展程序将后台网页分为两种类型： 1.持续运行的后台网页 2.事件页面 是否持久存在是事件页面与后台网页之间的根本区别。...扩展程序小结 一个扩展程序最重要的我觉得就是上述的三块内容： 1.Content scripts -- 内容脚本 2.popup -- 弹窗页面 3.background -- 后台网页 我们通过一个...扩展程序的消息传递 消息传递存在的必要性是因为内容脚本在网页而不是扩展程序的环境中运行，所以它们通常需要某种方式与扩展程序的其余部分通信。...扩展程序（弹窗页面和后台页面）和内容脚本间的通信使用消息传递的方式。 两边均可以监听另一边发来的消息，并通过同样的通道回应。消息可以包含任何有效的 JSON 对象。..."来自内容脚本：" + sender.tab.url : "来自扩展程序"); if (request && !
Chrome 扩展程序的基础知识 Chrome扩展程序的核心部分是 manifest 文件 和后台脚本。manifest 文件采用JSON格式，提供有关扩展的重要信息，例如其版本、资源或所需的权限。...后台脚本允许扩展对特定的浏览器事件做出反应，例如创建新选项卡。 为了演示这些概念，让我们先写一个“Hello，World！” Chrome 扩展。...它应该与清单文件和后台脚本位于同一文件夹中： 1<!...这很好，因为这为我们的后台脚本提供了 Hot Module Reloading。 src文件夹包含我们将用于扩展的所有文件。...最后，请注 scripts 文件夹的两个脚本：一个用于删除 eval 用法以符合 Chrome Web Store 的内容安全策略，另一个用于当你要把扩展上传到Chrome Web Store时将其打包到
从零实现的浏览器Web脚本 在之前我们介绍了从零实现Chrome扩展，而实际上浏览器级别的扩展整体架构非常复杂，尽管当前有统一规范但不同浏览器的具体实现不尽相同，并且成为开发者并上架Chrome应用商店需要支付...描述 在前边的从零实现Chrome扩展中，我们使用了TS完成了整个扩展的实现，并且使用Rspack作为打包工具来构建应用，那么虽然我们实现轻量级脚本是完全可以直接使用JS实现的，但是毕竟随着脚本的能力扩展会变得越来越难以维护...，例如直接获取用户磁盘中的文件内容，并且可以直接将内容跨域发送到恶意服务器，这样的话我们的脚本管理器就会成为一个安全隐患，再比如当前页面已经被XSS攻击了，攻击者便可以借助脚本管理器GM.cookie.get...当然其本身的能力也是源自于浏览器拓展，而如何将浏览器扩展的这个能力暴露给Web页面就是需要考量的问题了。...://xxxxxx/DEBUG.user.js })(); }; 还记得我们最初的问题吗，即使我们完成了沙箱环境的构建，但是如何将这个对象传递给用户脚本，我们不能将这些变量暴露给网站本身，但是又需要将相关的变量传递给脚本
chrome扩展程序将后台网页分为两种类型： 持续运行的后台网页 事件页面 是否持久存在是事件页面与后台网页之间的根本区别。...扩展程序小结 一个扩展程序最重要的我觉得就是上述的三块内容： Content scripts -- 内容脚本 popup -- 弹窗页面 background -- 后台网页 ?...扩展程序的消息传递 消息传递存在的必要性是因为内容脚本在网页而不是扩展程序的环境中运行，所以它们通常需要某种方式与扩展程序的其余部分通信。...扩展程序（弹窗页面和后台页面）和内容脚本间的通信使用消息传递的方式。两边均可以监听另一边发来的消息，并通过同样的通道回应。消息可以包含任何有效的 JSON 对象。..."来自内容脚本：" + sender.tab.url : "来自扩展程序"); if (request && !
答:要访问国外网站找官网资料(受限于学习环境)，同时Firefox 与 Google Chrome、Opera 和 W3C 草案社区组织 所支持的 扩展(Extensions) API 在很大程度上兼容...（background scripts）的职责，由于扩展常常需要独立于任何浏览器窗口或特定网页来维持一种长期的状态或者执行长期的操作， // 可以添加多个后台脚本或者你也可以先引入一个后台页面，再在后台页面中引入脚本优势是...后台脚本的运行环境:DOM API,WebExtension API, 跨域访问, 网页内容(通过 message-passing API 与内容脚本通信),内容安全策略(Content Security...}`; const hidePage1 = `div#container > :not(.main) { display: none; };`; /** 浏览器插件监听单击按钮,并将相应的消息发送到脚本的页面内容.../images/test.jpg"); } } /** 浏览器插件监听单击按钮,并将相应的消息发送到脚本的页面内容。
答:要找官网资料(受限于学习环境)，同时Firefox 与 Google Chrome、Opera 和 W3C 草案社区组织 所支持的 扩展(Extensions) API 在很大程度上兼容。...（background scripts）的职责，由于扩展常常需要独立于任何浏览器窗口或特定网页来维持一种长期的状态或者执行长期的操作， // 可以添加多个后台脚本或者你也可以先引入一个后台页面，再在后台页面中引入脚本优势是...后台脚本的运行环境:DOM API,WebExtension API, 跨域访问, 网页内容(通过 message-passing API 与内容脚本通信),内容安全策略(Content Security...}`; const hidePage1 = `div#container > :not(.main) { display: none; };`; /** 浏览器插件监听单击按钮,并将相应的消息发送到脚本的页面内容.../images/test.jpg"); } } /** 浏览器插件监听单击按钮,并将相应的消息发送到脚本的页面内容。
在 Chrome JavaScript 引擎（称为 V8）中，每个脚本都有自己的脚本 ID。 有时 V8 没有关于脚本文件名的信息，例如在 eval 的情况下。...内容并且该内容包含 标记时，脚本将使用 eval() 进行评估，并被 Chrome 的 Sources 视图识别为以 VM 开头的新文件。...我们可以转到 网络 选项卡，找到 AJAX 请求，并查看整个 HTML 响应，包括您的脚本。 使用 eval 时，javascript 会被扔进 Chrome 调试器 VM。...，但具有“.map”扩展名。...如何将生成的代码链接到源映射？ 虽然源映射格式旨在与语言和平台无关，但为 Web 服务器托管javascript 的预期用例制定一些约定是很有用的。 有两种建议的方法将源映射链接到输出。
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
