插件之间的通信 消息传递 manifest.json 配置说明 manifest.json 用于描述 Chrome 插件的源数据，配置信息等，基本内容如下 { "name": "...，可以用一个页面定义", "default_icon": "xxx.png 显示在右上角的图标button" }, } 配置项简介 1. manifest_version 必填...扩展页图标 (16 * 16) 最好是 png 格式 6. browser_action 可以用来定义点击图标后展示的窗口，对应接口 chrome.browserAction，这项配置与 page_action...) 接口中详细介绍 通信案例，通过 content_script 与页面 共享 DOM，来实现页面与扩展间的通信 // page.js 页面中触发一个postMessage document.getElementById...| 可选权限 （插件中可选的特性所需要的），两者的子配置项是一样的 选项的值是一个数组，代表每一个权限，权限可以是已知的权限字符串 也可以是一个主机的匹配模式 权限字符串大多都对应着一个同名的
按照 Google Chrome 插件的开发规范，首先新建一个文件夹，该文件夹下包含一个 manifest.json 文件和一个 JS Hook 脚本，当然，如果你想为你的插件配置一个图标的话，也可以将图标放到该文件夹下...，图标格式官方建议 PNG，也可以是 WebKit 支持的任何格式，包括 BMP、GIF、ICO 和 JPEG 等，注意：manifest.json 文件名不可更改！...// 图标 └─ javascript_hook.js // Hook 脚本，文件名顺便取 manifest.json manifest.json 是一个 Chrome 插件中最重要也是必不可少的文件...，定义了一个变量 org 来保存原始方法，window.XMLHttpRequest.prototype.setRequestHeader 这里有个原型对象 prototype，所有的 JavaScript...通常情况下，我们是挨个函数查看其传递的参数有没有包含我们目标参数，如果上一个函数里没有而下一个函数里出现了，那么大概率加密过程就在这两个函数之间，进入上一个函数再进行单步调试，一般就能找到加密代码，在本案例中
导入自己的浏览器插件包 通过以上三个步骤我们就可以开启浏览器插件开发之旅了.浏览器插件一般放在浏览器地址栏右侧,我们可以在manifest.json文件配置插件的icon,并配置一定的规则,就能看到我们的浏览器插件图标了...popup 点击插件图标后打开的自定义窗口, 用来处理用户交互 笔者画了一张简图来大致表示一下它们之间的关系: ?...在后面的浏览器插件案例中笔者会详细介绍content_scripts的用法. 2.4 popup popup是用户点击插件图标时打开的一个小窗口，当失去焦点后窗口就立即关闭，我们一般用它来处理一些简单的用户交互和插件说明...由于popup窗口也是一个网页,所以我们一般会建立一个popup.html和popup.js用来控制popup的页面展示和交互.我们在manifest.json中配置如下: { "page_action...，并且在页面中植入弹窗来展示获取到的图片，另一方面需要将图片数据传递给storage，以便popup页面可以获取图片数据。
接下来，我们看一下 Base64 图： Base64 图指的是，将一张图片数据编码成一串字符串，并使用该字符串代替图像地址。...SVG 图标 SVG 诞生于 1999 年，目的是用来绘制矢量图形，它主要通过定义必要的线和形状来创建一个图形。...这跟我们定义一个 CSS class 然后再去 HTML 中引用是一个道理。...我们再看一个多色图标的例子： /* svg 中的元素存在于 shadom 中，可以通过自定义变量传递参数 */ .icon...SVG 图标，需要引入预先定义好图标的 SVG 文件，然后将具体的图标 use 出来即可，可以分别修改图标中不同部位的颜色。
那么构建一个扩展应用，你就需要在项目的根目录创建一个manifest.json文件，一个简单的manifest.json的结构如下所示，详细的配置文档可以参考https://developer.mozilla.org...在这里主要是实现两个功能，一个是监听manifest.json配置文件以及资源目录public/static的变化，另一个是将manifest.json文件以及资源文件拷贝到打包目录中。...，我们可以根据实际的业务来完成间接通信方案，并且有些方法只能在V2中使用，可以酌情参考。...目标吗，很遗憾答案是不能，在首次打开页面的时候是可以的，但是在之后因为这个脚本实际上是相当于拿到了一个外部的脚本，因此Chrome会将这个脚本和页面上其他的页面同样处于一个排队的状态，而其他的脚本会有强缓存在...那么我们紧接着可以简单地讨论下如何实现沙箱环境隔离，其实在上边的例子中也可以看到直接打印window输出的是一个Proxy对象，那么在这里我们同样使用Proxy来实现简单的沙箱环境，我们需要实现的是对于
所以说，Chrome 扩展开发并不是什么新鲜玩意儿，只是一个挂载到 Chrome 浏览器上的一个“扩展”模块，比起微信小程序开发还简单。 这不就是网页应用吗？...扩展图标即扩展在浏览器扩展区域显示的 logo，可以自定义，也可以缺省，缺省时默认使用插件名的缩写。...在如上 manifest.json 文件中的 action.default_icon 字段中配置，支持配置多个规格（数组）。 2）扩展弹窗 扩展弹窗的显示时机为当用户点击扩展图标之后弹出。...在如上 manifest.json 文件中的 action.default_popup 字段中配置。 其值是一个 html 文件，html文件内部可引用js/css等资源，可看做是一个独立页面。...3）选项页 选项页的显示时机为当用户在扩展图标上右键-选项可打开，点击之后打开新 Tab 页。 在如上 manifest.json 文件中的 options_page 字段中配置。
那么构建一个扩展应用，你就需要在项目的根目录创建一个manifest.json文件，一个简单的manifest.json的结构如下所示，详细的配置文档可以参考https://developer.mozilla.org...那么现在我们先从manifest.json开始，目标是在右上角实现一个弹窗，当前很多扩展程序也都是基于右上角的小弹窗交互来控制相关能力的。...manifest.json以及我们配置的资源文件的，所以在这里我们需要通过一个rspack插件来完成相关的功能，因为rspack的相关接口是按照webpack5来做兼容的，所以在编写插件的时候实际跟编写...在这里主要是实现两个功能，一个是监听manifest.json配置文件以及资源目录public/static的变化，另一个是将manifest.json文件以及资源文件拷贝到打包目录中。...bridge与content script进行了通信，在前边我们也描述了如何进行通信，在这里我们可以通过设计一个通信类来完成相关操作，同时为了保持完整的TS类型，在这里定义了很多通信时的标志。
因为调试的需要，经常要找到某一个特定的参数，获取或者修改它的值。 读者可以尝试一下，贴到浏览器中，找到 cid 参数，修改为另外一个值。如果没有工具，这个过程是很痛苦的。...中的微格式数据 我们可以这样理解它，在页面加载完毕之后，我们的扩展程序会向这个页面注入一个或者额多个脚本，这个脚本可以获得浏览器所访问的 web 页面的详细信息。...popup -- 弹窗页面 popup 页面也非常好理解，在 manifest.json 的定义里它是 browser_action， 就是我们扩展程序的界面（弹窗页），就是上面的那张截图： 这个界面其实就是一个... manifest.json 的清单文件来配置它们及一些额外信息。...假设我们的 manifest.json 简单定义如下： # manifest.json { "name": "Url Helper", "version": "1.0.0", "
简单的理解就是，可以让网页像原生应用那样在用户的设备上安装，并且能够实现离线工作、推送通知等功能，不知道你注意过没有，你偶尔会在chrome浏览器中可以看到一个这样的标志：这就意味着这个web站点是支持了...2、另外可以很方便的添加到主屏幕，类似于你装了一个App一样，这样等同于霸占了用户的屏幕，不需要用户去记住你的域名了，点击一下图标，而且前面也提到了，即便在网络不佳的情况下，都可以秒速加载，因为那些html...PWA 应用的一个大致的交互流程，可以使用下图来配合理解：使用Next.js实现一个PWA应用为什么又是Next.js，你可能会问你能不能来点别的，我想说的是，Next.js作为一个前后端通杀的框架，的确非常适合作为本文的教学...操作环节在命令行中运行以下命令来创建一个新的Next.js项目：npx create-next-app hackernews-pwacd hackernews-pwa为了使你的Next.js应用成为PWA...继续，我们创建一个public/manifest.json文件，这是PWA的应用清单，它定义了应用的名称、图标等：{ "short_name": "HackerNews", "name": "Hacker
开发者可以利用这些技术在浏览器中添加新的功能、修改现有功能或者与网页进行交互。...version：本插件的版本，和发布相关 action：点击图标时，设置一些交互 16、32、48、128 default_icon：展示图标 default_popup：popup.html，一个弹窗页面...点击图标可以看到如下的popup的页面。...通过使用标准的文档对象模型(DOM)，它能够读取浏览器访问的网页的详细信息，可以对打开的页面进行更改，还可以将DOM信息传递给其父级插件。...来推送桌面通知；首先在manifest.json中配置权限 { "permissions": [ "notifications" ], } 然后在background.js脚本中进行创建
其实我们可以使用热更新，来代替自动刷新，来提高开发体验，不要问我为什么，我体验过，那种每次改代码就要等十秒的感觉（我们公司的angular老项目就这样），那么热更新应该怎么使用呢？...，在线上环境时，建议还是不要使用，统一原流程打包即可 9、一些项目体积以及运行时的性能优化 部分来吗使用懒加载，加快首屏加载时间 懒加载是老生常谈的问题了，这是性能优化的必要手段，当页面中的大型，并且不太重要的代码...小图片使用base64格式，不使用用网络请求 在我们打包时，如果遇见小型图片，我们可以直接转换成base64位格式，减少http请求就能达到前端性能优化的目的，使用方式非常简单 rules: [...}, test(module, chunks) { //可以为字符串，正则表达式，函数，以module为维度进行抽取，只要是满足条件的module都会被抽取到该common...的chunk中，为函数时第一个参数是遍历到的每一个模块，第二个参数是每一个引用到该模块的chunks数组。
1 谷歌插件简介 谷歌插件及ChormeExtensions是一个小型的程序，它可以修改并增强chrome浏览器的功能。可以使用web技术（如HTML，CSS，JavaScript）来编写。...一个扩展就是一个压缩的包，里面有HTML、CSS、JavaScript、图片或者任何你需要的资源。从本质上来讲，扩展就是一个web页面，它也可以使用浏览器为web页面提供的API。...的配置项 （1）Icons 插件的程序图标，可以一个或多个16的是插件页面图标48是管理界面图标 128是安装界面图标 （2）brower_action和page_action 这两个功能都是用来处理扩展在浏览器工具栏上的表现...区别是前者啥地方都能用后者是特定页面才能用 （3）default_popup 在用户点解扩展图标时可以设置弹出一个popup页面这个页面可以说是一个简单的网页也可以有自己的js脚本点击图标时运行此脚本...2.2 background background可以认为是插件运行是在浏览器中的一个后台脚本，与当前浏览页面无关。
我们将这个文件单独出来，以便用户可以轻松自定义他们的列表，而无需深入了解contentScript.js中的核心功能。 文件：styles.css。一个样式表，用于为我们的扩展增加一些外观效果。...接下来是一个 containsForbiddenWords 函数。顾名思义，该函数在传递给它的文本中包含任何禁用词时返回 true。我们将两个值都转为小写，以确保比较不区分大小写。...这可以通过一个弹出 UI（浏览器操作）来完成，该 UI 在点击扩展图标时打开，用户可以在其中管理他们的列表。您还需要将单词持久化到存储中。...处理鼠标粘贴事件 虽然我们的扩展检测到按键操作，但用户可以通过使用鼠标的右键菜单粘贴敏感信息来绕过这一点。为了堵住这个漏洞，我们可以添加一个用于粘贴事件的事件监听器（或者两者都监听输入事件）。...我们从一个明确的目标开始：为 ChatGPT 创建一个保护层，确保敏感信息保密。在本教程中，我们看到了如何通过少量的文件和一些代码来实现一个功能强大且有用的浏览器扩展。
性能神器还是弃之可惜的鸡肋？ 在一次面试中，我问一个候选人图片优化有哪些方法，他说，可以用 base64（data URI）。...事实真的如此吗？ Gzip是在Web端最常用的一种压缩文本的方法。 Gzip压缩算法分两步。第一步，采用LZ77算法的一个变种替换字符串，第二步，使用Huffman树来储存出现的位置和长度。...简单来讲，Gzip把原文本中多次出现的相同字符串记为一个“标记”，所以文本中重复出现的字符串越多，压缩率越高。 ?...维基百科的小图标适合使用base64 如果这个网页还能保证几个月不会更新，那么缓存不可控的问题也不会凸显。比如我的个人博客就使用了 data URI 来显示一个小图标。...对于 data URI，前端开发者需要谨慎使用，并注意到它的优缺点，以获得更好的性能。也许在下一个项目中你仍然不会使用 data URI，但至少下一次面试中你有更多可以说的了，不是吗？
PWA 出现之后，添加到桌面的图标我们可以自定义，还可以自定义首次进入 app 的画面，而且它不再使用浏览器打开，而是像原生应用一样打开，没有 url 地址输入框。...，但会有浏览器地址栏； icons 配置项是一个数组，数组中是一个个对象，对象中有三个属性： sizes 定义图像尺寸； src 图像文件的路径； type 提示图像的媒体类型； icons 根据设备的不同选择不同的图标...Cache 对象对应的字符串（传入 caches.open 中的字符串）。...重写 fetch 事件 写完了 install 和 activate 函数后，可以把远端的数据放入缓存中，还可以更新缓存，但我们的程序还不能离线访问，还需要告诉 service worker 让它用这些缓存内容来做点什么...respondWith 函数相当于一个发射器，拦截到的请求，在 respondWith 中可以返回一个自定义的响应（这些响应都应是一个 promise）。
Chrome插件的8种展示形式 browserAction(浏览器右上角) 通过配置browser_action可以在浏览器的右上角增加一个图标，一个browser_action可以拥有一个图标，一个tooltip...": "popup.html" } 图标 browser_action图标推荐使用宽高都为19像素的图片，更大的图标会被缩小，格式随意，一般推荐png，可以通过manifest中default_icon...再来看devtools.js的代码： // 创建自定义面板，同一个插件可以创建多个自定义面板 // 几个参数依次为：panel标题、图标（其实设置了也没地方显示）、要加载的页面、加载成功后的回调 chrome.devtools.panels.create...; }); 双方通信直接发送的都是JSON对象，不是JSON字符串，所以无需解析，很方便（当然也可以直接发送字符串）。...： 可以通过window.postMessage和window.addEventListener来实现二者消息通讯； 通过自定义DOM事件来实现； 第一种方法（推荐）： injected-script中
图标设计 在使用PWA之前，我们最好先行设计一个符合网站主题的图标。 本站使用的是brandmark图标设计网站，访问 brandmark进行图标设计。下载需要收费，不过可以截图。...下载需要收费，但是可以截图生成图标包及manifest 因为我们最终目的是要制作一个全平台的WEB APP，所以对于图标的大小、类型适配显得格外重要。...使用workbox:这个插件需要配合gulp插件，所以配置较为繁琐，好处是可以自定义适配弹窗提示，适合对前端有一定了解的用户。如果你还有使用pjax，恭喜你，BUG御三家马上就可以集齐了。 ?...这里的theme_color建议改成你图标的主色调，包括manifest.json中的theme_color也是如此。...这里的theme_color建议改成你图标的主色调，包括manifest.json中的theme_color也是如此。 运行以下指令 运行hexo g之后必须运行gulp指令，不然PWA不会生效！
---- ****Chrome扩展基本目录结构**** manifest.json 这是一个配置文件，里面记录了扩展的使用范围、作者、版本、其余需要加载的文件等内容; icon.png 这个一看便知...，就是扩展的图标～～～ popup.html 点击扩展图标，弹出的面板页面（如果在manifest.json中配置了default_popup为该文件的话） popup.js popup...面板加载的js脚本文件 popup.css popup面板加载的css样式文件 具体分析manifest.json插件的配置文件 { "name": "Alic", //插件的名称.../public/js/background.js"] } } chrome_url_overrides chrome_url_overrides 属性可以自定义的页面替换 Chrome 相应默认的页面...//to-do }); 调用chrome.tabs.create()来创建新的tab，url既可以是path也可以是网址 chrome.tabs.create({url: ".
HTML文件,点击扩展图标，弹出的面板页面（如果在manifest.json中配置了default_popup为该文件的话） ├ demo.js //一个或多个js文件,popup面板加载的js脚本文件...manifest.json 每一个扩展程序、可安装的网络应用以及主题背景都有一个 JSON 格式的清单文件，名为 manifest.json，提供重要信息, 包含一些属性，如您的扩展程序的名称与描述、它的版本号等等...，同一个插件可以创建多个自定义面板 // 几个参数依次为：panel标题、图标（其实设置了也没地方显示）、要加载的页面、加载成功后的回调 chrome.devtools.panels.create('MyPanel...text description", //图标可以是1个, 或者多个 //一般来说最好的方案是提供3个: //- 128x128: 在从 chrome web store 安装的过程中需要使用,...web page 可以使用的 //默认插件中的资源对于网页是 blocked, //需要说明哪些是要使用的 图片/图标/css/js 等 "web_accessible_resources":
manifest.json文件是应用的配置文件，用于指定应用的名称、图标、权限等。...page 相当于 body 节点 定义在 App.vue 中的样式为全局样式，作用于每一个页面。...uni-app 支持使用字体图标，使用方式与普通 web 项目相同，需要注意以下几点： 字体文件小于 40kb，uni-app 会自动将其转化为 base64 格式； 字体文件大于等于 40kb， 需开发者自己转换...导航跳转传递参数 在导航进行跳转到下一个页面的同时，可以给下一个页面传递相应的参数，接收参数的页面可以通过onLoad生命周期进行接收 传递参数的页面 ? 接收参数的页面 ?...uni-app中组件的创建 在uni-app中，可以通过创建一个后缀名为vue的文件，即创建一个组件成功，其他组件可以将该组件通过impot的方式导入，在通过components进行注册即可 创建login
领取专属 10元无门槛券
手把手带您无忧上云
云服务器
即时通信 IM
ICP备案
对象存储
实时音视频
