文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布

30分钟开发一款抓取网站图片资源的浏览器插件

background 背景页的脚本路径,一般为插件目录的相对地址 permissions 允许使用的浏览器API的权限,比如contextMenus(右键菜单), tabs(操作标签), webRequest....com时,插件icon将不被激活: ?...3.通信机制 对于一个相对复杂的浏览器插件来说,我们不仅仅只操作dom或者提供基本的功能就行了,我们还需要向第三方或者自己的服务器抓取有用的页面数据,这个时候就需要用到插件的通信机制了....这里我们主要关注popup.js和content_script.js, popup.js中主要用来获取从content_script页传过来的图片数据，并展示在popup.html中，另外又一个需要注意的是当页面没有注入生成按钮时...，这里用笔者上面实现的modal组件： Modal.show({ title: '提取结果', content: imgBox }) 第四步，当popup发送激活按钮的通知时，我们要在网页中动态插入生成按钮

1.4K10

浏览器插件开发-manifest文件解读「建议收藏」

default_popup 指定弹出的窗口，可以是任意 html badges “徽章” 就是小图标上的一个标记，用来展示一些状态 7. page_action 代表可以在当前页面执行的操作，不活动时显示灰色...需要设置 matches: ["http://"] 指定匹配的网址， js 设置注入脚本 css 设置注入样式 run_at 定义注入要本的时机 document_idle 表示浏览器帮你把握时机，...选项的值是一个数组，代表每一个权限，权限可以是已知的权限字符串 也可以是一个主机的匹配模式 权限字符串大多都对应着一个同名的 chrome[permissionName] API,全部的权限字符串可以点击上边链接查看...书签操作权限 browsingData 浏览器数据操作权限，主要用来清除浏览器数据 cookie storage 等 contentSettings 浏览器设置权限 contextMenus 上下文菜单添加权限...cookies cookie 的查询、修改、onChange 监听 history 浏览器历史记录操作权限 storage chrome.storage 的使用权限（注意不是浏览器的 localStorage

3.2K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    chrome插件 DIY

    期望：有个插件，能够记录那些没看完，但又非常想继续看完的文章，即使关闭浏览器，换个浏览器，也能够获取到这些记录，并且打开再次打开文章时，能自动跳转到上次看到的位置。...下次从记录（url栏右侧插件功能点）中进入文章页面时，页面会滚动到上次标记的位置。...官方文档中详细介绍了其用法，以及如何在同账号不同浏览器上自动同步数据。 基于chrome.storage，本插件的各种扩展点的数据流操作图如下： ?...content_script主要有两个功能： 在页面中操作（新增 、滚动到指定位置、删除）记录坐标的元素 ； 向background发送坐标消息和删除坐标的消息。...content_script调试：devtool -> sources -> Content scripts background调试： chrome://extensions/ 激活开发者模式，点击对应插件

    2.5K20

    chrome插件 DIY

    期望：有个插件，能够记录那些没看完，但又非常想继续看完的文章，即使关闭浏览器，换个浏览器，也能够获取到这些记录，并且打开再次打开文章时，能自动跳转到上次看到的位置。...下次从记录（url栏右侧插件功能点）中进入文章页面时，页面会滚动到上次标记的位置。...官方文档中详细介绍了其用法，以及如何在同账号不同浏览器上自动同步数据。 基于chrome.storage，本插件的各种扩展点的数据流操作图如下： ?...content_script主要有两个功能： 在页面中操作（新增 、滚动到指定位置、删除）记录坐标的元素 ； 向background发送坐标消息和删除坐标的消息。...content_script调试：devtool -> sources -> Content scripts background调试： chrome://extensions/ 激活开发者模式，点击对应插件

    3.4K60

    从0开始入门Chrome Ext安全（二） -- 安全的Chrome Ext

    Ext的api开始，探讨在插件层面到底能对浏览器进行多少种操作。...安全问题 对于content_script js来说，首当其中的一个问题就是，插件可以获取页面的dom，换言之，插件可以操作页面内的所有dom，其中就包括非httponly的cookie....在整个浏览器的插件体系内，各个层面都存在着这个问题，其中content_script js、injected script js和devtools js都可以直接访问操作dom，而popup js和background...chrome.contentSettings chrome.contentSettings api 用来设置浏览器在访问某个网页时的基础设置，其中包括cookie、js、插件等很多在访问网页时生效的配置...在后来的权限体系中，Chrome新增了activeTab来替代，在声明了activeTab之后，浏览器会赋予插件操作当前活跃选项卡的操作权限，且不会声明具体的权限要求。

    1.1K20

    从 0 开始入门 Chrome Ext 安全（二）-- 安全的 Chrome Ext

    Ext的api开始，探讨在插件层面到底能对浏览器进行多少种操作。...安全问题 对于content_script js来说，首当其中的一个问题就是，插件可以获取页面的dom，换言之，插件可以操作页面内的所有dom，其中就包括非httponly的cookie....在整个浏览器的插件体系内，各个层面都存在着这个问题，其中content_script js、injected script js和devtools js都可以直接访问操作dom，而popup js和background...chrome.contentSettings chrome.contentSettings api 用来设置浏览器在访问某个网页时的基础设置，其中包括cookie、js、插件等很多在访问网页时生效的配置...7.后 记 在翻阅了chrome相关的文档之后，我们不难发现，作为浏览器中相对独立的一层，插件可以轻松的操作相对下层的会话层，同时也可以在获取一定的权限之后，读取一些更上层例如操作系统的信息...

    1.6K20

    解密 JS 参数：逆向工程的实用技巧

    Hook 注入定位 Cookie 中某个加密参数为例进行讲解 Cookie 监听 编写一个 Chrome 插件（ V3 版本）监听浏览器 Cookie 值的变动，当 Cookie 的 Name 匹配时执行...Cookie 的监听事件 当监听到的 Cookie 满足条件时，发送消息给 Content Script 去执行具体的动作 需要指出的是，changeInfo.cause 表示 Cookie 变化的原因...Chrome 插件安装到浏览器上，打开目标网站及浏览器开发者工具 只要指定的 Cookie 变动，就会自动触发调试操作 Cookie Hook 通过上面的方式仅仅只能发现 Cookie 变动了，但是没法定位到参数设置的具体位置...推荐阅读 如何利用 Selenium 对已打开的浏览器进行爬虫！...最全总结 | 聊聊 Selenium 隐藏浏览器指纹特征的几种方式！

    80530

    数栈技术干货：从0到1实现谷歌插件开发探索及应用

    首先，在 popup 脚本，我们在打开窗口的时候需要去查询是否有存储开启划词翻译的状态，同时， 同时当状态发生变更的时候需要将其存储时，再在当前的Tab下面发送请求。...Tab 是可以去完成这个操作的，但是当开启了多个 Tab 的情况下就会出现开启翻译却不能展示翻译面板的情况。...// backgrond.js // 当扩展程序第一次安装、更新至新版本或 Chrome 浏览器更新至新版本时产生 chrome.runtime.onInstalled.addListener(() =...true 是为了与 content_script 的消息通道保持打开，通过异步的方式发送请求。...多添加一步感觉对交互更友好，不用去进行开关的操作。 代码结构 ?

    1.3K20

    vitesse-webext

    ——王充 分享一个由 Vite 提供支持的 WebExtension（Chrome、FireFox 等浏览器插件）的入门模板。...克隆到本地 如果你更喜欢使用更干净的 git history 手动执行此操作 如果您尚未安装 pnpm，请运行：npm install -g pnpm npx degit antfu/vitesse-webext...contentScript - 要作为 content_script 注入的脚本和组件 background - 用于背景的脚本。...dist - 构建的文件，也为 Vite 的开发提供存根条目。 scripts - 开发和捆绑帮助程序脚本。 开发 pnpm dev 然后在浏览器中加载带有 extension/ 文件夹的扩展。...使用 Gitpod 如果您有 Web 浏览器，则只需单击一下即可获得完全预配置的开发环境： 构建 要构建扩展，请运行 pnpm build 然后将文件打包到 extension 下，您可以将 extension.crx

    35310

    Spring 条件组件注解：`@Conditional` 与 `@ConditionalOnBean`

    通常情况下，条件组件会在Spring容器启动时被注册，但它们并不会立即执行它们的逻辑。相反，当Spring容器检测到满足条件的情况时，条件组件才会被激活并执行它们的逻辑。...不要在构造方法或matches方法中触发Bean定义的解析(会导致无限递归)； 缓存昂贵的操作结果(如类型匹配检查)以提高性能； 尽量保持 matches 方法是幂等的(多次调用得到同样结果)； 三、...可以实现依赖其他 Bean 的条件化配置。 当指定的 Bean 在 BeanFactory 中存在且类型匹配时，条件满足，相关的配置类或Bean会被实例化。..."foo"的Bean存在时被激活 BarConfig 会仅在类型为Bar的Bean存在时被激活 @Configuration @ConditionalOnBean("foo") // 仅在foo...(type = Bar.class) // 仅在Bar类型Bean存在时激活 public class BarConfig { @Bean public Qux qux() { ...

    28210

    懂个锤子Vue VueRouter路由深入浅出

    HTML页面，用户导航到新页面时，浏览器会发起新的HTTP请求，加载完整的HTML文档及相关的CSS、JavaScript等资源；用户体验： 页面切换涉及完整的页面刷新，可能会感觉较慢，因为：每个页面都是独立加载的...：.router-link-exact-active 通常在，精确匹配 整个路径时添加；.router-link-active 会在链接对应的路由被激活时添加，适用于 模糊匹配 、设置高亮；为什么 路径的前缀时，该类会被激活例如：当前路由是/users/123，那么所有指向/users/xxx链接都会被标记为活动状态这种设计考虑到了嵌套路由的场景，使得：父级菜单在子路由被访问时也能保持高亮，增强了导航的上下文感知...；router-link-exact-active：相对地，这个类仅在路径完全匹配时才被激活，提供了更精确的控制；声明式导航-自定义类名Vue Router为了提供更多的定制性，开发者可以自定义浏览器以及大部分的老浏览器，它是基于浏览器的原生功能；这种模式依赖于浏览器的锚点（hashchange）事件，不需要服务器端的任何配置

    82910

    怎样为你的 Vue.js 单页应用提速

    调用 import() 函数时，将会下载所有延迟加载的资源。对于 Vue 组件，仅在请求渲染时才发生。对话框是注定会这样的。通常仅在用户交互后才显示它们。.../ModalDialog.vue') } } Webpack 将为 ModalDialog 组件创建一个单独的块，该块不会在页面加载时立即下载，而是仅在需要时才下载...延迟加载路由 构建 SPA 时，JavaScript 捆绑包可能会变得很大，从而增加页面加载时间。如果我们可以将每个路由的组成部分拆分为一个单独的块，然后仅在访问路由时才加载它们，则效率会更高。...但是，预取仅在浏览器完成初始加载并变为空闲之后才开始。 使对象列表不可变 通常，我们将从后端获取对象列表，例如用户、项目、文章等。默认情况下，Vue 使数组中每个对象的每个第一级属性都具有响应性。...可以通过使用浏览器中开发者工具的 Performance 标签来实现。 为了获得准确的数据，我们必须在 Vue 应用中激活性能模式。

    3.2K10

    如何在Ubuntu 14.04和Debian 8上使用Apache设置ModSecurity

    它支持灵活的规则引擎来执行简单和复杂的操作，并附带核心规则集（CRS），其中包含SQL注入，跨站点脚本，特洛伊木马，恶意用户代理，会话劫持和许多其他漏洞利用的规则。...如果您在生产服务器上尝试此操作，请仅在测试所有规则后更改此指令。...如果输入正确的凭证对，例如“ 用户名”字段中的“ sammy” 和“ 密码”字段中的密码，您将看到消息“ 这是仅在使用有效凭据登录时才会显示的文本”。...SQL注入规则 接下来，我们将激活SQL注入规则文件。...i:是一个不区分大小写的匹配。在成功匹配所有这三个规则时，将ACTION拒绝并使用msg "Spam detected."链操作进行记录。链动作模拟逻辑AND以匹配所有三个规则。

    2.3K00

    MSHTML宿主安全FAQ（上篇）：深度解析浏览器引擎安全风险与防护策略

    MSHTML宿主安全FAQ：上篇MSHTML（又称Trident）是Internet Explorer的浏览器渲染引擎。...但宿主MSHTML时必须特别注意安全防护，本FAQ将帮助您规避常见的宿主配置错误。...SSL验证证书，仍需确保内容源绝对安全必须遵循最小权限原则，禁止内容自动执行用户机器上的任意代码风险等级1：完全任意内容必须实施与IE浏览器同等的安全限制需考虑宿主环境中的导航行为特征（如Visual...扩展通过window.external暴露DOM扩展接口（如CD刻录程序的BurnToCD()方法）参考技术文档：KB188015ActiveX控件安全实现应确保特殊功能仅在特定宿主环境中激活（如HTML...Help控件仅在HH.EXE中运行）推荐验证宿主进程名称，并实现无法识别环境时的安全回退机制SiteLock模板可有效防范环境识别类攻击模板注入防护常见于动态填充HTML模板的场景（如MP3元数据预览器

    9500

    Selenium异常集锦

    与浏览器自动测试相关的场景中，经常会遇到未经检查的异常，因为这些测试涉及浏览器和操作系统的不同组合和版本，包括网络和异步加载等因素都会导致未检查异常的发生。...如果IME（输入法）的激活由于某种原因失败，则抛出此异常。...在调用ActionChains类的move()方法之前，应该始终检查我们尝试移动的位置，并仅在屏幕上存在该位置时才执行该操作。...NoSuchCookieException 当当前浏览上下文的活动document的关联cookie中不存在与给定路径名匹配的cookie时，会发生此Selenium异常。...UnknownMethodException 这是常见的Selenium异常之一，当请求命令能够匹配已知URL但无法匹配该URL的方法时，就会发生这种异常。

    6.9K20

    关于“Python”的核心知识点整理大全51

    环境处于活动状态时，环境名将包含在括号内，如 处所示。在这种情况下，你可以在环境中安装包，并使用已安装的包。你在ll_env中安装的包 仅在该环境处于活动状态时才可用。...别忘了，Django仅在虚拟环境处于活动状态时才可用。...首次执行命令migrate时，将让Django确保数据库与项 目的当前状态匹配。在使用SQLite（后面将更详细地介绍）的新项目中首次执行这个命令时， Django将新建一个数据库。...all migrations，应用所有的迁移）匹配。...Django启动一个服务器，让你能够查看系统中的项目，了解它们的工作情况。当你在浏览器 中输入URL以请求网页时，该Django服务器将进行响应：生成合适的网页，并将其发送给浏览器。

    38710

    Web性能优化之Worker线程(下)

    即使浏览器「未全局支持」服务工作线程，服务工作线程本身对页面也应该是「不可见」的。这是因为它的行为类似代理，就算有需要它处理的操作，也仅仅是「发送常规的网络请求」。...在获得新激活的 ServiceWorkerRegistration 时触发。...设置为字符串时，只会匹配 Cache 键为指定字符串的缓存值 ignoreSearch： 1. 设置为 true 时，在匹配 URL 时「忽略查询字符串」，包括请求查询和缓存键。 2....foo=bar 会匹配 https://example.com ignoreMethod： 1. 设置为 true 时，在匹配 URL 时忽略请求查询的 HTTP 方法 ignoreVary： 1....如果浏览器检测到某个服务工作线程空闲了，就可以终止它并在需要时再重新启动。这意味着可以「依赖」服务工作线程在「激活后处理事件」，但不能依赖它们的持久化全局状态。

    2.8K20

    【17】进大厂必须掌握的面试题-50个Angular面试

    jQlite也称为 jQuery lite是jQuery的子集，包含其所有功能。默认情况下，它打包在Angular中。它帮助Angular以兼容的跨浏览器方式操作DOM。...26.我们可以在哪种类型的组件上创建自定义指令？ Angular支持创建以下内容的自定义指令： 元素指令 -当遇到匹配的元素时，指令将激活。 属性 -当遇到匹配的属性时，指令将激活。...CSS- 指令会在遇到匹配的CSS样式时激活。 注释 -遇到匹配的注释时，指令将激活 27. Angular中有哪些不同类型的过滤器？...当您尝试将对象创建的逻辑与使用对象的逻辑分开时，依赖注入的概念会派上用场。“ config”操作使用DI，在加载模块以检索应用程序的元素时，必须预先配置DI。...DOM 物料清单 1.代表文档对象模型 1.代表浏览器对象模型 2.表示网页的内容 2.在网页上方工作，并包含浏览器属性 3.所有对象都以树状结构排列，并且只能通过提供的API来操作和访问文档 3.所有全局

    45K51
    点击加载更多

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

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

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

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

      领券