从零入门Chrome插件开发

什么是 Chrome 插件

谷歌浏览器在推出时就以其快速、安全和简洁的特点受到了广大用户的欢迎。随着浏览器的不断发展，谷歌为用户提供了插件开发平台，使开发者能够为浏览器添加各种功能和定制化选项。从此，插件成为了提升用户体验和个性化的重要工具。

谷歌浏览器插件是一种小型程序，可以增强浏览器的功能。谷歌浏览器插件使用HTML、CSS和JavaScript等网页开发技术，开发者可以使用这些技术来创建自己的谷歌浏览器插件。

谷歌浏览器插件的常见作用：

  • 广告拦截：广告拦截插件可以帮助用户屏蔽网页上的广告，提高用户的浏览体验。
  • 下载管理：下载管理插件可以帮助用户更好地管理他们的下载任务，包括暂停、恢复、取消等操作。
  • 阅读模式：阅读模式插件可以将网页转换为更易于阅读的格式，去除不必要的元素和广告等。
  • 密码管理：密码管理插件可以帮助用户管理他们的密码，并自动填写表单。
  • 翻译：翻译插件可以帮助用户在浏览网页时翻译其他语言的内容，提高用户的阅读体验。
  • 社交媒体：社交媒体插件可以帮助用户快速访问他们的社交媒体账户，分享内容和与朋友互动。
  • 开发者工具：开发者工具插件可以帮助开发者调试和测试他们的网站和应用程序。

根据功能和使用方式的不同，可以将 Chrome 插件分为多种类型，例如：

  • 浏览器操作类插件：如广告拦截器、密码管理器等，主要用于增强用户对浏览器的控制能力；
  • 网页修改类插件：如用户样式表、网页字体修改器等，主要用于改变网页的外观和布局；
  • 其他类型：如翻译软件、天气预报插件等。

它们能够个性化定制浏览器、增强功能、提升效率，并且通过开发者社区促进插件开发的创新和进步。

谷歌插件不仅提升了用户的浏览体验，还为开发者提供了一个创造和分享自己工具的平台。通过使用和探索谷歌插件，我们可以充分发挥浏览器的潜力，提高工作效率和生活品质。

Chrome 插件的运行原理

Chrome 插件采用了一种基于事件的编程模型，其运行原理如下：

  1. 插件加载：当用户在浏览器中安装并启用插件时，插件将被加载到浏览器中。此时，浏览器会读取插件目录中的 manifest.json 文件，根据其中的配置信息来加载插件。

  2. 插件初始化：一旦插件被加载到浏览器中，就会初始化插件。在这个过程中，插件会创建必要的对象和变量，并准备好处理来自浏览器和其他网站的请求和事件。

  3. 插件事件处理：当用户与浏览器交互时，例如单击插件图标或在网页中执行某些操作时，插件会收到事件。在这种情况下，插件会根据事件类型执行相应的操作。

  4. 插件响应：当插件接收到事件时，它会执行相应的操作。例如，如果用户单击插件图标，则插件可能会显示一个弹出窗口或打开一个新的标签页。

  5. 插件卸载：当用户不再需要插件时，可以从浏览器中卸载它。在这种情况下，浏览器会删除插件文件并清除相关的设置和数据。

当用户安装了一个 Chrome 插件后，该插件的代码将会被下载到用户的本地计算机上，并在以后的浏览器会话中执行。用户可以通过 Chrome 浏览器的扩展管理器对已安装的插件进行启用或禁用。

Chrome 插件开发基本结构

谷歌插件的内部机制是通过一系列的文件和目录来实现的，一个 Chrome 插件通常由以下组成部分组成：

  • 清单文件（manifest.json）：manifest.json是插件的配置文件，这是插件的核心，它定义了插件的元数据和行为，包含插件名称、版本号、作者信息、插件的权限和其他元数据等。在这个文件中，可以指定插件的图标、背景页、内容脚本和其他资源。
  • 背景页面（background.js）：background.js是插件的后台脚本，可以在后台运行，处理插件的事件和请求。例如，您可以使用background.js来处理插件的启动和关闭事件，或者处理来自其他网站的请求。
  • 内容脚本（content_script）：content_scripts是插件的内容脚本，可以注入到网页中与网页进行交互。它可以访问当前页面的 DOM 结构和 JavaScript 对象，以实现对页面的修改和操作。例如，您可以使用content_scripts来修改网页元素、监听网页事件或者向网页注入自定义样式或脚本等。
  • 弹出页面（popup.html）：popup.html是插件的弹出窗口页面，可以在用户点击插件图标时显示。可以在popup.html中添加任何HTML、CSS和JavaScript代码，以显示有用的信息或提供交互式功能。
  • 插件图标（icon.png）：icon.png是插件的图标文件，用于在谷歌浏览器中显示插件图标。

除了上述文件之外，还可以包含其他资源文件，例如CSS样式表、JavaScript脚本、图片和字体等。

OK，那我们话不多说，接下来我用两个插件来带你完全入门 Google 插件开发！

实战：Chrome 滤镜插件

首先，我们需要创建一个新的 Chrome 插件项目叫滤镜插件：

mkdir google_extensions_filter # 创建滤镜插件项目
cd google_extensions_filter # 进入项目根目录
touch manifest.json # 在你的项目根目录中创建一个名为 manifest.json 的文件

接下来我们来编写 manifest.json：

{"manifest_version": 2,  // manifest.json 文件版本号"name": "网页滤镜🔍",  // 插件名称，字符串类型"version": "1.0",  // 插件版本号，字符串类型"description": "更改当前网页滤镜🔍", // 插件描述，字符串类型"permissions": [ // 权限，该字段定义了插件需要访问的资源和功能，例如浏览器标签、存储、网络等等"activeTab" // 允许插件访问当前激活的标签页],"browser_action": { // 浏览器动作，该字段用于定义当用户单击浏览器操作按钮时执行的操作"default_title": "网页滤镜🔍", // 鼠标指针悬停在浏览器操作按钮上显示的默认标题"default_popup": "popup/popup.html", // 弹出窗口的 HTML 文件路径"default_icon": { // 默认图标的文件路径"128": "icon/icon128.png"  // 128x128 像素的图标文件路径}},// 此属性对应用程序可以加载的资源设置限制"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"
}

在清单配置文件里我们定义了插件的名称、版本、描述和所需的权限，还指定了插件的图标和默认弹出窗口

接下来我们在根目录创建 popup 文件夹，然后在里面创建一个名为 popup.html 的文件，并添加以下代码：

<!DOCTYPE html>
<html><head><meta charset="utf-8"><title>添加网页滤镜🔍</title><link rel="stylesheet" href="popup.css"></head><body><h1>添加网页滤镜🔍</h1><div class="box"><button id="changeFilterBtn"><span class="text">添加滤镜</span></button><button id="changeBlackFilterBtn"><span class="text">黑白滤镜</span></button><button id="resetFilterBtn"><span class="text">去除滤镜</span></button></div><script src="popup.js"></script></body></html>

我们写了一个简单的弹出窗口页面：包含一个标题（添加网页滤镜🔍）和三个按钮（添加滤镜、黑白滤镜、去除滤镜），然后我们来加一点css让这个页面变得炫酷起来：

body {min-width: 300px;min-height: 100px;}h1 {font-size: 28px;font-weight: bold;text-align: center;text-shadow: 2px 2px #f0f0f0;}.box {width: 100%;display: flex;justify-content: space-around;align-items: center;}button {align-items: center;background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);border: 0;border-radius: 8px;box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;box-sizing: border-box;color: #FFFFFF;display: flex;font-family: Phantomsans, sans-serif;font-size: 18px;justify-content: center;line-height: 1em;max-width: 100%;min-width: 140px;margin: 5px;padding: 3px;text-decoration: none;user-select: none;-webkit-user-select: none;touch-action: manipulation;white-space: nowrap;cursor: pointer;transition: all .3s;}button:active,button:hover {outline: 0;}button span {background-color: rgb(5, 6, 45);padding: 16px 24px;border-radius: 6px;width: 100%;height: 100%;transition: 300ms;}button:hover span {background: none;}button:active {transform: scale(0.9);}

好我们来看看现在的效果：

在这里插入图片描述

看起来还是蛮不错的，接下来为了使弹出窗口有更多的交互功能，我们需要为按钮添加 JavaScript

在popup文件夹中创建一个名为 popup.js 的文件，并添加以下代码：

// 添加滤镜
document.getElementById('changeFilterBtn').addEventListener('click', function () {chrome.tabs.executeScript({code: 'document.documentElement.style.filter = "hue-rotate(180deg)"'});
});// 添加黑白滤镜
document.getElementById('changeBlackFilterBtn').addEventListener('click', function () {chrome.tabs.executeScript({code: 'document.documentElement.style.filter = "grayscale(100%)"'});
});//去除滤镜
document.getElementById('resetFilterBtn').addEventListener('click', function () {chrome.tabs.executeScript({code: `document.documentElement.style.filter = "none"`});
});

代码非常简单，就是为每个按钮添加了事件监听器，分别监听添加滤镜、黑白滤镜、去除滤镜按钮的单击事件

在更改滤镜按钮的回调函数中，我们使用了 chrome.tabs.executeScript 方法，这个方法的作用是向当前选项卡中注入写入的 JavaScript 代码

现在我们的滤镜插件就完成了，接下来我们来使用一下看看有没有生效

打开谷歌浏览器，在地址栏中输入 chrome://extensions/ 并回车。在扩展程序页面的右上角，点击 “开发者模式” 按钮，然后点击左上角的 “加载已解压的扩展程序” 按钮，选择刚刚我们的google_extensions_filter文件夹

在这里插入图片描述

让我们来看看滤镜插件最后的效果：（完美！）

在这里插入图片描述

实战：Chrome 记事本插件

你是不是觉得上面的例子太简单了？

那我们接着来写一个逻辑稍微复杂一点的记事本插件

我们和之前一样，先来创建一个新的 Chrome 插件项目叫 notebook：

mkdir google_extensions_notebook # 创建记事本插件项目
cd google_extensions_notebook # 进入项目根目录
touch manifest.json # 在项目根目录中创建一个名为 manifest.json 的文件

接下来我们也来编写 manifest.json文件，参数配置基本上和刚刚的项目差不多：

{"manifest_version": 2,"name": "瑞萌萌的记事本🗒️","version": "1.0","description": "一个随便写写的记事本插件","browser_action": {"default_icon": {"16": "icon/icon16.png","128": "icon/icon128.png"},"default_title": "瑞萌萌的记事本🗒️","default_popup": "popup.html"},"permissions": ["storage"],"content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'"}

然后我们在根目录创建一个名为 popup.html 的文件，并添加以下HTML代码：

<!DOCTYPE html>
<html><head><title>瑞萌萌的记事本🗒️</title><meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1.0"><link rel="stylesheet" href="popup.css"><script src="popup.js"></script></head><body><h1>瑞萌萌的记事本🗒️</h1><div id="note-list"></div><textarea id="note-textarea" rows="5" placeholder="请输入您的笔记"></textarea><!-- <div id="note-content" contenteditable="true"></div> --><button id="add-button">添加笔记</button><button id="clear-button">清空笔记</button></body>
</html>

来点 CSS 装饰一下：

body {font-family: Arial, sans-serif;font-size: 16px;line-height: 1.5;margin: 0;padding: 0;min-width: 600px;background: linear-gradient(to bottom right, #ffafbd, #ffc3a0);
}h1 {font-size: 28px;font-weight: bold;text-align: center;text-shadow: 2px 2px #f0f0f0;
}#note-list {margin: 0 10px;padding: 0 20px;
}.note-item {border: 1px solid #ccc;border-radius: 15px;margin-bottom: 20px;padding: 10px 150px 10px 10px;position: relative;background-color: white;
}.note-text {margin-bottom: 10px;
}.copy-button {box-shadow:inset 0px 1px 0px 0px #efdcfb;background:linear-gradient(to bottom, #dfbdfa 5%, #bc80ea 100%);background-color:#dfbdfa;border-radius:27px;border:3px solid #c584f3;color: #fff;cursor: pointer;font-size: 14px;margin-left: 10px;padding: 5px 15px;position: absolute;right: 80px;top: 50%;text-decoration:none;text-shadow:0px 1px 0px #9752cc;transform: translateY(-50%);transition: background-color 0.3s ease-in-out;}.copy-button:hover {background:linear-gradient(to bottom, #bc80ea 5%, #dfbdfa 100%);background-color:#bc80ea;}
.delete-button {box-shadow:inset 0px 1px 0px 0px #8a2a21;background:linear-gradient(to bottom, #c62d1f 5%, #f24437 100%);border-radius:27px;border:3px solid #ffffff;color: #fff;cursor: pointer;font-size: 14px;margin-left: 10px;padding: 8px 17px;position: absolute;text-decoration: none;text-shadow: 0px 1px 0px #b23e35;right: 10px;top: 50%;transform: translateY(-50%);transition: background-color 0.3s ease-in-out;
}.delete-button:hover {background:linear-gradient(to bottom, #f24437 5%, #c62d1f 100%);background-color:#f24437;
}#note-textarea {border: 1px solid #ccc;border-radius: 15px;font-family: Arial, sans-serif;font-size: 16px;line-height: 1.5;margin: 0 35px;padding: 10px;resize: none;width: calc(85%);
}#add-button, #clear-button {background-color: #4caf50;border: none;border-radius: 20px;box-shadow: 0 1px 3px rgba(0,0,0,0.3);color: #fff;cursor: pointer;font-size: 14px;padding: 10px 30px;margin: 10px 10px 20px 120px;transition: background-color 0.3s ease-in-out, box-shadow 0.3s ease-in-out;
}#add-button:hover, #clear-button:hover {background-color: #388e3c;
}

在这里插入图片描述

效果还不错，大家也可以根据自己的审美来设计

现在我们就可以开始写我们记事本的逻辑啦，我希望这个记事本插件能做到：

  • 文本框输入笔记内容后添加笔记进入笔记列表
  • 点击复制按钮可以复制添加的任意一条笔记内容
  • 点击删除按钮可以删除笔记列表中的任意一条笔记
  • 点击清空笔记可以删除所有记录的笔记
  • 复制内容到文本框添加笔记，点击复制按钮时保留复制文本的格式
  • 笔记列表存储在Chrome浏览器中，所有标签页共用

🆗 需求明确，还等什么，JS直接冲：

// 渲染笔记列表
function renderNoteList(notes) {var noteList = document.getElementById("note-list");noteList.innerHTML = "";for (var i = 0; i < notes.length; i++) {// 创建笔记项var noteItem = document.createElement("div");noteItem.className = "note-item";// 创建笔记文本var noteText = document.createElement("div");noteText.className = "note-text";noteText.textContent = notes[i];// 创建复制按钮var copyButton = document.createElement("button");copyButton.className = "copy-button";copyButton.textContent = "复制";// 创建删除按钮var deleteButton = document.createElement("button");deleteButton.className = "delete-button";deleteButton.textContent = "删除";// 绑定删除按钮的点击事件deleteButton.addEventListener("click", (function(index) {return function() {// 删除对应的笔记notes.splice(index, 1);// 更新笔记列表chrome.storage.sync.set({notes: notes}, function() {renderNoteList(notes);});};})(i));// 获取所有复制按钮var copyButtons = document.querySelectorAll('.copy-button');// 给每个复制按钮添加点击事件copyButtons.forEach(copyButton => {copyButton.addEventListener('click', () => {// 获取要复制的文本内容const noteContent = copyButton.previousElementSibling ? copyButton.previousElementSibling.textContent.trim() : copyButton.previousSibling.textContent.trim();// 创建一个临时textarea元素const tempTextarea = document.createElement('textarea');tempTextarea.value = noteContent;// 将临时textarea元素添加到body中，并选中其中的文本document.body.appendChild(tempTextarea);tempTextarea.select();// 复制文本内容到剪贴板document.execCommand('copy');// 移除临时textarea元素document.body.removeChild(tempTextarea);});});// 添加笔记文本和删除按钮到笔记项noteItem.appendChild(noteText);noteItem.appendChild(copyButton);noteItem.appendChild(deleteButton);// 添加笔记项到笔记列表noteList.appendChild(noteItem);}
}// 当DOM加载完成时执行以下代码
document.addEventListener("DOMContentLoaded", function() {var noteList = [];var noteTextarea = document.getElementById("note-textarea");var addButton = document.getElementById("add-button");var clearButton = document.getElementById("clear-button");// 绑定添加按钮的点击事件addButton.addEventListener("click", function() {var note = noteTextarea.value;if (note) {// 将笔记添加到笔记列表noteList.push(note);// 更新笔记列表chrome.storage.sync.set({notes: noteList}, function() {renderNoteList(noteList);});// 清空笔记输入框noteTextarea.value = "";}});// 保留复制文本的格式信息noteTextarea.addEventListener("paste", function(e) {e.preventDefault();var text = e.clipboardData.getData("text/plain");document.execCommand("insertHTML", false, text);});// 绑定清空按钮的点击事件clearButton.addEventListener("click", function() {// 清空笔记列表noteList = [];// 更新笔记列表chrome.storage.sync.remove("notes", function() {renderNoteList(noteList);});});// 获取存储在Chrome浏览器中的笔记列表chrome.storage.sync.get("notes", function(data) {if (data.notes) {// 如果存在笔记列表，则将其赋值给noteList变量noteList = data.notes;// 渲染笔记列表renderNoteList(noteList);}});// 设置插件图标chrome.browserAction.setIcon({ path: 'icon/icon128.png' });// 设置插件标题chrome.browserAction.setTitle({ title: '瑞萌萌的记事本🗒️' });
});

代码每一部分我都写了注释，具体实现过程可以自己看一下上面的代码

现在我们的记事本插件就完成啦，我们来在浏览器里加载一下插件，看看实地效果怎么样

在这里插入图片描述

在这里插入图片描述

完美！所有需求功能都已实现！

怎么样，经过上面两个 Chrome 插件实战，你有没有觉得 Chrome 插件开发其实没有你想的那么难！

写在最后：

Chrome 插件是一种非常有用的工具，它可以帮助开发者扩展浏览器的功能，提高用户体验

在本文中，我们详细讲解了谷歌浏览器插件的基础知识、运行原理、开发实战等方面

通过本文的学习，你应该已经掌握了如何创建一个谷歌浏览器插件，并且了解如何在浏览器里使用它

希望本文能够帮助你更好地理解 Chrome 插件开发，并激发对 Chrome 插件开发的兴趣，进一步探索和创造更多有趣、实用的插件。加油！

本文所有的代码都放到了https://github.com/KongC-X/chrome_extensions，欢迎自取！

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/news/132532.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

AI：54-基于深度学习的树木种类识别

AI：54-基于深度学习的树木种类识别

🚀 本文选自专栏：AI领域专栏 从基础到实践，深入了解算法、案例和最新趋势。无论你是初学者还是经验丰富的数据科学家，通过案例和项目实践，掌握核心概念和实用技能。每篇案例都包含代码实例，详细讲解供大家学习。 📌📌📌在这个漫长的过程，中途遇到了不少问题，但是…
阅读更多...
318. 最大单词长度乘积

318. 最大单词长度乘积

318. 最大单词长度乘积 难度: 中等 来源: 每日一题 2023.11.06 给你一个字符串数组 words &#xff0c;找出并返回 length(words[i]) * length(words[j]) 的最大值&#xff0c;并且这两个单词不含有公共字母。如果不存在这样的两个单词&#xff0c;返回 0 。 示例 1&…
阅读更多...
Canvas 梦幻树生长动画

Canvas 梦幻树生长动画

canvas可以制作出非常炫酷的动画&#xff0c;以下是一个梦幻树的示例。 效果图 源代码 <!DOCTYPE> <html> <head> <meta http-equiv"Content-Type" content"text/html; charsetutf-8" /> <title>梦幻数生长动画</title&…
阅读更多...
【数据结构】树与二叉树（二）：树的表示C语言：树形表示法、嵌套集合表示法、嵌套括号表示法 、凹入表示法

【数据结构】树与二叉树（二）：树的表示C语言：树形表示法、嵌套集合表示法、嵌套括号表示法 、凹入表示法

文章目录 5.1 树的基本概念5.1.1 树的定义5.1.2 森林的定义5.1.3 树的术语5.1.4 树的表示1&#xff0e;树形表示法2&#xff0e;嵌套集合表示法结构体创建树主函数 3&#xff0e;嵌套括号表示法结构体创建树嵌套括号表示法主函数 4&#xff0e;凹入表示法结构体创建树凹入表示法…
阅读更多...
python调用飞书机器人发送文件

python调用飞书机器人发送文件

当前飞书webhook机器人还不支持发送文件类型的群消息&#xff0c;可以申请创建一个机器人应用来实现群发送文件消息。 创建机器人后&#xff0c;需要开通一系列权限&#xff0c;然后发布。由管理员审核通过后&#xff0c;才可使用。 包括如下的权限&#xff0c;可以获取群的c…
阅读更多...
深度学习服务器（Linux）开发环境搭建教程

深度学习服务器（Linux）开发环境搭建教程

当你拿到一台服务器的使用权时&#xff0c;最头疼的莫过于登陆服务区并配置开发环境。本文将从0开始&#xff0c;讲述一台刚申请的服务器远程登陆并配置开发环境的全过程。希望对你有所帮助 1.登陆服务器 打开MobaXterm软件&#xff0c;创建一个新的Session&#xff0c;选择S…
阅读更多...
图及谱聚类商圈聚类中的应用

图及谱聚类商圈聚类中的应用

背景 在O2O业务场景中&#xff0c;有商圈的概念&#xff0c;商圈是业务运营的单元&#xff0c;有对应的商户BD负责人以及配送运力负责任。这些商圈通常是一定地理围栏构成的区域&#xff0c;区域内包括商户和用户&#xff0c;商圈和商圈之间就通常以道路、河流等围栏进行分隔。…
阅读更多...
MySQL EXPLAIN查看执行计划

MySQL EXPLAIN查看执行计划

MySQL 执⾏计划是 MySQL 查询优化器分析 SQL 查询时⽣成的⼀份详细计划&#xff0c;包括表如何连 接、是否⾛索引、表扫描⾏数等。通过这份执⾏计划&#xff0c;我们可以分析这条 SQL 查询中存在的 问题&#xff08;如是否出现全表扫描&#xff09;&#xff0c;从⽽进⾏针对优化…
阅读更多...
双十一运动健身好物推荐，这几款健身好物一定不要错过！

双十一运动健身好物推荐，这几款健身好物一定不要错过！

双十一购物狂欢节又要到了&#xff0c;又要到买买买的时候了&#xff01;相信有很多想健身的小白还在发愁不知道买啥装备&#xff1f;别急&#xff0c;三年健身达人这就给你们分享我的年度健身好物&#xff01; 第一款&#xff1a;南卡Runner Pro4s骨传导耳机 推荐理由&#…
阅读更多...
VSCode 连接不上 debian 的问题

VSCode 连接不上 debian 的问题

之前一台笔记本上安装了 debian12&#xff0c;当时用 vscode 是可以连接上的&#xff0c;但今天连接突然就失败了&#xff0c;失败信息是这样的&#xff1a; 查看失败信息 因为 debian 是自动获取 ip 地址的&#xff0c;以前能连接上时&#xff0c;ip 地址是 104&#xff0c;然…
阅读更多...
红队专题-新型webshell的研究

红队专题-新型webshell的研究

新型webshell的研究 招募六边形战士队员webshell与MemoryShell内存马新型一句话木马之Java篇 AES加密Class二进制解析友军防护为什么会被拦截SO waf防护规则END 一劳永逸绕过waf实现篇服务端实现 前言&#xff1a;你马没了利用JavaAgent技术发现并清除系统中的内存马介绍安全行…
阅读更多...
centos7安装nginx-阿里云服务器

centos7安装nginx-阿里云服务器

1.背景 2.准备工作步骤 2.1.安装gcc 阿里云服务器一般默认是安装了的 检查是否已安装 gcc -v 出现如下信息表示已安装: 如果没有安装,执行 yum -y install gcc 2.2.安装pcre,pcre-devel yum install -y pcre pcre-devel 2.3.安装zlib yum install -y zlib zlib-devel…
阅读更多...
PS Raw中文增效工具Camera Raw 16

PS Raw中文增效工具Camera Raw 16

Camera Raw 16 for mac&#xff08;PS Raw增效工具&#xff09;的功能特色包括强大的图像调整工具。例如&#xff0c;它提供白平衡、曝光、对比度、饱和度等调整选项&#xff0c;帮助用户优化图像的色彩和细节。此外&#xff0c;Camera Raw 16的界面简洁易用&#xff0c;用户可…
阅读更多...
Python + Selenium，分分钟搭建 Web 自动化测试框架！

Python + Selenium，分分钟搭建 Web 自动化测试框架！

在程序员的世界中&#xff0c;一切重复性的工作&#xff0c;都应该通过程序自动执行。「自动化测试」就是一个最好的例子。 随着互联网应用开发周期越来越短&#xff0c;迭代速度越来越快&#xff0c;只会点点点&#xff0c;不懂开发的手工测试&#xff0c;已经无法满足如今的…
阅读更多...
【小白专用】PHP中的JSON转换操作指南 23.11.06

【小白专用】PHP中的JSON转换操作指南 23.11.06

一、JSON的基础知识 1.1JSON数据格式 JSON数据格式是一组键值对的集合&#xff0c;通过逗号分隔。键值对由“键”和“值”组成&#xff0c;中间使用冒号分隔。JSON数据格式可以嵌套&#xff0c;而且可以使用数组 二、PHP中的JSON函数 JSON的操作需要使用编程语言进行处理&am…
阅读更多...
.NET Core 中插件式开发实现

.NET Core 中插件式开发实现

在 .NET Framework 中&#xff0c;通过AppDomain实现动态加载和卸载程序集的效果&#xff1b;但是.NET Core 仅支持单个默认应用域&#xff0c;那么在.NET Core中如何实现【插件式】开发呢&#xff1f; 一、.NET Core 中 AssemblyLoadContext的使用 1、AssemblyLoadContext简…
阅读更多...
Javaweb之HTML,CSS的详细解析

Javaweb之HTML,CSS的详细解析

2.4 表格标签 场景&#xff1a;在网页中以表格&#xff08;行、列&#xff09;形式整齐展示数据&#xff0c;我们在一些管理类的系统中&#xff0c;会看到数据通常都是以表格的形式呈现出来的&#xff0c;比如&#xff1a;班级表、学生表、课程表、成绩表等等。 标签&#xff…
阅读更多...
输电线路AR可视化巡检降低作业风险

输电线路AR可视化巡检降低作业风险

随着现代工业的快速发展&#xff0c;各行业的一线技术工人要处理的问题越来越复杂&#xff0c;一些工作中棘手的问题迫切需要远端专家的协同处理。但远端专家赶来现场往往面临着专家差旅成本高、设备停机损失大、专业支持滞后、突发故障无法立即解决等痛点。传统的远程协助似乎…
阅读更多...
OFDM同步--载波频率偏差CFO

OFDM同步--载波频率偏差CFO

参考书籍&#xff1a;《MIMO-OFDM无线通信技术及MATLAB实现》 实验图基本都截取自该本书 一、什么是CFO OFDM解调是采用同步检波的方式&#xff0c;需要在接收机使用与发射机相同的载波信号进行向下变换恢复出基带信号。但在实际使用中无法获得完全相同的载波信号&#xff0c;…
阅读更多...
Mysql之多表查询上篇

Mysql之多表查询上篇

Mysql之多表查询上篇 多表查询什么是多表查询笛卡尔积(交叉连接)产生笛卡尔积的条件避免笛卡尔积的方法 多表查询的分类1.等值连接 VS 非等值连接等值连接非等值连接扩展1表的别名扩展2&#xff1a;连接多个表 2.自连接与非自连接扩展3&#xff1a;SQL语法标准 内连接SQL92语法…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023