快速开发 Chrome插件

什么是 Chrome 插件

Chrome 插件程序是一种用于增强 Google Chrome 浏览器功能的小型软件应用程序。它们可以帮助用户自定义浏览体验、添加新功能、集成外部服务以及自动化任务等。扩展程序使用 HTML、CSS 和 JavaScript 编写,利用 Chrome 提供的 API 来与浏览器及其内容进行交互。

在平时的开发工作中,可以通过开发一些小的功能插件来提高我们的工作效率。开发 Chrome 插件非常简单,一个配置文件和几个 JS 就可以完成,本文将实现一个简单的插件,点击按钮修改百度输入框背景色。插件主要包括一下两个文件

  • manifest.json:插件定义
  • default_popup: 入口文件

添加manifest.json

manifest.json 文件插件的定义文件

{
  "manifest_version": 3,
  "name": "Highlight Input Box",
  "version": "1.0",
  "description": "A simple Chrome extension to highlight input boxes on the current page",
  "action": {
    "default_popup": "popup.html",
    "default_icon": {
      "16": "icon.png",
      "48": "icon.png",
      "128": "icon.png"
    }
  },
  "permissions": [
    "activeTab",
    "scripting"
  ]
}

入口页面 popup.html

弹出页面是指当点击插件时弹出的 HTML 页面,页面引入一个 JS 并添加了一个按钮。


<!DOCTYPE html>
<html>
<head>
  <title>Highlight Input Box</title>
  <script src="popup.js"></script>
</head>
<body>
  <button id="highlightInputs">Highlight Input Boxes</button>
</body>
</html>

创建 popup.js

获取当前活动窗口并执行脚本:

document.addEventListener('DOMContentLoaded', function() {
  const button = document.getElementById('highlightInputs');
  console.log(button)
  if (button) {
    button.addEventListener('click', function() {
      // 获取当前活动的标签页并执行内容脚本
      chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {
        chrome.scripting.executeScript({
          target: { tabId: tabs[0].id },
          files: ['contentScript.js']
        }, () => {
          if (chrome.runtime.lastError) {
            console.error(chrome.runtime.lastError);
          } else {
            console.log('Content script injected');
          }
        });
      });
    });
  } else {
    console.error('Button with id "highlightInputs" not found.');
  }
});

创建contentScript.js

contentScript.js 主要是修改背景的逻辑:

// contentScript.js
function highlightInputBoxes() {
  const inputBoxes = document.querySelectorAll('input[type="text"], input[type="search"], textarea');
  inputBoxes.forEach(input => {
    input.style.backgroundColor = 'yellow';
  });
}

// 执行高亮函数
highlightInputBoxes();

运行插件

进入扩展管理,打开开发者模式并导入刚刚创建的目录
在这里插入图片描述
点击按钮并查看运行效果
在这里插入图片描述
打开监控弹窗,可以查看插件的 log 日志
在这里插入图片描述

总结

开发简单的 Chrome 插件速度很快,定义好配置文件和入口文件,基本框架就完成了,之后就是开发插件的逻辑了。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

昔日辉煌不再,PHP老矣,尚能饭否?

导语 | 近期 TIOBE 最新指数显示&#xff0c;PHP 的流行度降至了历史最低&#xff0c;排在第 17 名&#xff0c;同时&#xff0c;在年度 Stack Overflow 开发者调查报告中&#xff0c;PHP 在开发者中的受欢迎程度已经从之前的约 30% 萎缩至现在的 18%。“PHP 是世界上最好的语言…

JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据

JS Navigator.sendBeacon 可靠的、异步地向服务器发送数据 前言 我们在上一篇页面访问&页面关闭数据上报的文章中使用了 sendBeacon 方法用来发送数据&#xff0c;上篇文章是简单使用&#xff0c;那本篇文章我们就详细了解下这个东西。 一、Navigator.sendBeacon 是什么…

算法2:滑动窗口(上)

文章目录 长度最小子数组无重复字符的最长子串[最大连续 1 的个数III](https://leetcode.cn/problems/max-consecutive-ones-iii/description/)将x减到0的最小操作数 长度最小子数组 class Solution { public:int minSubArrayLen(int target, vector<int>& nums) {in…

SAP---成本中心采购跟消耗性采购的区别

1.常规库存采购业务的说明&#xff1a; 1.从业务层面分析&#xff0c;企业的常规库存物料采购是&#xff1a; 采购部门下采购订单后&#xff0c;供应商送货&#xff0c;当货物到厂后&#xff0c;由库管员执行收货操作&#xff0c;先将货物收到仓库中&#xff0c;再由各个需求…

APP广告变现,开启你的APP盈利新纪元

随着科技的飞速发展&#xff0c;智能手机已经成为了我们生活中不可或缺的一部分。而在这个数字化时代&#xff0c;APP应用更是如雨后春笋般层出不穷&#xff0c;为我们的生活带来了极大的便利。然而&#xff0c;对于APP开发者来说&#xff0c;如何在激烈的市场竞争中脱颖而出&a…

智能的PHP开发工具PhpStorm v2024.1全新发布——支持PHPUnit 11.0

PhpStorm是一个轻量级且便捷的PHP IDE&#xff0c;其旨在提高用户效率&#xff0c;可深刻理解用户的编码&#xff0c;提供智能代码补全&#xff0c;快速导航以及即时错误检查。可随时帮助用户对其编码进行调整&#xff0c;运行单元测试或者提供可视化debug功能。 立即获取PhpS…

Docker Portainer使用

Portainer是什么 Docker Portainer是一个轻量级的 Web UI 管理界面,可以用来管理Docker环境。它提供了一个直观的控制台,用户可以通过它来管理Docker主机、容器、网络、卷等Docker资源。 Portainer的主要功能和特点包括: 容器管理:可以查看、启动、停止、删除容器,以及查看容器…

SpringBoot中使用AOP实现日志记录功能

目录 一、SpringBoot框架介绍 二、什么是 AOP 三、日志记录的必要性 四、SpringBoot中如何使用AOP实现日志记录功能 一、SpringBoot框架介绍 SpringBoot是一个开源的Java开发框架&#xff0c;旨在简化基于Spring框架的应用程序的开发。它提供了一套开箱即用的工具&#xf…

WebGL的医学培训软件开发

开发基于WebGL的医学培训软件是一项复杂且技术性强的任务&#xff0c;需要结合医学专业知识和计算机图形学技术。以下是详细的开发流程和关键步骤。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#xff0c;欢迎交流合作。 1.需求分析与定义 目标用户&#xf…

【C语言】——函数栈帧的创建与销毁

函数栈帧的创建与销毁 本文主要讲解了函数调用过程中其栈帧的创建与销毁&#xff0c;内容干货较多&#xff0c;希望大家认真品味。 使用C语言进行函数调用时&#xff0c;是否会有很多疑问&#xff1a; 1.局部变量是如何创建的&#xff1f; 2.局部变量在未初始化的情况下&#x…

从ES5迈向ES6:探索 JavaScript 新增声明命令与解构赋值的魅力

个人主页&#xff1a;学习前端的小z 个人专栏&#xff1a;JavaScript 精粹 本专栏旨在分享记录每日学习的前端知识和学习笔记的归纳总结&#xff0c;欢迎大家在评论区交流讨论&#xff01; ES5、ES6介绍 文章目录 &#x1f4af;声明命令 let、const&#x1f35f;1 let声明符&a…

代码生成器(一)---项目概述以及项目初始化

目录 一、项目概述 1.代码生成器解决的问题 2.代码生成器的实际应用 3.本地代码生成器的业务流程 4.实现思路 二、项目初始化 项目Gitee地址&#xff1a;Code-Generator: 代码生成器&#xff01;&#xff01;&#xff01; 一、项目概述 1.代码生成器解决的问题 代码生成器本…

使用vue和element_ui搭建后端页面

使用vue和element_ui搭建后台管理页面 效果顶部和左侧内容固定&#xff0c;中间内容滚动 <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"&g…

地理信息系统(GIS)软件开发

地理信息系统&#xff08;GIS&#xff09;软件开发是一项复杂且系统性很强的工程&#xff0c;涉及空间数据的采集、管理、分析和展示。以下是一个典型的GIS软件开发流程&#xff0c;包括各个步骤的详细说明。北京木奇移动技术有限公司&#xff0c;专业的软件外包开发公司&#…

2024电工杯B题食谱评价与优化模型思路代码论文分析

2024年电工杯数学建模竞赛B题论文和代码已完成&#xff0c;代码为B题全部问题的代码&#xff0c;论文包括摘要、问题重述、问题分析、模型假设、符号说明、模型的建立和求解&#xff08;问题1模型的建立和求解、问题2模型的建立和求解、问题3模型的建立和求解&#xff09;、模型…

【STL专题】深入探索C++之std::string:不止于字符串【万字详解】

欢迎来到CILMY23的博客 &#x1f3c6;本篇主题为&#xff1a;深入探索C之std::string&#xff1a;不止于字符串 &#x1f3c6;个人主页&#xff1a;CILMY23-CSDN博客 &#x1f3c6;系列专栏&#xff1a;Python | C | C语言 | 数据结构与算法 | 贪心算法 | Linux &#x1f3…

Nginx - 一键实现Nginx的快速安装和优化配置

文章目录 思路实现二次优化 思路 初始化下载工具目录并下载依赖&#xff1a; 创建临时目录 /tmp/tools。下载 OpenSSL、PCRE 和 Zlib 的压缩包。解压这些依赖包到指定目录。 设置NGINX的用户和脚本&#xff1a; 添加 nginx 用户。创建目录和启动、停止、重载NGINX的脚本。 安装…

如何异地组网添加摄像机?

本文将介绍如何使用天联技术实现异地组网添加摄像机&#xff0c;并保障数据的安全性。 安防摄像机的应用愈发广泛&#xff0c;无论是家庭安防还是企业监控&#xff0c;摄像机都扮演着重要角色。在一些特殊场合或者特殊需求下&#xff0c;我们需要将摄像机添加到异地网络中进行监…

Web开发——HTMLCSS

1、概述 Web开发分前端开发和后端开发&#xff0c;前端开发负责展示数据&#xff0c;后端开发负责处理数据。 HTML&CSS是浏览器数据展示相关的内容。 1&#xff09;网页的组成部分 文字、图片、音频、视频、超链接、表格等等 2&#xff09;网页背后的本质 程序员写的前端…

神经网络基础结构

1. 神经网络 在神经网络中&#xff0c;每个神经元都有一个与之关联的权重和偏置&#xff0c;它们用于计算神经元的输出值。神经元接收来自上一层神经元的输入&#xff0c;并将这些输入与权重相乘并加上偏置&#xff0c;然后通过激活函数进行非线性处理&#xff0c;最终产生输出…