Chrome扩展和Dom捕获 - 腾讯云开发者社区 - 腾讯云

开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

DOM扩展

下述内容主要讲述了《JavaScript高级程序设计（第3版）》第11章关于“DOM扩展”。尽管DOM作为API已经非常完善了，但是为了实现更多的功能，仍然会有一些标准或专有的扩展。...对DOM的两个主要扩展是Selectors API（选择符API）和HTML5。一、选择符API Selectors API是由W3C发起制定的一个标准，致力于让浏览器原生支持CSS查询。...插入标记 DOM操作文档插入HTML标记非常复杂，因为其不仅要创建一系列DOM节点，而且还要小心地按照正确顺序进行连接。...四、专有扩展 1. children属性 children属性与childNodes没有什么区别。 2. contains()方法判断某个节点是不是另一个节点的后代。...插入文本 innerText和outerText并没有被纳入HTML5。其对文本进行操作，使用方式类似于innerHTM和outerHTML。 4.

1.5K3 1

DOM扩展Selectors API

，我们很早之前用的jQuery就有按照css选择器查询DOM元素获取引用。...querySelectorAll() 这个方法和querySelector方法一样，只不过它是查询匹配所有的节点，不是一个，这个方法返回的是NodeList的实例。...它经常和if出现在一起。元素遍历小知识 ie9之前的版本不会把元素间的空格当成空白节点，而其他浏览器会，这样导致了childNodes和firstChild等属性上的差异。...Element Traversal API 为 DOM 元素添加了 5 个属性： childElementCount，返回子元素数量（不包含文本节点和注释）； firstElementChild，指向第一个...在支持的浏览器中，所有 DOM 元素都会有这些属性，为遍历 DOM 元素提供便利。这样开发者就不用担心空白文本节点的问题了。

3043 0

您找到你想要的搜索结果了吗？

是的

没有找到

FacexWorm通过Facebook Messenger和Chrome扩展传播

Facebook和Chrome用户要注意了，最近有一款名叫FacexWorm的病毒，可以窃取密码，窃取加密货币，或者向Facebook用户发送垃圾邮件。...点击该链接后用户被重定向到一个仿冒的YouTube网页，这个网页会让用户安装跟YouTube相关的Chrome扩展程序。...发送垃圾邮件通过分析这个插件，趋势科技发现它会向用户的Chrome浏览器添加代码，以便从登录表单中窃取密码。...这款扩展还会插入加密挖掘脚本，加载Coinhive浏览器中的挖矿脚本。...趋势科技表示，他们很早就报告给了Google和Facebook，Chrome商店员工删除了扩展程序，而Facebook则禁止与垃圾邮件相关的域名，共同阻止了攻击的扩散。

6332 0

分享几个实用的 chrome 和 edge 扩展

话说没有扩展的浏览器是没有灵魂的，之前分享过几篇关于Chrome扩展的文章（微软的edge也是通用的）这里再分享几个实用的扩展：网易云音乐这个扩展在之前文章分享过分享几个音乐神器 APP，免费听全网音乐...BA%91%E9%9F%B3%E4%B9%90/ekmamdknmdolmmjbgpmnkiobcnihdhhf 网页版登陆账号还可以收听和管理你的网易云音乐歌单，比如周杰伦的这首《你听得到》虽然显示灰色但也能听.../gabfmnliflodkdafenbcpjdlppllnemd/ 视频下载助手之前分享过很多视频下载工具又一视频下载神器，批量下载腾讯/优酷/爱奇艺/b站/抖音视频，这个扩展也支持下载主流网站的视频和音频...、xlsx、ppt、pptx ，只需要拖动文件到 Chrome 浏览器即可，有点类似腾讯文档，扩展地址https://chrome.google.com/webstore/detail/office-editing-for-docs-s...JSON格式的数据，不过不方便预览，这个扩展可以很直观的查看数据，层次分明，比如之前分享的查看b站账户硬币数的接口每天自动签到b站快速升级LV6 ，扩展地https://chrome.google.com

1.5K2 0

2014年辛星解读Javascript之DOM之冒泡和捕获

它用于指定事件传递的顺序，分为冒泡和捕获两种方式，接下来我们将揭开它的神奇面纱，彻底的解读它。...它用于解除绑定，即把我们的事件和事件的回调函数解除绑定。...只是这个addEventListener和removeEventListener对于浏览器的兼容性上并非那么好，还是IE系列在作怪，IE8之下的版本号不支持，可是IE8支持使用element.attachEvent

2222 0

Chrome扩展开发

manifest_version": 2, // 插件的名称 "name": "demo", // 插件的版本 "version": "1.0.0", // 插件描述 "description": "简单的Chrome...扩展demo", // 图标，一般偷懒全部用一个尺寸的也没问题 "icons": { "16": "img/icon.png", "48": "img/icon.png", "128"..."browser_action": { "default_icon": "img/icon.png", // 图标悬停时的标题，可选 "default_title": "这是一个示例Chrome...", // Chrome40以后的插件配置页写法，如果2个都写，新版Chrome只认后面这一个 "options_ui": { "page": "options.html", // 添加一些默认的样式...，推荐使用 "chrome_style": true }, // 向地址栏注册一个关键字以提供搜索建议，只能设置一个关键字 "omnibox": { "keyword" : "go" },

8942 0

chrome扩展推荐-Tampermonkey

得益于Google的品牌力量和技术实力，chrome浏览器近年来的市场占有率不断上升。...reizhi也是chrome的爱好者之一，从最原始的IE，到假死王maxthon，再到轻快的opera，最后让我留恋chrome的理由还是强大的可扩展性。...虽然资源占用永远都是抛不开的弱点，但无与伦比的速度和极致的可扩展性是有目共睹的。其实把Tampermonkey叫做扩展，倒不如叫做脚本平台。...Tampermonkey下载安装地址 https://chrome.google.com/we……kfjojejmpbldmpobfkfo 在chrome上安装好Tampermonkey扩展后...除了从各大论坛下载JS脚本之外，userscripts也是非常棒的一个脚本扩展集合网站。

9734 0

认识Chrome扩展插件

访问 url: chrome://extensions，打开开发者模式扩展程序是基于 Web 技术（如 HTML、CSS 和 JavaScript）构建的软件程序，使用户能够自定义 Chrome...2、Chrome extensions 和 Chrome Plugin的区别 Chrome Extension（Chrome扩展插件）仅仅是用来增强浏览器网页的功能，它是利用浏览器提供的已有功能和和各种...3、扩展如何工作扩展是基于 HTML、JavaScript 和 CSS 等 Web 技术构建的。它们在单独的沙盒执行环境中运行，并与 Chrome 浏览器交互。...对于开发和测试，您可以使用扩展开发者模式将这些“解压”加载到 Chrome 中，或者直接拖动crx文件到管理扩展插件页面。...渲染进程主要运行Web Page,当打开页面时，会将content_script.js加载并注入到该网页的环境中，它和网页中引入的Javascript一样，可以操作该网页的DOM Tree，改变页面的展示效果

1.2K1 0

编写Chrome扩展程序

Chrome的扩展程序很多，也很容易入门，可以来简单实现一下看看官方文档或者翻译的文档：百度、360，慢慢就能实现出一个扩展程序来每个扩展程序应用一般会包含：一个manifest清单文件 html...一、了解Chrome扩展程序 Chrome扩展程序商店地址为：https://chrome.google.com/webstore/category/extensions?...hl=zh-CN 访问Chrome浏览器中已安装的扩展：chrome://extensions/ ?....pem是密钥文件二、创建Chrome扩展程序由上述知晓了扩展程序的大致信息，要创建一个扩展程序，也不外乎是创建一个项目，依据一定的规则编写逻辑后再打包安装接下来就把之前写的简易计算器弄成一个扩展程序...可以看到计算器已经在扩展程序之中再看看博客文章下的广告，已经被清除了 ? ? 三、发布Chrome扩展程序自己的Chrome扩展程序写好之后，可以发布到商城之中这篇文章讲得挺好，就不多说了

8991 0

使用HTML，CSS和JavaScript创建Chrome扩展程序

介绍谷歌浏览器是开发人员和普通用户最喜欢的浏览器之一。我在所有设备上都使用了Google Chrome浏览器，它可以帮助我同步书签，浏览器历史记录，密码管理器等等。...您可以测试您的网页和全部。通过使用扩展程序，谷歌浏览器变得更加强大。因此，今天，我们将研究如何使用HTML，CSS和JavaScript创建您的第一个Google Chrome扩展程序。...设置要求 Chrome扩展入门的要求很少。...列表在这里： Google Chrome扩展程序（用于测试）文本编辑器（我更喜欢VS Code，您可以根据需要使用其他编辑器）有关HTML，CSS和JavaScript的基础知识 Chrome扩展程序...我们将为第一个Chrome扩展程序开发一个计算器应用程序。

1.9K2 0

Chrome扩展开发入门

而提到 Chrome 就绕不开它的扩展，或者叫插件（Chrome Extension）。可以从应用商店下载安装。应用商店除了有 Chrome 扩展程序，也有丰富的 Chrome主题背景。...本篇文章主要是从开发者角度来对其进行介绍，帮助开发者对 Chrome 扩展的结构和开发方式有个大致了解，快速入门。...matches 字段表示需要注入脚本的网站地址规则，js和css字段分别表示注入页面的 js 代码和 css 代码。...注入的 js 代码能够操作页面 DOM，可以调用浏览器原生API，可以发起页面请求，但是它具有独立的执行空间，也就是说注入的 js 和页面本身的js脚本不能够直接互相调用。...绝大多数 chrome.* api 都是异步的，如果需要拿到异步执行的结果，需要传入 `callback` 方法。下面象征性的举个例子，来描述一下一个插件的执行和交互。

4.1K3 0

Chrome扩展程开发初探

Chrome拓展是扩展浏览器功能的小程序，用户可以通过Chrome Web Store下载和安装。这些拓展能够增强浏览器的性能和用户体验，例如广告拦截、实时翻译、任务管理、笔记记录等。...manifest.json 文件是 Chrome 扩展的配置文件，定义了扩展的基本信息、权限和功能。...通过配置 manifest.json 文件，可以定义和控制 Chrome 扩展的各种功能和行为，包括用户界面、后台处理、网页内容修改和权限管理。这使得开发者能够创建功能丰富且安全的浏览器扩展。...'; document.body.appendChild(div); }); Chrome 扩展中的 content.js 主要功能包括： DOM 操作：修改页面的 DOM 结构，例如插入、删除或修改元素...开发者可以通过 Chrome 扩展来添加自定义的右键菜单选项，以提供更多的功能和交互性。

1101 0

使用typescript开发chrome扩展

使用typescript开发chrome扩展记录一下使用typescript开发chrome扩展的相关配置。 1....安装依赖必定需要用到的开发依赖项： chrome-types copy-webpack-plugin ts-loader typescript webpack-cli npm install chrome-types...基本目录结构截图图片 chrome使用typescript目录结构 MySQL多层级树形结构表的搜索查询优化使用WordPress作为小程序后端——APPID有效性前置检查使用WordPress...作为小程序后端——小程序请求前置检查 Windows rclone挂载sftp 迁移——从Electron迁移到Eclipse Theia 使用typescript开发chrome扩展 use multiple

6642 0

那些实用的 Chrome 扩展神器

作者：苏生不惑来源：苏生不惑之前已经写过不少Chrome扩展那些我常用的 Chrome 扩展，这里继续推荐那些实用Chrome扩展，所谓实用就是能解决实际问题。...手动安装扩展关于手动安装Chrome扩展还有小伙伴不大会用 ?...自己摸索几下就会了，上谷歌后安装扩展就不用这么折腾了。 ? 下面是推荐的5个Chrome扩展。...登录QQ空间后点击扩展按钮可以看到可以导出说说，日志，相册，视频，留言板，好友等等，还能导出他人QQ空间内容（不包括私密日志和QQ好友），简直神器。 ?...下载后的目录结构如下，.md文件使用markdown软件Typora 打开，看看之前的文章用 Markdown 写简历和 PPT ? ? 留言备份文件内容 ?

1.2K2 0

Chrome扩展开发入门体验

****前言**** Chrome浏览器扩展开发算是相当简单的，基本只要掌握HTML+CSS+Javascript，即可快速开发一个属于你的Chrome插件！...---- ****Chrome扩展基本目录结构**** manifest.json 这是一个配置文件，里面记录了扩展的使用范围、作者、版本、其余需要加载的文件等内容; icon.png 这个一看便知...，比如新标签页（newtab）、书签页面（bookmarks）和历史记录（history）。...ALic_Chrome ? Alic_Chrome 简单的扩展插件就完成了～～～ ---- ****background交互**** 简单来说呢，上面完成的其实就是一个扩展程序的微框架。...{}); 开发一个简单Chrome扩展程序基本是没有什么大问题的！

1.1K4 0

Chrome迅雷下载支持扩展1.1

喜欢chrome浏览器又经常使用迅雷下载东西的朋友注意了，chrome迅雷下载扩展已经发布了。再也不用复制到IE打开或者使用IE tab了。...目前只支持chrome浏览器内左键点击下载，支持以下文件类型的绝对路径下载地址：“rar、zip、tar、iso、exe、dll、rmvb、rm、avi、mp3、wma、wmv、wmp、mpg、mpeg...太平洋下载、霏凡软件站、中关村在线、天空软件站”（华军的下载页提供的是绝对地址，不需要专门支持）支持绝对路径的BT种子下载支持ed2k链接的点击下载，但不支持VeryCD下载页中的“下载选中的文件” 扩展下载

9273 0

chrome扩展应用开发快速科普

由于chrome官方文档中对于如何从零开发一个chrome扩展应用没有一套完整的流程，同时官方的API文档对于初学者也不是那么友好，因此本文将通过一个初学者的视角来讲解如何从零开始快速了解和开发一个chrome...这个配置文件在整个chrome扩展应用中非常重要，包含了项目的属性、配置、权限和资源信息。...点击这个选项，我们就能够将这张图片存储到我们的扩展应用提供的存储模块中。其中，runtime和contextMenus是chrome提供的原生API，相关API接口可以见此处。具体效果如下： ?...因此，我们可以使用JavaScript来操纵DOM节点，和页面原有的JavaScript进行交互。...总结我们通过一个简单的表情插件的例子来快速的介绍了chrome扩展应用的各个模块的功能和开发方法。通过这篇文章大家应该知道了chrome扩展应用各个模块的作用和开发的方法。

9801 0

从零实现的Chrome扩展

从零实现的Chrome扩展 Chrome扩展是一种可以在Chrome浏览器中添加新功能和修改浏览器行为的软件程序，例如我们常用的TamperMonkey、Proxy SwitchyOmega、AdGuard...而Chrome浏览器则在2010年支持了扩展系统，同样其也允许开发人员为Chrome编写自定义功能和修改浏览器行为的软件程序。...虽然FireFox是第一个引入浏览器扩展的浏览器，但是Chrome的扩展系统得到了广泛的认可和使用，也已经成为了现代浏览器中最流行的扩展系统之一。...content: 这个模块可以访问当前页面的DOM结构和样式，可以实现一些与页面交互的操作，但该模块的window与页面的window是隔离的。...，只能访问devtools、runtime和extension等部分API 可以访问页面DOM 不可跨域访问可直接访问页面Window 对于消息通信，在不同的模块需要配合三种API来实现，短链接chrome.runtime.onMessage

5542 0

那些实用的 Chrome 扩展神器

之前已经写过不少Chrome扩展那些我常用的 Chrome 扩展，这里继续推荐那些实用Chrome扩展，所谓实用就是能解决实际问题。...手动安装扩展关于手动安装Chrome扩展还有小伙伴不大会用 ?...自己摸索几下就会了，上谷歌后安装扩展就不用这么折腾了。 ? 下面是推荐的5个Chrome扩展。...登录QQ空间后点击扩展按钮可以看到可以导出说说，日志，相册，视频，留言板，好友等等，还能导出他人QQ空间内容（不包括私密日志和QQ好友），简直神器。 ?...下载后的目录结构如下，.md文件使用markdown软件Typora 打开，看看之前的文章用 Markdown 写简历和 PPT ? ? 留言备份文件内容 ?

9192 0

HTML5中的DOM扩展（一）

---- theme: channing-cyan 这是我参与8月更文挑战的第22天，活动详情查看：8月更文挑战我们都知道HTML5与之前的html是截然不同的方向，html5规范新增了很多DOM节点操作...我们下面来展开说一下 css类扩展伴随着HTML4的发展，class类的使用也逐渐变多，主要是我们用的css属性也变多了，其中有俩个DOM扩展的方法被广泛使用。...classList属性 classList更加方便了我们添加和删除class类，它也有length属性，还可以通过item()或者数组的中括号来获取其中的元素。它还有几个方法，我们写一下。

8692 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭