Chrome插件开发入门:手把手教你创建第一个扩展

问题背景

最近,客户发布了一个新的任务 —— 开发一个Chrome插件。之前没有这方面的开发经验,准备想学习一下这块的内容,我发现网上的大多数视频都是几年前的,开发版本都是基于MV2,当前谷歌已经开始使用MV3(Manifest V3)版本了,我决定利用这次机会,从零开始,探索并记录整个开发过程。

我的第一个目标是创建一个简单的Chrome插件,当用户点击工具栏上的图标时,如果插件处于激活状态,则在图标下方显示蓝底白字的“ON”。此外,当激活时,https://juejin.cn/* 网站上将新增一个导出按钮。

在开始编码之前,我强烈推荐大家访问 Chrome 开发者文档,这里提供了详尽的入门指南和最佳实践

解决方案

创建项目结构

首先,您需要创建一个项目文件夹,例如命名为hello-chrome,在这个文件夹中,我们将创建以下基础文件:

  • manifest.json:插件配置文件,描述插件的基本信息和权限。
  • background.js:插件的后台脚本,用于管理插件的状态和监听事件。
  • popup.html:点击插件图标时展示的弹窗页面。(当前示例不涉及这个文件)
  • popup.js:与popup.html页面相关联的脚本文件。(当前示例不涉及这个文件)
  • content.js:内容脚本,用于在特定网页中执行代码。(当前示例不涉及这个文件)
  • 图标文件:图标资源文件,用于展示插件图标。

现在让我们深入到每个文件的详细内容。

配置 manifest.json

manifest.json 是插件的核心,定义了插件的名称、版本、描述、权限、图标等信息。以下是本次示例插件开发的配置,这个配置文件定义了插件的基本信息和所需权限,同时指明了在用户点击插件图标时需要显示的弹出页面和图标资源

{"manifest_version": 3,"name": "Hello Chrome Extension","version": "1.0","description": "A simple Chrome extension for juejin.cn","permissions": ["activeTab", "storage"],"host_permissions": ["https://juejin.cn/*"],"background": {"service_worker": "background.js"},"action": {"default_icon": {"16": "images/icon16.png","48": "images/icon48.png","128": "images/icon128.png"}},"icons": {"16": "images/icon16.png","48": "images/icon48.png","128": "images/icon128.png"}
}

实现 background.js

background.js文件负责监听用户的操作并响应插件的状态变化。比如监听浏览器事件、管理插件状态等。

  • 示例内容:

// 定义一个变量来跟踪 "ON" 状态
let isOn = false// 监听工具栏图标点击事件
chrome.action.onClicked.addListener(async (tab) => {// 切换 isOn 状态isOn = !isOnif (isOn) {// 设置徽章文本为 "ON"chrome.action.setBadgeText({ text: 'ON' })// 设置徽章背景颜色为蓝色chrome.action.setBadgeBackgroundColor({ color: 'blue' })// 调用 addExportButton 函数在页面上添加导出按钮chrome.scripting.executeScript({target: { tabId: tab.id },function: addExportButton})}} else {// 清除徽章文本chrome.action.setBadgeText({ text: '' })// 检查当前标签页的 URL 是否包含 'https://juejin.cn/'if (tab.url.includes('https://juejin.cn/')) {// 调用 removeExportButton 函数从页面上移除导出按钮chrome.scripting.executeScript({target: { tabId: tab.id },function: removeExportButton})}}
})// 定义一个函数在页面右下角添加导出按钮
function addExportButton() {const button = document.createElement('button')button.textContent = '导出'button.id = 'exportButton'button.style.position = 'fixed'button.style.bottom = '10px'button.style.right = '10px'button.style.zIndex = 1000document.body.appendChild(button)
}// 定义一个函数从页面移除导出按钮
function removeExportButton() {const button = document.getElementById('exportButton')if (button) {button.remove()}
}

在上述代码中,当用户点击工具栏图标时,chrome.action.onClicked.addListener 事件监听器触发。根据 isOn 状态,设置或清除徽章文本,并在 https://juejin.cn/ 网站上添加或移除导出按钮。chrome.scripting.executeScript 用于在当前活动的标签页中执行 addExportButtonremoveExportButton 函数,以便动态地修改页面内容。

Chrome API 函数说明

  1. chrome.action.onClicked.addListener:用于监听工具栏图标的点击事件。当用户点击扩展程序的图标时,会触发提供的回调函数。参考文档:chrome.action.onClicked

  2. chrome.action.setBadgeText:用于设置工具栏图标上的徽章文本。徽章通常用于显示状态或通知。参考文档:chrome.action.setBadgeText

  3. chrome.action.setBadgeBackgroundColor:用于设置工具栏图标徽章的背景颜色。参考文档:chrome.action.setBadgeBackgroundColor

  4. chrome.scripting.executeScript:用于向指定的标签页注入 JavaScript 脚本。可以注入单个函数或文件中的脚本。参考文档:chrome.scripting.executeScript

加载和测试插件

最后,加载插件进行测试:

  1. 打开 Chrome 浏览器,访问 chrome://extensions/
  2. 开启“开发者模式”。
  3. 点击“加载已解压的扩展程序”,选择你的项目文件夹。

现在,当你点击插件图标时,应该能够看到“ON”的提示,并且在网站上看到新增的导出按钮。这个例子也只能说是体验一些chrome插件的快乐,这里面也有bug,比如刷新一些网页导出的按钮就消失了,大家猜猜这是为什么呢?

image.png

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

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

相关文章

Elasticsearch如何聚合查询多个统计值,如何嵌套聚合?并相互引用,统计索引中某一个字段的空值率?语法是怎么样的

文章目录 Elasticsearch聚合查询说明空值率查询DSL Elasticsearch聚合基础知识扩展Elasticsearch聚合概念Script 用法Elasticsearch聚合查询语法指标聚合(Metric Aggregations)桶聚合(Bucket Aggregations)矩阵聚合(Ma…

代码随想录第28天|回溯算法

491. 非递减子序列 思路: 不可以排序, 否则会改变元素的顺序对收获的结果有要求, num.size() > 2, 且 num[i - 1] < num[i]需要进行去重, 不能使用排序后的方法去重每一层可用 unordered_set 去重组合问题, for 遍历需要标记起始位置 bug: 一定要先判断元素是否重复, …

RabbitMQ实践——在Ubuntu上安装并启用管理后台

大纲 环境安装启动管理后台 RabbitMQ是一款功能强大、灵活可靠的消息代理软件&#xff0c;为分布式系统中的通信问题提供了优秀的解决方案。无论是在大规模数据处理、实时分析还是微服务架构中&#xff0c;RabbitMQ都能发挥出色的性能&#xff0c;帮助开发者构建高效、稳定的系…

Microsoft AI Day:支持开放合作,普及技术应用,推进行业企业智慧化创新

微软在北京举办以“共创AI创新&#xff0c;智启无限可能”为主题的Microsoft AI Day活动&#xff0c;集中展示了在生成式智能技术加速发展普及的过程中&#xff0c;微软取得的最新技术突破与进展&#xff0c;并同步更新了在Microsoft Build 2024全球开发者大会上发布的一系列Az…

基于Java的高校校园点餐系统

开头语&#xff1a; 你好&#xff0c;我是计算机专业的学长&#xff0c;如果你对高校校园点餐系统感兴趣或有相关开发需求&#xff0c;欢迎联系我。 开发语言&#xff1a;Java 数据库&#xff1a;MySQL 技术&#xff1a;JSP技术 工具&#xff1a;Eclipse、Tomcat 系统展示…

安享智慧理财金融测试项目

1. 项目介绍 安享智慧理财金融系统是基于 Java 语言开发&#xff0c;集 PC 端、APP 端、WAP 端为一体的 P2P&#xff08;个人对个人&#xff09;的借贷系统&#xff0c;提供了完整的借款和投资功能。 web用户端 说明&#xff1a;PC 网站&#xff0c;供借款人和投资人使用功能…

PySide(PyQt)的特殊按钮(互锁、自锁、独占模式)

界面图: Qt Designer中创建窗口,放置一个QGroupBox,命名为btnStation,这就是自定义的按钮站,按钮站里放置6个按钮。自锁按钮相当于电器中的自锁功能的按钮,每按一次状态反转并保持不变。独占按钮也是自锁功能的按钮,不同的是当独占按钮为ON时,其余所有按钮均被置为OFF…

大模型“诸神之战”,落地才是赛点

ChatGPT 诞生已经快一年&#xff0c;你还在与它对话吗&#xff1f; 有的人用来写报告、改代码&#xff0c;让它成为得力帮手&#xff1b;有的人却只是“调戏”个两三回&#xff0c;让它创作诗歌或故事&#xff0c;便不再“宠幸”。 根据网站分析工具 SimilarWeb 的数据&#…

基于VSCode和MinGW-w64搭建LVGL模拟开发环境

目录 概述 1 运行环境 1.1 版本信息 1.2 软件安装 1.2.1 下载安装VS Code 1.2.1.1 下载软件 1.2.1.1 安装软件 1.2.2 下载安装MinGW-w64 1.2.2.1 下载软件 1.2.2.2 安装软件 1.2.3 下载安装SDL 1.2.3.1 下载软件 ​1.2.3.2 安装软件 1.2.4 下载安装CMake 1.2.4.…

c#音乐播放器续(联网下载)

音乐播放器 0.前言1.关于本地音乐播放2.使用iTunes Search API进行联网下载歌曲2.1 控件2.2 函数实现2.2.1 控件2&#xff1a;搜索歌曲2.2.2 控件3&#xff1a;下载歌曲 2.3 主界面 3.拓展 0.前言 书接上文&#xff0c;我们已经实现了一个能够播放本地音乐的音乐播放器&#x…

计算机专业毕设-在线商城系统

1 项目介绍 在线商城系统&#xff0c;后端java语言&#xff0c;springboot&#xff0c;SSM框架。前端thymeleaf&#xff0c;前后端不分离。本项目已经隐去作者信息&#xff0c;所有代码文件均没有创建人和创建时间&#xff0c;可以放心使用。 系统用户分为两类&#xff0c;管理…

Spring-JdbcTemplate

了解知道即可 JdbcTemplate环境配置 先加入依赖&#xff1a; 在pom.xml中要引入spring和mysql的依赖&#xff1a; <!--仓库和依赖--><repositories><repository><id>spring-milestones</id><name>Spring Milestones</name><ur…

逻辑蕴含、函数依赖集的闭包、Armstrong公理、属性集闭包

一、引言 Armstrong公理-从给定的函数依赖集得到关系模式的完整依赖集 二、逻辑蕴含 1、定义 设F是关系模式R上的函数依赖集&#xff0c;X、Y是R的属性子集&#xff0c;对于R的每个满足F的关系实例r&#xff0c;若函数 依赖都成立&#xff0c;则称F逻辑蕴含。 记为&#…

2021 hnust 湖科大 C语言课程设计报告+代码+流程图源文件+指导书

2021 hnust 湖科大 C语言课程设计报告代码流程图源文件指导书 目录 报告 下载链接 https://pan.baidu.com/s/14NFsDbT3iS-a-_7l0N5Ulg?pwd1111

LUA移植到STM32F4,移植REPL,通过RTT Viewer交互

概述 站内移植LUA多数是使用C函数调用LUA&#xff0c;并没有移植REPL交互端口 本文将REPL也移植进去&#xff0c;做了简单的适配 LUA源码使用标准C库函数&#xff0c;如fgets&#xff0c;fwrite等&#xff0c;在嵌入式环境中要使用fgets&#xff0c;fwrite等C库函数&#xff…

用c语言实现通讯录

目录 静态简易通讯录 代码&#xff1a; 功能模块展示&#xff1a; 设计思路&#xff1a; 动态简易通讯录&#xff08;本质顺序表&#xff09; 代码&#xff1a; 扩容模块展示&#xff1a; 设计思路&#xff1a; 文件版本通讯录 代码&#xff1a; 文件模块展示&#x…

JAVA开发 PDF文件生成表格,表格根据内容自动调整高度

1、展示效果 2、相关功能实现 JAVA开发 使用Apache PDFBox库生成PDF文件&#xff0c;绘制表格 3、实现代码 import org.apache.pdfbox.pdmodel.PDDocument; import org.apache.pdfbox.pdmodel.PDPage; import org.apache.pdfbox.pdmodel.PDPageContentStream; import org.ap…

傲星一个在线工具箱源码附搭建教程

傲星工具箱源码是一款功能强大的在线工具箱程序&#xff0c;您可以通过安装扩展来增强其功能。同时&#xff0c;该程序还提供了插件模板的功能&#xff0c;让您可以将其作为网页导航使用。 1.PHP版本需不低于7.2.5。 2.Mysql版本需不低于5.7。 3.需要安装fileinfo扩展。 4.…

Python | 使用Matplotlib生成子图的示例

数据可视化在分析和解释数据的过程中起着举足轻重的作用。Python中的Matplotlib库提供了一个强大的工具包&#xff0c;用于制作各种图表和图表。一个突出的功能是它能够在单个图中生成子图&#xff0c;为以组织良好和结构化的方式呈现数据提供了有价值的工具。使用子图可以同时…

北京崇文门中医医院贾英才:中医传承的践行者

贾英才&#xff0c;一位在北京崇文门中医医院出诊的杰出中医执业医师&#xff0c;在中医领域深耕近三十载&#xff0c;以其精湛的医术和独特的诊疗验方体系&#xff0c;赢得了广大患者的信赖与认可。 贾英才自幼便深受家学熏陶&#xff0c;中医的种子早早在他心中扎根。成长于中…