开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

如何在Google Chrome内容脚本中使用Tippy.js？

Tippy.js是一个轻量级的工具提示库，可以帮助我们在Google Chrome内容脚本中实现工具提示功能。下面是如何在Google Chrome内容脚本中使用Tippy.js的步骤：

首先，在你的Chrome扩展程序目录中创建一个新的文件夹，例如"tippy"。
在"tippy"文件夹中，下载Tippy.js的压缩文件，可以通过以下链接获取：Tippy.js官方网站。将下载的文件重命名为"tippy.js"。
在"tippy"文件夹中，创建一个新的JavaScript文件，例如"content.js"，用于编写内容脚本代码。
在"content.js"中引入"tippy.js"文件。可以使用Chrome扩展程序API中的chrome.runtime.getURL()方法获取文件的完整路径，然后使用document.createElement('script')动态创建一个<script>标签，将路径设置为src属性值，最后将该标签添加到页面的<head>或<body>元素中。
示例代码如下：
示例代码如下：
在"content.js"中，等待页面加载完成后，使用Tippy.js提供的API创建和配置工具提示。
示例代码如下：
示例代码如下：
这里的'#elementID'是要添加工具提示的元素的选择器，content是要显示的工具提示内容。你可以根据Tippy.js提供的文档了解更多配置选项。
在Chrome扩展程序的清单文件（manifest.json）中，确保"content.js"被添加到"content_scripts"字段中，以便在合适的页面加载内容脚本。
示例代码如下：
示例代码如下：

完成以上步骤后，你就可以在Google Chrome浏览器中的适当页面上使用Tippy.js的工具提示功能了。记得将示例中的"tippy"文件夹和其中的内容添加到你的Chrome扩展程序目录中，并按照实际情况修改代码中的选择器、URL和匹配规则等。

注意：以上回答的是如何在Google Chrome内容脚本中使用Tippy.js的方法，同时要求答案中不能提及亚马逊AWS、Azure、阿里云、华为云、天翼云、GoDaddy、Namecheap、Google等流行的一些云计算品牌商。

相关搜索:如何在chrome扩展内容脚本中使用google api？如何在页面完全加载Google Chrome扩展之前运行内容脚本如何在Google Chrome中重新启用混合内容阻止谷歌Chrome内容脚本中的jQuery？Chrome扩展:在内容脚本中访问localStorage Chrome扩展中“内容脚本”的可选权限？ReactJS使用内容脚本而不弹出(Chrome扩展)如何在chrome扩展v3中加载内容脚本 Chrome扩展:使用内容脚本修改网页上的现有脚本？如何在python中打开google chrome Chrome扩展内容脚本-使用JavaScript抓取YouTube视频标题如何使用Google Apps脚本通过函数删除google文档中的所有内容？getElementsByClassName在chrome扩展内容脚本中的行为异常 Chrome 72在扩展的内容脚本中阻止XHR 我可以使用Google应用程序脚本开发google chrome扩展吗如何在Google Chrome扩展中存储数据？如何在google chrome中手动存储字体？如何在google chrome中忽略这个错误？使用Chrome插件内容脚本获取自定义元素如何在Chrome扩展中获取内容宽度

相关搜索:

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

分享 7 个有用的 JavaScript 库，提升你的开发效率

这是GitHub上星标数超过15.5k的JavaScript库之一。它是一个功能强大、轻量级的模糊搜索库，不依赖于任何其他库。如果你还不熟悉模糊搜索（更正式地称为近似字符串匹配），它是一种通过查找与给定模式近似相等的字符串来进行匹配的技术（而不是完全相等）。

03

【JS 逆向百例】浏览器插件 Hook 实战，亚航加密参数分析

本文章中所有内容仅供学习交流，抓包内容、敏感网址、数据接口均已做脱敏处理，严禁用于商业用途和非法用途，否则由此产生的一切后果均与作者无关，若有侵权，请联系我立即删除！

00

chrome插件 DIY

本文作者：IMWeb coolriver 原文出处：IMWeb社区未经同意，禁止转载 1 前言对于一个web前端开发者，chrome浏览器是一个工作，学习和生活的必备工具。除了chrom

06

chrome插件 DIY

对于一个web前端开发者，chrome浏览器是一个工作，学习和生活的必备工具。除了chrome本身的基本能力（控制台等）外，能大幅提高这个神器的使用体验的是，可扩展能力（插件）以及丰富的插件生态。

02

Firefox内容安全策略中的“Strict-Dynamic”限制

在本文中，我们将重点分析如何绕过Firefox内容安全策略中的“Strict-Dynamic”限制。该漏洞详情请参考： https://www.mozilla.org/en-US/security/advisories/mfsa2018-11/#CVE-2018-5175 。该漏洞将绕过内容安全策略（CSP）的保护机制，而在该机制中包含一个“严格动态限制”的Script-src策略。如果目标网站中存在HTTP注入漏洞，攻击者可以将一个引用注入到require.js库的一个副本中，这个库位于Firefox开发人员工具之中，攻击者随后便可以使用已知技术，利用该库绕过CSP限制，从而执行注入脚本。

05

如何在Chrome浏览器中运行Selenium？

测试系统是一项艰巨的任务，您需要一个可以在此过程中为您提供帮助的工具。Selenium就是这样一种工具，主要用于网站测试。在本文中，我将告诉您如何在Chrome浏览器中运行Selenium。

03

使用TamperMonkey解决Google被墙stackoverflow无法正常使用的问题

Stackoverflow是广大程序猿赖以生存的工具之一，在stackoverflow搜索技术问题得到答案的质量和正确率远远高于其他平台。但是这么一个好网站居然因为Google被墙而无法正常使用（无法登录，无法评论、回答问题等）着实让人不爽呀。以前还有VPN可以用的，现在大部分VPN都被查封了。。程序员的日子真的是越来越难过了呀。。所以我下决心想办法自己解决这个令人头疼问题。

06

怎么用浏览器在线打开pdf文件_PDF文件怎么编辑

在web开发当中我们经常需要进行需要在线浏览PDf内容，在线嵌入动态pdf，传统的解决方法安装客户端PDF阅读器，如果是在谷歌是可以在线浏览的，因为他自身就带了一些插件，以前遇到这样的问题往往是费时又费力，很不好解决，

06

被低估的 Deno

这个周末，我一直在把玩 deno 的 rusty_v8 以及 deno_core（录了几个 rusty_v8 的视频，预计四月第二周发）。rusty_v8 是 google v8 engine 的 Rust 零成本封装，而 deno_core 在 rusty_v8 的基础上进一步封装了一些额外的功能。众所周知，v8 是 chrome 内部的 javascript 执行引擎，它优异的 JIT 能力，以及高效的垃圾回收，使得 chrome 成为最快最成功的浏览器。v8 仅仅被用在浏览器中有些暴殄天物，于是十多年前（2009），Ryan Dahl 把 v8 引入了服务端，创建了 node.js —— node 以简单容易上手的编程模型（单线程，异步处理）和大量的前端拥趸一举成为广受欢迎的服务端开发工具；而 3 年前，Ryan Dahl 自我革命，重新用 v8 从零打造 deno，意欲让 deno 成为下一代服务器开发的王者。

03

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

数栈是云原生—站式数据中台PaaS，我们在github和gitee上有一个有趣的开源项目：FlinkX，记得给我们点个star！star！star！

02

JavaScript Errors 指南

英文：mknichel 译文：Jocs https://github.com/Jocs/jocs.github.io/issues/1

02

Web自动化测试 | 充分利用浏览器记录的信息

一切和效率提升，质量提高相关的工具/脚本都隶属于自动化的测试范围，所以这里要介绍的不是单纯的UI自动化和接口测试脚本。

03

如何在十分钟内创建一个Chrome 插件

曾经想过制作自己的Chrome扩展，却因为觉得过程太复杂而打消了念头吗？好消息，事情并没有你想象的那么复杂！在接下来的几分钟里，我们不仅将为你详解Chrome扩展的基础知识，还将手把手教你如何用五个简单的步骤创建自己的扩展。

05

全网最详细的谷歌插件开发小册📚

可能是全网最详细的谷歌插件开发小册👏🏻，之前写谷歌插件的时候绕了一圈网上的教程，没有发现比较好的文档教程，索性根据官方文档梳理一遍，避免后面学习的同学继续踩坑！！！

02

在 Ubuntu 14.04/15.04 上安装配置 Node.js v4.0.0

大家好，Node.JS 4.0 发布了，这个流行的服务器端 JS 平台合并了 Node.js 和 io.js 的代码，4.0 版就是这两个项目结合的产物——现在合并为一个代码库。这次最主要的变化是 Node.js 封装了4.5 版本的 Google V8 JS 引擎，与当前的 Chrome 所带的一致。所以，紧跟 V8 的发布可以让 Node.js 运行的更快、更安全，同时更好的利用 ES6 的很多语言特性。

00

无用自动化: 打通任督二脉，Centos7部署python脚本，访问测试报告

一直以来都是在windows本地上运行脚本执行，对如何在Centos服务器上运行脚本一无所知。一直以为需要打开浏览器，看着页面才能运行，结果…趁着今天无事，研究了一下。

05

JavaScrip最容易犯的十大错误及其避免方法（）

这可能由于许多原因而发生，但常见的是在呈现UI组件时不正确地初始化状态。让我们看一个在真实应用程序中如何发生这种情况的示例。我们将选择React，但不正确初始化的相同原则也适用于Angular，Vue或任何其他框架。

01

分享最近发现的几个实用 chrome/edge 扩展和油猴脚本

之前分享过的chrome/edge扩展和油猴脚本都更新到我的博客上了https://blog-susheng.vercel.app/ ，今天再分享几个实用的chrome/edge扩展和油猴脚本。

02

（最新版）如何正确移除Selenium中的 window.navigator.webdriver

在《一日一技：如何正确移除Selenium中window.navigator.webdriver的值》一文中，我们介绍了在当时能够正确从Selenium启动的Chrome浏览器中移除window.navigator.webdriver的方法。

03

手把手教你打造全宇宙最强 Firefox 浏览器

Firefox 和 Chrome 分别是当今世界最流行的浏览器之一，虽然这两款浏览器都有各自的优势，但随着时间的推移，Firefox 的受欢迎程度在逐渐下降，开始走下坡路。这无可厚非，并不是 Firefox 不行了，而是 Chrome 太强了，背靠 Google 顶级大厂，无缝整合 Google 服务，界面极度简洁，它就像一个十足精美的篮子，你往里面放的鸡蛋越多，它就越好用。

03

Alfred快速启动开发环境

Alfred是一款Mac系统必装软件，他提供快速启动App、全文查找文件、workflow自动化流程等功能。本文介绍如何使用Alfred Workflow+Apple Script实现快速启动开发环境。问题 & 设想先梳理下，我在日常启动前端的工作环境时，需要手动操作的步骤：打开Webstorm并选择开发项目（10秒）打开iterm命令行工具，并cd到项目下（5秒）打开whistle代理（5秒）打开chrome浏览器工作必须的插件，比如代理插件、react、vue调试插件（20秒）打开c

04

Chrome Extension

Chrome插件是一个用Web技术开发、用来增强浏览器功能的软件，它其实就是一个由HTML、CSS、JS、图片等资源组成的一个.crx后缀的压缩包

03

在 Docker 中配置 Headless Chrome Node.js 服务器

随着开发过程中自动 UI 测试的兴起，无头浏览器已变得非常流行。网站爬虫和基于 HTML 的内容分析也有无数的用例。

01

开发一款浏览器插件

可以从这个网站[1]下载个好看的图标,命名为default_icon字段对应的名称

01

如何使用prerender-spa-plugin插件对页面进行预渲染

文主要是介绍使用prerender-spa-plugin插件在针对前端代码进行预渲染。

03

浏览器内核及分类

浏览器=shell+内核其中shell的种类相对比较多，内核则比较少。Shell是指浏览器的外壳：例如菜单，工具栏等。主要是提供给用户界面操作，参数设置等等。它是调用内核来实现各种功能的。内核才是浏览器的核心。内核是基于标记语言显示内容的程序或模块。

03

2020前端性能优化清单（三）

最好先了解你要处理的内容。盘点出所有资源的清单（ JavaScript 、图片、字体、第三方脚本和页面上开销较大的模块，例如轮播、复杂的信息图和多媒体内容），然后将它们按组细分。

02

2020前端性能优化清单（三）

最好先了解你要处理的内容。盘点出所有资源的清单（ JavaScript 、图片、字体、第三方脚本和页面上开销较大的模块，例如轮播、复杂的信息图和多媒体内容），然后将它们按组细分。

01

分享 40 个免费的前端初学者视频教程

来源 | https://javascript.plainenglish.io/top-40-free-programming-courses-for-beginners-bc39253e784c

02

Chrome 在野零日漏洞

卡巴斯基安全防护是卡巴斯基产品的一部分，过去已成功检测到许多零日攻击。最近，为 Google的 Chrome 浏览器发现了一个未知的新漏洞。我们会立即将此情况报告给 Google Chrome 安全团队。在审核了我们提供的 PoC 之后，Google 确认存在零日漏洞并将其分配为 CVE-2019-13720。Google 已针对 Windows，Mac 和 Linux 发布了 Chrome 版本78.0.3904.87，我们建议所有 Chrome 用户尽快将其更新为最新版本！你可以点击此处阅读 Google 公告。

02

绕过 CSP 从而产生 UXSS 漏洞

当通过 tarnish 扫描大量 Chrome 扩展程序时，我发现了两款流行的 Chrome 扩展程序 Video Downloader for Chrome version 5.0.012 (820万用户) 和 Video Downloader Plus(730 万用户) 在浏览器的操作页中存在 XSS 漏洞，而利用这些扩展程序只要让受害者导航到攻击者控制的页面。

02

IE 在中国的春运刷票中又败了，Chrome扩展插件crx时代来临

又到了一年一度的中国春运，今年的网络订票（12306.cn）有好多的故事上演，下面几条是这两天的几条相关新闻。抢票插件风靡的恶果：农民工成购车票弱势群体 12306抢票插件拖垮美国代码托管站Github 12306抢票插件大受青睐或存泄露个人信息风险春运hold火车票，网上刷票插件使用全攻略！网络订票就离不开浏览器，主流的浏览器有IE，Chrome，Firefox，Safari，搜狗，傲游，猎豹等等，目前主要是WebKit内核和IE的Trident内核两大类以及国内大量的双核浏览器。作为互联网“入

不用源码也能改造网站？教你用油猴脚本和浏览器插件玩转界面交互！

在日常浏览网页时，我们有时会遇到一些不太满意的网站界面交互设计。然而，作为普通用户，我们并没有网站的源码，如何在这种情况下进行界面改造呢？今天，我将向大家介绍两种强大的工具——油猴脚本和浏览器插件，通过它们，我们可以轻松地改造现有网站的界面和交互体验。

01

怎样利用XSS漏洞在其它网站注入链接？

去年，英国的SEO老手Tom Anthony曝出一个 Google蜘蛛存在的漏洞，可能被黑帽SEO利用XSS漏洞在别人网站注入链接，而且这些链接确定会被Google蜘蛛抓取。这个漏洞如果被大规模利用，显然是会影响权重流动和搜索排名的。

02

Postman----API接口测试神器

API是用于构建应用程序软件的一组子程序定义，协议和工具。一般来说，这是一套明确定义的各种软件组件之间的通信方法。 API测试——测试API集合，检查它们的功能、性能、安全性，以及是否返回正确的响应。

03

Web AI：下一代 Web 应用的新模型、工具、API

AI 时代，和我们前端开发结合最紧密的就是当下炒的非常火热的 Web AI 技术了。

01

（新）关于修改window.navigator.webdriver代码失效问题

②关于chrome版本迭代后，代码失效问题解决方案的文章链接《关于修改window.navigator.webdriver代码失效问题》

04

【译】使用默认方式更新service worker

从 Chrome 68 开始，service worker 脚本检查更新的HTTP请求将默认不受 HTTP cache 的影响。这可以解决开发人员的共同难题，即在 service worker 脚本上设置无意的 Cache-Control 标头可能导致的更新延迟。

01

【译】使用 Web Workers 优化 JavaScript 应用程序性能

从简单的脚本语言到成为 Web 标准编程语言，JavaScript 已经走过了漫长的道路。时至今日，它已经被广泛用于构建服务器端应用程序，移动应用程序，桌面应用程序甚至数据库。

01

Node.js 发展史介绍与安装初体验

最近打算做一个个人的Blog系统，用于技术交流与个人主页展示，起初打算通过Wordpress+VPS部署在云上，后来看了下腾讯云CVM价格比较贵就算是比较便宜的轻量应用服务器（Lighthouse）一年价格也需要1000人民币，其实也可以买一个玩玩，毕竟公司内部每个月还能抢100元腾讯云优惠券，可以给个人服务器进行续命。但是平时工作比较忙，Blog与公众号更新属实是属于反人性的东西，打算先基于Gitpages搭建一个免费的Blog主页，如果能够持续进行内容输出再考虑切换到个人服务器上。

03

14个 JavaScript 代码优化技巧

这篇文章列举了一些技巧，可帮助你写出更好的 JavaScript 代码，从而提高性能。

02

浅谈xss的后台守护问题

在出好HCTF2016的两道xss题目后，就有了一个比较严重的问题就是，如何守护xss的后台，用不能人工一直在后台刷新吧（逃

02

独家 | 5个只有少数程序员知道的用例

作者：Shalitha Suranga 翻译：闫晓雨校对：赵茹萱本文约2900字，建议阅读6分钟。Python不仅能够应用于数据科学和Web后端——还可以做更多的事。照片由Chris Ried拍摄，使用Canva编辑并发布在Unsplash Python是一种简单的、对开发人员友好且具有解释性的通用编程语言。Python因其简单的语法、丰富的库生态系统和高效的开发环境而日益流行。程序员使用Python来构建Web后端、实用程序脚本和本机桌面应用程序。如今，Python在科学工程师、数据分析师、机器

03

WordPress网站js脚本延迟和异步加载教程

这些包括由WordPress添加的标准脚本以及由使用wp_enqueue_scripts函数的主题和插件添加的一些脚本。根据脚本的类型，它可能位于网页的头部，正文或页脚部分。

02

国庆节前端技术栈充实计划（6）：Web 应用的 13 个优化步骤

时过境迁，Web 应用比以往任何时候都更具交互性，搞定性能可以帮助你极大地改善终端用户的体验。阅读以下的技巧并学以致用，看看哪些可以用来改善延迟，渲染时间以及整体性能吧！

03

网页抓取教程之Playwright篇

近年来，随着互联网行业的发展，互联网的影响力逐渐上升。这也归功于技术水平的提高，研发出了越来越多用户体验良好的应用程序。此外，从网络应用程序的开发到测试，自动化在整个过程中的使用也越来越普及。网络爬虫工具越发流行。

04

让你iPhone的Safari浏览器自带翻译的方法！_Joi博客文章

微言： Chris Gardner：You want something. Go get it！克里斯·加德纳：有了目标就要全力以赴。

02

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭