首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    认识Chrome扩展插件

    学习Chrome扩展插件势在必行‍♂️‍ Chrome extensions 文档 插件的架构可以参考这里 Chrome扩展程序应用商店入口 管理使用chrome扩展。...、background.js、content_script.js 下图展示他们之间的关系,以及如何通信 (图片来源网络,侵删) 运行时的三个进程: 扩展进程(Extension Process)...和popup.html, backgrount.html中没有任何内容,是通过background.js创建生成,当浏览器打开时,会自动加载插件的background.js文件,它独立于网页并且一直运行在后台...渲染进程主要运行Web Page,当打开页面时,会将content_script.js加载并注入到该网页的环境中,它和网页中引入的Javascript一样,可以操作该网页的DOM Tree,改变页面的展示效果...最后 本文介绍的是 chrome 扩展基础知识,相信看完以上之后,你会对 Chrome 扩展插件有了一个比较清晰的认识。

    1.2K10

    编写Chrome扩展程序

    Chrome扩展程序很多,也很容易入门,可以来简单实现一下 看看 官方文档 或者翻译的文档:百度、360,慢慢就能实现出一个扩展程序来 每个扩展程序应用一般会包含: 一个manifest清单文件 html...一、了解Chrome扩展程序 Chrome扩展程序商店地址为:https://chrome.google.com/webstore/category/extensions?...hl=zh-CN 访问Chrome浏览器中已安装的扩展chrome://extensions/ ?...": ["js/jquery.js", "js/content.js"] }] } 这就是需要的清单文件了,定义了程序的基本信息,这些字段的作用就自行去 文档 查看吧 文件目录结构为: ?...可以看到计算器已经在扩展程序之中 再看看博客文章下的广告,已经被清除了 ? ? 三、发布Chrome扩展程序 自己的Chrome扩展程序写好之后,可以发布到商城之中 这篇文章 讲得挺好,就不多说了

    88610

    【译】Cromos – 下载并注入代码到谷歌 Chrome 浏览器扩展

    cromos是一个用于下载Chrome网页商店合法扩展的工具,还可以在应用程序背景下注入代码。...下载扩展 注入 更新云端上的文件 Windows感染 安装 $ cd $HOME/ $ git clone https://github.com/fbctf/cromos $ sudo chmod -R...创建批处理文件并更新云端文件 Usage: python cromos.py --extension {id} --build {bat} --token {dropboxToken} 模块 你也可以在后台注入一些预定义模块...组策略对象(GPO) Chrome允许你添加扩展使用Windows组策略对象(GPO)。...如果你需要在多台机器上强制安装,只需要按照Chrome部署向导中的步骤,然后稍微修改原来的扩展,你就可以在Chrome网页商店发布你的扩展,这需要支付5美元。 免责声明 代码示例是基于教育目的提供的。

    1.2K60

    Chrome扩展开发入门

    而提到 Chrome 就绕不开它的扩展,或者叫插件(Chrome Extension)。 可以从 应用商店下载安装。应用商店除了有 Chrome 扩展程序,也有丰富的 Chrome主题背景。...一、Chrome 扩展应用程序构成(manifest v3版本) Chrome 扩展开发所用到的技术栈就是html/js/css。可以说就是纯“前端开发”,其界面是用 html+css 画的。...交互界面与组成模块 一个扩展的组成模块如下图所示,整个 Chrome 扩展主要包含六个模块:扩展图标、插件弹窗、选项页、单独页、注入页面脚本、后台脚本。...matches 字段表示需要注入脚本的网站地址规则,js和css字段分别表示注入页面的 js 代码和 css 代码。...注入js 代码能够操作页面 DOM,可以调用浏览器原生API,可以发起页面请求,但是它具有独立的执行空间,也就是说注入js 和页面本身的js脚本不能够直接互相调用。

    4K30

    Chrome扩展程开发初探

    ; }); }); background background.js 文件是 Chrome 扩展的后台脚本,用于处理长期运行的任务、事件和状态管理。它在浏览器的后台运行,并且在浏览器启动时加载。...扩展中,content.js 是内容脚本,用于在匹配的网页上执行 JavaScript 代码。...内容脚本可以修改网页的 DOM 结构,与页面进行交互,并在浏览器页面加载时注入执行。...'; document.body.appendChild(div); }); Chrome 扩展中的 content.js 主要功能包括: DOM 操作:修改页面的 DOM 结构,例如插入、删除或修改元素...数据注入:在页面加载时向页面注入自定义的 HTML、CSS 或 JavaScript,改变页面的外观或行为。 内容修改和过滤:根据特定规则修改页面内容,过滤广告、隐藏特定元素或修改网页样式。

    9710

    那些实用的 Chrome 扩展神器

    作者:苏生不惑 来源:苏生不惑 之前已经写过不少Chrome扩展那些我常用的 Chrome 扩展,这里继续推荐那些实用Chrome扩展 ,所谓实用就是能解决实际问题。...下载Chrome扩展需要先上谷歌,公众号回复 谷歌 获取使用方法,当然你也可以使用 https://chrome-extension-downloader.com/ 这个网站来下载crx文件,然后手动安装...手动安装扩展 关于手动安装Chrome扩展还有小伙伴不大会用 ?...简单来说就是打开谷歌的扩展管理页面 chrome://extensions/ ,然后将下载crx文件拖进去,如果提示该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的或者程序包无效...自己摸索几下就会了,上谷歌后安装扩展就不用这么折腾了。 ? 下面是推荐的5个Chrome扩展

    1.1K20

    chrome扩展应用开发快速科普

    本文的目标群体:已经了解或使用过chrome扩展应用,但是自己不知道如何开发一个chrome扩展应用的工程师。如果有具体的chrome扩展应用开发经验的同学,本篇文章可能太过简单,并不适合你。...本文的主要内容如下: chrome扩展应用模块功能介绍 chrome扩展应用模块开发介绍 本文的内容不包括chrome扩展应用开发时提供的各个API功能详解,有需求的同学可以自行查看官方API文档。...下面,我们通过jQuery来页面注入表情面板,同时使用PostMessage来与原有页面进行数据通信。...总结 我们通过一个简单的表情插件的例子来快速的介绍了chrome扩展应用的各个模块的功能和开发方法。通过这篇文章大家应该知道了chrome扩展应用各个模块的作用和开发的方法。...如果大家想对chrome扩展应用有一个更加深入的了解,那么建议自己动手开发相关的功能。这样才能够对chrome扩展应用的相关逻辑有一个更加清楚的认识。

    96910

    从零实现的Chrome扩展

    从零实现的Chrome扩展 Chrome扩展是一种可以在Chrome浏览器中添加新功能和修改浏览器行为的软件程序,例如我们常用的TamperMonkey、Proxy SwitchyOmega、AdGuard...虽然FireFox是第一个引入浏览器扩展的浏览器,但是Chrome扩展系统得到了广泛的认可和使用,也已经成为了现代浏览器中最流行的扩展系统之一。...直接通过类似于Js Bridge的方式暴露出一些接口就可以了,这样还可以更方便地做到权限控制,一定程度避免浏览器扩展执行一些恶意的行为导致用户受损。...,最后将Js注入到HTML当中就可以了,在这里我们直接配置一个多入口的输出能力,通常一个扩展插件不会是只有一个Js和HTML文件的,所以我们需要配置一个多入口的能力。...inject: 这个模块可以向当前页面注入自定义的JavaScript或CSS代码,可以实现一些与页面交互的操作,例如修改页面行为、添加样式等。

    51720

    那些实用的 Chrome 扩展神器

    之前已经写过不少Chrome扩展那些我常用的 Chrome 扩展,这里继续推荐那些实用Chrome扩展 ,所谓实用就是能解决实际问题。...下载Chrome扩展需要先上谷歌,公众号回复 谷歌 获取使用方法,当然你也可以使用 https://chrome-extension-downloader.com/ 这个网站来下载crx文件,然后手动安装...手动安装扩展 关于手动安装Chrome扩展还有小伙伴不大会用 ?...简单来说就是打开谷歌的扩展管理页面 chrome://extensions/ ,然后将下载crx文件拖进去,如果提示该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的或者程序包无效...自己摸索几下就会了,上谷歌后安装扩展就不用这么折腾了。 ? 下面是推荐的5个Chrome扩展

    90820

    我的首个Chrome扩展发布了

    忙活了有一段时间,零零散散的写了一个Chrome扩展。这里发发一篇文章安利一下。 怎样的一个扩展呢 它是一个Gmail 过滤器辅助工具,使用这个扩展可以轻松的创建邮件过滤器。 有图有真相 ?...如何下载 Chrome Store 大中华局域网用户下载地址 为什么写这个扩展 还是那个原因,自己遇到了不爽与痛点。 我是一个重度的Gmail用户,工作的邮箱使用Gmail托管。...开源么 当然开源,原因如下 个人能力和精力毕竟有限 希望通过社区的力量推动这个扩展持续发展 所以,如果你有想法的话,可以访问这个Github地址 https://github.com/androidyue.../Gmail-Helper-Filter 贡献力量 除了开源贡献代码外,如果你有想法,也可以共享力量,比如 提需求 提bug 分享本文或扩展 捐赠(下面那个红色按钮) 感谢 再次感谢我的御用设计师 大麦

    55930

    上不了谷歌如何安装 Chrome 扩展

    扩展对应的crx文件,比如输入https://chrome.google.com/webstore/detail/evernote-web-clipper/pioclpoplcdbaefihamjohnefbikjilc...手动安装扩展 打开Chrome扩展程序 chrome://extensions/ ? 开启开发者模式 ?...谷歌商店安装 在国内谷歌商店默认是打不开的,所以这里分享一个谷歌访问助手(公众号内回复 谷歌 获取),安装这个扩展后就能上谷歌商店直接安装Chrome扩展了。...分享的谷歌助手扩展同样使用上面的方法来安装,如果提示该扩展程序未列在 Chrome 网上应用店中,并可能是在您不知情的情况下添加的或者程序包无效。...先把文件后缀名.crx 改成 .rar或者.zip,然后解压到一个文件夹,再打开扩展程序chrome://extensions/ ,点击加载已解压的扩展程序。 ?

    1.5K20

    那些实用的 Chrome 扩展神器(二)

    之前已经写过 那些实用的 Chrome 扩展神器 ,如果你不能上谷歌没法直接安装Chrome扩展,可以使用https://crxdl.com/ 这个网站下载crx文件,然后手动安装。 ?...Chrome扩展地址 https://chrome.google.com/webstore/detail/new-tong-wen-tang/ldmgbgaoglmaiblpnphffibpbfchjaeg...Chrome扩展地址 https://chrome.google.com/webstore/detail/rooster-for-chrome/pimolnhbniceppehbgmibnbgcnhpkhfh...OBS这类直播软件,就可以把浏览器任何页面直播到B站、斗鱼或者虎牙的直播间里去,假如你有自己的直播间并且也安装了Node.js的话,那么可以安装这个Chrome扩展玩下,适合做无人值守音乐轮播或者电影轮播什么的...Chrome扩展地址 https://chrome.google.com/webstore/detail/jfgjlmafdjaofbkjpaoojooghnocjcag

    1.4K10
    领券