chrome 插件开发入门

news2024/11/13 11:24:55

1. 介绍

Chrome 插件可用于在谷歌浏览器上控制当前页面的一些操作，可自主控制网页，提升效率。

平常我们可在谷歌应用商店中下载谷歌插件来增强浏览器功能，作为开发者，我们也可以自己开发一个浏览器插件来配合我们的日常学习工作，提升幸福感。

在谷歌插件开发者官网，可以阅读插件开发文档来写插件，插件开发主要是 JavaScript，因此对前端开发者很友好

2. 快速入门

2.1 manifest.json 配置

  1. 新建一个文件夹，就叫 ChromePlugin

  2. 在 ChromePlugin 根目录下新建 manifest.json 文件

manifest 文件是插件的配置文件，只有在该 json 文件中增加了配置项，才允许增加自定义的内容，下面是常见的 json 文件配置

{
    "manifest_version": 3,
    "name": "chromePlugin",
    "version": "1.0.0",
    "description": "我的第一个谷歌插件",
    "icons": {
        "16": "./assets/images/icon16.png",
        "32": "./assets/images/icon32.png",
        "48": "./assets/images/icon48.png",
        "128": "./assets/images/icon128.png"
    },   
}

基本配置：

  • manifest_version：manifest 的版本，是谷歌针对插件开发的版本配置，目前主流都是 3 版本，2 版本已经停止更新
  • name：插件的名称，即插件在谷歌商店以及使用时的名称
  • version：插件的版本
  • description：插件的描述信息
  • icons：描述插件图标的大小和文件路径，目前提供 4 种规格的图片，按照上述配置分别传入不同大小的图片即可，图片地址可在根目录下创建一个 assets文件放置静态资源

其他配置可见下文中的详细解释

到这里，一个 chrome 插件已经可以被加载出来了

打开谷歌浏览器，输入 chrome://extensions ，启用开发者模式(右上角)，再点击「加载已解压的扩展程序」然后找到 ChromePlugin 这个文件夹打开，便可以将这个插件加载进来了，只不过当前插件没有任何功能，所以也是灰色的

Image Image

2.2 action 配置

在 manifest.json 中除了上述的基础配置外，还可配置 action，action 字面上意思就是我们点击右上角的插件图标时的反应，比如打开一个交互面板等等。这种交互的集合就是 action。

首先先在 manifest.json 中配置 action，可见官网针对 action 的配置信息，action配置。

default_popup 可在点击插件图片时弹出一个弹层，弹层的内容就是 default_popup 所对应的 html 文件。

{
    "manifest_version": 3,
    "name": "chromePlugin",
    "version": "1.0.0",
    "description": "我的第一个谷歌插件",
    "icons": {
        "16": "./assets/images/icon16.png",
        "32": "./assets/images/icon32.png",
        "48": "./assets/images/icon48.png",
        "128": "./assets/images/icon128.png"
    },
    "action": {
        "default_title": "Click Me",
        "default_popup": "./action/index.html",
        "default_icon": "./assets/images/icon32.png"
    }    
}

可在根目录下新建一个 action 文件夹，然后再创建一个 index.html 文件，写一个简单的测试文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        .hello {
            width: 100px;
        }
    </style>
</head>
<body>
    <div class="hello">hello simon</div>
  	<script src="./index.js"></script>
</body>
</html>

再次加载该插件，点击插件图标，可在图标下方看到一个弹层，弹层显示的是 html 文件中的内容

Image

如果想写 js 代码，不能直接在 html 中创建一个 script 标签，然后写代码，插件中不允许 html 中有内联脚本，因此需要将脚本代码作为一个单独的文件，再通过 script 标签来引入

2.3 content_scripts

如果我们想给插件添加功能，那就需要再配置 content_scripts(内容脚本)，插件content_scripts。

不是所有的 chrome 的 api 方法都能在 content_scripts 中使用

content_scripts 的特性：

  • 可在页面打开、或页面加载结束、或者页面空闲时注入

  • 共享页面的 dom，因此脚本文件可以操作页面上的 dom

  • JS 隔离，脚本文件的 js 不会影响到页面中的 js，也无法引用页面 js 中的函数或变量

content_scripts 的注入方式也有多种：静态注入、动态注入、编码注入

  • 静态注入，即在 manifest.json 文件中指定 content_scripts 中的 js 文件，比较常用
  • 动态注入，通过 chrome.scripting.registerContentScripts 方法注入
  • 编码注入，通过 chrome.scripting.executeScript

在 manifest.json 中可传入的属性

属性类型描述
matches字符串数组必填，指定将内容脚本注入到哪些网页
css字符串数组可选，要注入到匹配页面的 css 文件
js字符串数组可选，要注入到匹配页面的 js 文件
run_atdocument_start
|document_end
|document_idle		可选，指定何时将脚本注入到网页中，默认值document_idle
document_idle: 页面空闲时
document_end:在dom完成之后，图片等资源加载前注入脚本
document_start:在dom完成前就注入脚本

在 manifest.json 中配置 content_scripts

{
    "manifest_version": 3,
    "name": "chromePlugin",
    "version": "1.0.0",
    "description": "我的第一个谷歌插件",
    "icons": {
        "16": "./assets/images/icon16.png",
        "32": "./assets/images/icon32.png",
        "48": "./assets/images/icon48.png",
        "128": "./assets/images/icon128.png"
    },
    "action": {
        "default_title": "Click Me",
        "default_popup": "./action/index.html",
        "default_icon": "./assets/images/icon32.png"
    }, 
    "content_scripts": [
      {
        "matches": ["https://*/*"],
        "css": ["./src/index.css"],
        "js": ["./src/main.js"]
      }
    ]
}

// 计算图片大小
function getByte(src){
    return fetch(src).then(function(res){
        return res.blob()
      }).then(function(data){
        return (data.size/(1024)).toFixed(2)+'kB';
      })
}
// 在页面上的图片的title属性上显示出来
function showInfo(el,byte){
    const html=`真实尺寸:${el.naturalWidth}*${el.naturalHeight}\n显示尺寸:${el.width}*${el.height}\n存储大小:${byte}`;
    el.title=html;
}
document.addEventListener('mouseover',function(e){
    //移动到图片元素上时、则显示信息
    if(e.target.tagName=='IMG'){
        getByte(e.target.src).then(byte=>{
            showInfo(e.target,byte)
        });
    }
},true)

2.4 background

配置后台脚本，用于处理插件的主要事件的处理，后台脚本指定了属性 service_worker，其实后台脚本是 Service Worker 上处理的。我们插件上的一些主要逻辑的处理都可以放到这个脚本文件中

{
    "manifest_version": 3,
    "name": "chromePlugin",
    "version": "1.0.0",
    "description": "我的第一个谷歌插件",
    "icons": {
        "16": "./assets/images/icon16.png",
        "32": "./assets/images/icon32.png",
        "48": "./assets/images/icon48.png",
        "128": "./assets/images/icon128.png"
    },
    "action": {
        "default_title": "Click Me",
        "default_popup": "./action/index.html",
        "default_icon": "./assets/images/icon32.png"
    }, 
    "content_scripts": [
      {
        "matches": ["https://*/*"],
        "css": ["./src/index.css"],
        "js": ["./src/main.js"]
      }
    ],
  	"background": {
        "service_worker": "./src/server_worker.js"
    }
}

2.5 右键菜单

当我们点击鼠标右键时，可打开一个菜单，其中有复制粘贴等功能，插件也可以自定义右键的菜单，同样需要在 manifest.json 中添加权限配置

{
    "manifest_version": 3,
    "name": "chromePlugin",
    "version": "1.0.0",
    "description": "我的第一个谷歌插件",
    "icons": {
        "16": "./assets/images/icon16.png",
        "32": "./assets/images/icon32.png",
        "48": "./assets/images/icon48.png",
        "128": "./assets/images/icon128.png"
    },
    "action": {
        "default_title": "Click Me",
        "default_popup": "./action/index.html",
        "default_icon": "./assets/images/icon32.png"
    }, 
    "content_scripts": [
      {
        "matches": ["https://*/*"],
        "css": ["./src/index.css"],
        "js": ["./src/main.js"]
      }
    ],
  	"permissions": ["contextMenus"]
}

permissions 是允许增加权限配置，右键菜单就是一种权限配置，开启右键菜单权限后，需要再通过代码新增右键的菜单，这个时候就需要用到上一步的 background 中的配置了

在 service_worker.js 文件中新增一个右键菜单，可使用 chrome.contextMenus.create 方法来创建

chrome.contextMenus.create({
    type: 'normal',
    title: '插件的右键菜单',
    contexts:['all'],
    id:'menu-1'
});

保存后，就能在右键看到一个菜单选项了

2.6 permissions

在上一步创建的右键菜单中，涉及到权限设置，只有在 permissions 添加了对应权限后，才允许去创建菜单，权限除了右键菜单外，还有其他的权限，权限列表，常见的有：

  • audio： chrome.audio，控制连接到系统的音频设备
  • bookmarks： chrome.bookmarks，读取和更改书签的权限
  • clipboardRead：通过 clipboard API 读取剪切板上的数据去粘贴
  • clipboardWrite: 通过 clipboard API 剪切内容并复制到剪切板
  • contextMenus： chrome.contextMenus 控制右键菜单的权限
  • cookies： chrome.cookies 查询和更改 cookies 的权限
  • desktopCapture： chrome.desktopCapture 截取屏幕内容的权限
  • downloads： chrome.downloads 管理下载内容的权限
  • favicon：通过 Favicon 读取网站页面的图标的权限
  • history： chrome.history 读取和更改浏览记录的权限
  • idle： chrome.idle 读取浏览器是否处于空闲状态的权限
  • proxy： chrome.proxy 管理浏览器的代理设置
  • sidePanel：chrome.sidePanel 打开侧边栏的权限
  • storage: chrome.storage 存储、检索和跟踪用户数据的更改的权限
  • system.cpu： chrome.system.cpu，查询 CPU 数据的权限
  • system.memory： chrome.system.memory，获取物理内存的权限

当涉及到权限问题时，就需要先在 permissions 添加了对应权限后，才允许使用 chrome.xxx 再使用对应的功能。

2.7 options

options 就是选项页面，可用于在插件的右键选项中进行配置跳转，也可以在插件管理页面点击详情后打开插件选项，当增加该配置项后，选中插件再右键时，会增加一个「选项」的菜单，点击后会跳转到配置的页面。要展示该选项需要在 manifest.json 中配置 options_ui

{
    "manifest_version": 3,
    "name": "chromePlugin",
    "version": "1.0.0",
    "description": "我的第一个谷歌插件",
    "icons": {
        "16": "./assets/images/icon16.png",
        "32": "./assets/images/icon32.png",
        "48": "./assets/images/icon48.png",
        "128": "./assets/images/icon128.png"
    },
    "action": {
        "default_title": "Click Me",
        "default_popup": "./action/index.html",
        "default_icon": "./assets/images/icon32.png"
    }, 
    "content_scripts": [
      {
        "matches": ["https://*/*"],
        "css": ["./src/index.css"],
        "js": ["./src/main.js"]
      }
    ],
  	"permissions": ["contextMenus"],
  	"options_page": "./options/index.html", // chrome40 之前的写法
  	"options_ui": { // chrome40 之后的写法
      "page": "./options/index.html",
      "chrome_style": true // 添加一些默认样式
    }
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div>这是 options 点击后打开的页面</div>
</body>
</html>

3. 页面通信

在 manifest.json 中可通过不同配置来实现插件的扩展能力，比如 content_scripts、background、options、actions 都有脚本文件，那如何在不同的脚本文件中传递数据呢，比如在 content_scripts 是在网页中运行的，其中的数据如何共享给 background，可以通过页面通信来传递数据。

官网文档

3.1 发送数据

// 从内容脚本 content_scripts 发送数据到扩展页面(background、options、actions)
(async () => {
  const response = await chrome.runtime.sendMessage({greeting: "hello"});
  console.log(response);
})();

// 从扩展页面(background、options、actions) 发送数据到内容脚本(content_scripts)
(async () => {
    // 需要先获取当前的tab页面
  const [tab] = await chrome.tabs.query({active: true, lastFocusedWindow: true});
  const response = await chrome.tabs.sendMessage(tab.id, {greeting: "hello"});
  console.log(response);
})();

不同的发送方，发送数据的方式也是不同的，在使用时需要有所区别

3.2 接收数据

接收数据的方式是一致的，都是通过 chrome.runtime.onMessage

// 接收数据
chrome.runtime.onMessage.addListener(
  (request, sender, sendResponse) => {
    console.log(sender.tab ?
                "from a content script:" + sender.tab.url :
                "from the extension");
    if (request.greeting === "hello")
      //处理完消息后、通知发送方
      sendResponse({farewell: "goodbye"});
  }
);

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

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

相关文章

【开源免费】基于SpringBoot+Vue.JS图书个性化推荐系统（JAVA毕业设计）

【开源免费】基于SpringBoot+Vue.JS图书个性化推荐系统（JAVA毕业设计）

本文项目编号 T 015 &#xff0c;文末自助获取源码 \color{red}{T015&#xff0c;文末自助获取源码} T015&#xff0c;文末自助获取源码 目录 一、系统介绍1.1 业务分析1.2 用例设计1.3 时序设计 二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究…
阅读更多...
linux系统中，计算两个文件的相对路径

linux系统中，计算两个文件的相对路径

realpath --relative-to/home/itheima/smartnic/smartinc/blocks/ruby/seanet_diamond/tb/parser/test_parser_top /home/itheima/smartnic/smartinc/corundum/fpga/lib/eth/lib/axis/rtl/axis_fifo.v 检验方式就是直接在当前路径下&#xff0c;把输出的路径复制一份&#xff0…
阅读更多...
二叉树的层次遍历（10道）

二叉树的层次遍历（10道）

&#xff08;写给未来遗忘的自己&#xff09; 102.二叉数的层序遍历&#xff08;从上到下&#xff09; 题目&#xff1a; 代码&#xff1a; class Solution { public: vector<vector<int>> levelOrder(TreeNode* root) { vector<vector<int>> r…
阅读更多...
H桥电路及其应用

H桥电路及其应用

一、H桥电路简介 H桥是一种电机驱动电路&#xff0c;通过四个开关元件构成“H”型的电流路径结构。该电路能够控制负载&#xff08;如直流电机&#xff09;的电流方向&#xff0c;从而实现电机正反转和速度调节。H桥广泛应用于需要方向控制的场合&#xff0c;尤其是机器人驱动…
阅读更多...
Java小白一文讲清Java中集合相关的知识点（六）

Java小白一文讲清Java中集合相关的知识点（六）

接上篇 添加了第二个元素“php”字符串后&#xff0c;debug查看此时的table的空间具体存储情况如下&#xff1a; 于是其将第二个待存放的元素“php”映射放入了9号索引处&#xff1b;接下来我们分析添加第三个重复元素“java”再次尝试放进去时&#xff0c;底层发生的一系列动…
阅读更多...
13款常用AI编程工具

13款常用AI编程工具

AI编程工具的选择和使用&#xff0c;主要取决于具体的项目需求、编程语言、以及AI任务的类型&#xff08;如机器学习、自然语言处理、计算机视觉等&#xff09;。下面是一些广泛使用的AI编程工具合集&#xff0c;涵盖了从开发、训练、到部署的各个环节&#xff1a; Jupyter Not…
阅读更多...
Signac R｜如何合并多个 Seurat 对象 (2)

Signac R｜如何合并多个 Seurat 对象 (2)

引言 在本文中演示了如何合并包含单细胞染色质数据的多个 Seurat 对象。为了进行演示&#xff0c;将使用 10x Genomics 提供的四个 scATAC-seq PBMC 数据集&#xff1a; 500-cell PBMC 1k-cell PBMC 5k-cell PBMC 10k-cell PBMC 构建数据对象 接下来&#xff0c;将利用已经量化…
阅读更多...
【计算机网络】socket编程 几个网络命令

【计算机网络】socket编程 几个网络命令

目录 理解端口号理解源ip地址与目的IP地址认识端口号理解端口号与pid关系 理解socket编程理解网络字节序socket编程接口常见的API创建socket套接字bind绑定套接字listen开始监听accept接收请求connect建立连接recvfrom接收数据sendto发送数据 sockaddr结构sockaddr底层结构sock…
阅读更多...
【C++】中动态链接库和静态链接库的区别

【C++】中动态链接库和静态链接库的区别

1. C 中动态链接库和静态链接库的区别 在C编程中&#xff0c;动态链接库&#xff08;Dynamic Link Library, DLL&#xff09;和静态链接库&#xff08;Static Library&#xff09;都是用来组织和重用代码的方法&#xff0c;但它们之间有几个重要的区别&#xff1a; 1.1 动态链…
阅读更多...
【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项

【vite-plugin-vue-layouts】关于 vue-layouts 布局插件的使用和注意事项

环境&#xff1a;vue3 vuetify3 unplugin-vue-router 是怎么创建这个项目的&#xff1a; 选择它推荐的设置&#xff08;Recommend&#xff09; 问题描述 代码结构 # App.vue <template><v-app> <AppNavigator /> <RouterView /><AppFooter />…
阅读更多...
多语言融合，全栈操控Vue + Spring Boot + SQL Server + Python部署到Windows服务器！

多语言融合，全栈操控Vue + Spring Boot + SQL Server + Python部署到Windows服务器！

将一个包含Vue前端、Spring Boot后端、SQL Server数据库和Python脚本的项目部署到Windows服务器上涉及多个步骤。以下是一个详细的指南&#xff0c;帮助您完成这一过程。 前言 你是否正在寻找将Vue, Spring Boot, SQL Server和Python完美融合&#xff0c;并顺利部署到Windows服…
阅读更多...
实时渲染技术的崛起：游戏与实时交互的新篇章

实时渲染技术的崛起：游戏与实时交互的新篇章

随着科技的飞速发展&#xff0c;实时渲染技术正逐步成为游戏与实时交互领域的重要驱动力。这一技术的崛起不仅极大地提升了用户体验&#xff0c;还推动了游戏、虚拟现实&#xff08;VR&#xff09;、增强现实&#xff08;AR&#xff09;等多个行业的创新发展。实时渲染技术开启…
阅读更多...
PHP轻量级高性能HTTP服务框架 - webman

PHP轻量级高性能HTTP服务框架 - webman

摘要 webman 是一款基于 workerman 开发的高性能 HTTP 服务框架。webman 用于替代传统的 php-fpm 架构&#xff0c;提供超高性能可扩展的 HTTP 服务。你可以用 webman 开发网站&#xff0c;也可以开发 HTTP 接口或者微服务。 除此之外&#xff0c;webman 还支持自定义进程&am…
阅读更多...
log4j 同一线程隔离classloader下MDC信息不同问题解决 ThreadLocal问题分析

log4j 同一线程隔离classloader下MDC信息不同问题解决 ThreadLocal问题分析

最近遇到日志文件记录错误的问题。一个任务的日志信息会被莫名的拆分到两个不同目录中。且有一个目录还是曾经执行过的任务的目录。经过分析&#xff0c;首先怀疑的是MDC没有清理的问题&#xff0c;这也是最直观的问题。因为任务是在线程池(fixedThreadPool)中运行的。由于线程…
阅读更多...
C#游戏服务器开发框架设计与架构详解

C#游戏服务器开发框架设计与架构详解

我一直在思考一个问题&#xff0c;什么样的服务端框架最好用&#xff0c;最适合? 经过这些年的项目经验&#xff0c;其实最好用&#xff0c;最适合的游戏服务端框架就是自己结合公司项目需求,团队特点与技术能力,自己整合的游戏框架是最好用的。 很多新手会担心自己整合的框架…
阅读更多...
Java项目: 基于SpringBoot+mysql+maven房屋租赁系统(含源码+数据库+毕业论文)

Java项目: 基于SpringBoot+mysql+maven房屋租赁系统(含源码+数据库+毕业论文)

一、项目简介 本项目是一套基于SpringBootmybatismaven房屋租赁系统 包含&#xff1a;项目源码、数据库脚本等&#xff0c;该项目附带全部源码可作为毕设使用。 项目都经过严格调试&#xff0c;eclipse或者idea 确保可以运行&#xff01; 该系统功能完善、界面美观、操作简单、…
阅读更多...
XSS 漏洞检测与利用全解析：守护网络安全的关键洞察

XSS 漏洞检测与利用全解析：守护网络安全的关键洞察

在网络安全领域&#xff0c;跨站脚本攻击&#xff08;XSS&#xff09;是一种常见的安全漏洞。XSS 漏洞可以让攻击者在受害者的浏览器中执行恶意脚本&#xff0c;从而窃取用户的敏感信息、篡改页面内容或者进行其他恶意操作。本文将介绍 XSS 漏洞的检测和利用方法。 一、XSS 漏洞…
阅读更多...
DYNA4技术分享系列：DYNA4在底盘域的应用

DYNA4技术分享系列：DYNA4在底盘域的应用

在汽车行业波澜壮阔的电动化、数字化与智能化浪潮中&#xff0c;底盘技术正经历着前所未有的蜕变&#xff0c;从传统的坚固基石跃升为集电动驱动与智能操控于一体的核心灵魂。智能底盘控制系统&#xff0c;正引领着汽车底盘技术迈向新时代的巅峰&#xff0c;其智能化程度已成为…
阅读更多...
Rust的常数、作用域与所有权

Rust的常数、作用域与所有权

【图书介绍】《Rust编程与项目实战》-CSDN博客 《Rust编程与项目实战》(朱文伟&#xff0c;李建英)【摘要 书评 试读】- 京东图书 (jd.com) Rust到底值不值得学&#xff0c;之一 -CSDN博客 Rust到底值不值得学&#xff0c;之二-CSDN博客 Rust的数据类型-CSDN博客 3.7 常…
阅读更多...
Linux学习笔记12---主频和时钟配置实验

Linux学习笔记12---主频和时钟配置实验

本章学习 I.MX6U 的时钟系统&#xff0c;学习如何配置 I.MX6U 的 系统时钟和其他的外设时钟&#xff0c;使其工作频率为 528MHz &#xff0c;其他的外设时钟源都工作在 NXP 推荐的频率。 1、MX6U 时钟系统详解 I.MX6U 的系统主频为 528MHz&#xff0c;有些型号可以跑到 69…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023