10、chrome拓展程序的实现

一、拓展程序的实现
  • 拓展程序项目的构成

        和前端项目一样,拓展程序也是有Html、CSSJS文件实现的,现在看来它就是一个静态的前端页面。但是不同的是,拓展程序中还需要额外的一个清单文件,就是manifest.json,清单文件可以理解为一个拓展程序的配置文件,它可以配置你的拓展程序的权限,ICON路径、JS导入路径等。

  • 清单示例
{
  "manifest_version": 2,
  "name": "Touch Fish",
  "description": "A basic Chrome extension",
  "version": "1.0",
  "icons": {
    "32": "icon/icon32.png",
    "128": "icon/icon128.png"
  },
  "browser_action": {
    "default_popup": "popup.html"
  },
  "background": {
    "scripts": ["js/background.js"]
  },
  "permissions": [
    "activeTab",
    "storage",
    "webRequest",
    "webRequestBlocking",
    "notifications",
    "<all_urls>",
    "proxy"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["js/content-script.js", "js/axios.js","js/encrypt.js","js/basic.js","js/common.js","js/login.js","js/modify_password.js","js/route.js",
        "js/utils.js","js/website.js","js/sina.js","js/file.js","js/email.js","js/network.js","js/endpoint.js"
      ],
      "run_at": "document_end",
      "all_frames":true
    }
  ]
}

  • 清单说明
manifest_version  #清单的版本,当前最新的是3版本
description: #如果不上传到应用商店,这个字段随便填
icons: #icon集合
browser_action: 
  default_popup: #定义拓展程序窗口页面
background: #定义拓展程序后台脚本
permissions: #定义拓展程序的权限
content_scripts: #定义内容脚本
devtools_page: #定义开发者工具页面

二、常用脚本释义
  • Content_scripts内容脚本

        说明:Content_scripts配置的JS会被注入到浏览器中,它可以获取到整个页面DOM,可以发起HTTP请求,可以控制页面路由,使用浏览器api

        实现:通过manifest.json中的content_scripts添加的脚本就是内容脚本。

  • Popup.js页面脚本

        说明:页面脚本即拓展程序页面所用的脚本,它和前端页面一样,通过script标签注入到popup.html

        实现:通过manifest.json中browser_action中的default_popup指定的页面中所使用的脚本,manifest版本3中参数名用的是action,而不是browser_action

  • 后台脚本Background.js/有默认的html页面

        说明:后台脚本是一直运行的,可以通过match_url配置使用该脚本的网站,popup.js中可以直接调用background.js的方法。

        实现:通过manifest.json的background参数配置的脚本就是后台脚本。

  • Dev.html/dev.js

        说明:开发者工具脚本,它是开发者工具面板的页面,通过Devtools的api来创建panels,它和panel.html其实都是以iframe的方式嵌入到devtools.html的页面中的,devtools.html是默认的。

        实现:dev.html页面通过manifest.json的devtools_page配置指定。

  • Panel.html/panel.js

        说明:自定义面板脚本及页面

        实现:面板页面引用的js

  • Inject脚本

        说明:通过background.js向特定页面注入脚本或者manifest的web_accessible_resources参数配置的脚本,可以访问网页dom,不可以使用浏览器api

        实现:通过background.js注入或者配置注入

三、通信

Send:

  • 短连接
chrome.tabs.sendMessage()
chrome.runtime.sendMessage()
  • 长连接
chrome.tabs.connect()
chrome.runtime.connect()

Receive:

chrome.runtime.onConnect.addListener(callback)
chrome.runtime.onMessage.addListener(callback)

        说明:长连接与短连接不多说,大家都懂,说下tabs和runtime两个方法的差异,tabs在消息传递时需要tabId,runtime在消息传递需要extensionId

  • 各脚本环境之间通信
  • content_scripts与popup之间通信

长连接示例

popup.js发送消息

chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {    
        var p = chrome.tabs.connect(tabs[0].id, {name:"connect"});    
        p.postMessage({message:'hello connected'})
});
  • content_scripts接收消息
chrome.runtime.onConnect.addListener(p=>{    
        console.log(p)    
        p.onMessage.addListener(function(message) {        
        console.log("Message received from Background.js:", message.message);        
        // 在这里添加处理消息的逻辑    });
})

短连接示例

popup.js发送消息

chrome.tabs.query({active: true, currentWindow: true}, function (tabs) {    
        chrome.tabs.sendMessage(tabs[0].id, {message:' hello pop'});
});

content_scripts接收消息

chrome.runtime.onMessage.addListener(p=>{    
        console.log(p.message)})
  • popup.js和background.js通信

长连接示例

popup.js发送

chrome.runtime.connect(extensionId,{name:"con"})
        .postMessage({message:'hello111'})

background.js接收

chrome.runtime.onConnect.addListener(function(p) {    
        p.onMessage.addListener(message=>{        
        console.log(message.message)    })
});

        注:为什么第一个示例中没有用runtime.connect,因为runtime.connect是与后台脚本交互的,但是如果popup.js中使用tabs.connect的话,那么background.js和content_scripts都可以接收到消

短连接示例

popup.js发送

chrome.runtime.sendMessage({message:'hi'});

background.js接收

chrome.runtime.onMessage.addListener(function (request) {    
        console.log(request.message)})

        注:和长连接不同,如果使用tabs发送,那么background.js就无法收到消息。

  • 调用

Popup.js可以直接调用background.js中的方法

var background = chrome.extension.getBackgroundPage()
background.test()
  • dev.js | panels.js和background.js直接通信

dev.js发送

var backgroundPageConnection = chrome.runtime.connect({    
        name: "devtools-page"});
backgroundPageConnection.onMessage.addListener(function (message) {    
        // Handle responses from the background page, if any
}); 
backgroundPageConnection.postMessage({    
        tabId: chrome.devtools.inspectedWindow.tabId,    
        // scriptToInject: "test.js",    
        message:'hello'
});

        background.js和popup.js都可以收到消息,panels.js和dev.js由于都是以iframe的形式嵌套在devtools.html中的,所以它俩发送消息是一样的。

        但是dev.js是面向开发者的,panel.js是面向用户的。

  • dev.js和content_scripts

        dev.js和content_scripts处于不同的环境中,它们之间如果需要通信,需要使用background.js作为中介。

        另:dev.js可以直接访问Dom资源、页面的静态资源、http请求。

chrome.devtools.inspectedWindow.eval('performance', function(result, exceptionInfo) {    
        if (exceptionInfo) {        
                console.error('Error:', exceptionInfo);
    } else {        
                console.log('DOM:', result);
    }
});

参考文档API 参考  |  Chrome for Developers

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

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

相关文章

Fabric Measurement

Fabric Measurement 布料测量

stm32平衡车

目录 一.所需材料 二.PID算法&#xff08;简单说明&#xff09; 直立环 速度环 串级PID 三.使用到的外设 1.定时器输出比较-PWM 2.定时器编码器模式 3.编码器读取速度 4.电机驱动函数 5.外部中断 四、小车 调试 一.所需材料 1.陀螺仪MPU6050--读取三轴的加速度…

基于springboot+vue的旅游推荐系统

博主主页&#xff1a;猫头鹰源码 博主简介&#xff1a;Java领域优质创作者、CSDN博客专家、阿里云专家博主、公司架构师、全网粉丝5万、专注Java技术领域和毕业设计项目实战&#xff0c;欢迎高校老师\讲师\同行交流合作 ​主要内容&#xff1a;毕业设计(Javaweb项目|小程序|Pyt…

自定义序列化

3.2.2.自定义序列化 RedisTemplate可以接收任意Object作为值写入Redis&#xff1a; 只不过写入前会把Object序列化为字节形式&#xff0c;默认是采用JDK序列化&#xff0c;得到的结果是这样的&#xff1a; 缺点&#xff1a; 可读性差内存占用较大 我们可以自定义RedisTempla…

Python 从0开始 一步步基于Django创建项目(3)使用Admin site管理数据模型

本文内容建立在《Python 从0开始 一步步基于Django创建项目&#xff08;2&#xff09;创建应用程序&数据模型》的基础上。 Django提供的admin site&#xff0c;使得网站管理员&#xff0c;能够轻松管理网站的数据模型。 本文首先创建‘管理员账户’&#xff0c;即超级用户…

springboot296基于个性化定制的智慧校园管理系统设计与开发

智慧校园管理系统的设计与实现 摘 要 如今社会上各行各业&#xff0c;都喜欢用自己行业的专属软件工作&#xff0c;互联网发展到这个时候&#xff0c;人们已经发现离不开了互联网。新技术的产生&#xff0c;往往能解决一些老技术的弊端问题。因为传统校园综合信息管理难度大&…

C++夯实基础

C在线学习笔记 第一阶段&#xff1a;基础 一、环境配置 1.1.第一个程序&#xff08;基本格式&#xff09; ​ #include <iosteam> using namespace std;int main(){cout<<"hello world"<<endl;system("pause"); }​ 模板 #include…

【比较函数坑点】D. Li Hua and Tree

题目 #include <bits/stdc.h> using namespace std; #define int long long #define pb push_back #define fi first #define se second #define lson p << 1 #define rson p << 1 | 1 const int maxn 1e5 5, inf 1e18, maxm 4e4 5; const int mod 1e9…

Qt creator构建DLL库

文章目录 一、构建DLL库二、隐式调用DLL库 一、构建DLL库 Qt creator创建DLL项目。 实现功能函数。 运行代码&#xff0c;debug目录下会有.dll和.lib文件。 二、隐式调用DLL库 QT新建控制台项目。将.lib文件和与之关联的头文件赋值到项目文件夹。 3. 添加头文件和外部依赖库…

创建vue3项目并集成cesium插件运行

创建vue3项目并集成cesium插件 一、vue项目创建 1、前期准备 node.js&npm或yarn 本地开发环境已经安装好。 参考安装 2、安装vue-cli&#xff0c;要求3以上版本 #先查看是否已经安装 vue -V#安装 npm install -g vue/cli4.5.17 示例&#xff1a;Idea工具 页面 Termin…

HE切片+qupath识别TIL和成纤维细胞文献(三阴性乳腺癌)

An Open-Source, Automated Tumor-Infiltrating Lymphocyte Algorithm for Prognosis in Triple-Negative Breast Cancer An Open-Source, Automated Tumor-Infiltrating Lymphocyte Algorithm for Prognosis in Triple-Negative Breast Cancer - PubMed (nih.gov) 试验设计 …

Matplotlib中英文使用不同字体的最优解

中英文使用不同字体&#xff0c;我们需要解决两个需求&#xff1a; 第一个需求&#xff1a;要用中文字体显示中文&#xff0c;不能全部都是框框。第二个需求&#xff1a;横纵坐标的数字用英文字体显示&#xff0c;英文用英语字体显示。 方法很简单&#xff0c;只需要添加一行…

RabbitMQ之Plugins插件----AMQP对接MQTT

1.启用插件 rabbitmq-plugins enable rabbitmq_mqtt 2.检查是否启动成功&#xff0c;打开rabbitmq后台 3.概念&#xff1a; AMQP是由交换器和queue队列组成的消息队列机制&#xff0c;MQTT是由订阅主题组成的消息机制 1.MQTT创建连接时会向rabbitmq创建一个自己的queue&…

SpringCloud之网关组件Gateway学习

SpringCloud之网关组件Gateway学习 GateWay简介 Spring Cloud Gateway是Spring Cloud的⼀个全新项目&#xff0c;目标是取代Netflix Zuul&#xff0c;它基于Spring5.0SpringBoot2.0WebFlux&#xff08;基于高性能的Reactor模式响应式通信框架Netty&#xff0c;异步⾮阻塞模型…

基于python+vue超市管理系统flask-django-php-nodejs

课题主要分为二大模块&#xff1a;即管理员模块和员工模块&#xff0c;主要功能包括&#xff1a;个人信息修改、员工信息、商品信息、商品进货、商品出库、商品销量等&#xff1b; 目录 摘 要 I Abstrac II 目录 III 1绪论 1 1.1 研究背景 3 1.1.1国内研究现状 3 1.1.2国外研究…

是德科技keysight DSOX3024T示波器

181/2461/8938产品概述&#xff1a; DSOX3024T 示波器 要特性与技术指标 使用电容触摸屏进行简洁的触控操作&#xff1a; •提高调试效率 •触控设计可以简化文档记录 •使用起来就像您喜欢的智能手机或平板电脑一样简单 使用 MegaZoom IV 技术揭示偶发异常&#xff1a; •超快…

图像处理ASIC设计方法 笔记12 图像旋转ASIC中心控制器状态机

P109 1 流水线图像旋转ASIC整体架构 中心控制器负责各个模块的状态控制和数据调度,接收到外部启动信号后,进人芯片初始化阶段,片上FIFO接收外部输入的图像旋转参数、接收完毕后,再利用接收到的旋转角度到查找表中找到对应的正弦和正切值。 中心控制器将接收到的行列信息…

鸿蒙Harmony应用开发—ArkTS-LazyForEach:数据懒加载

LazyForEach从提供的数据源中按需迭代数据&#xff0c;并在每次迭代过程中创建相应的组件。当在滚动容器中使用了LazyForEach&#xff0c;框架会根据滚动容器可视区域按需创建组件&#xff0c;当组件滑出可视区域外时&#xff0c;框架会进行组件销毁回收以降低内存占用。 接口…

Pink老师Echarts教学笔记

可视化面板介绍 ​ 应对现在数据可视化的趋势&#xff0c;越来越多企业需要在很多场景(营销数据&#xff0c;生产数据&#xff0c;用户数据)下使用&#xff0c;可视化图表来展示体现数据&#xff0c;让数据更加直观&#xff0c;数据特点更加突出。 01-使用技术 完成该项目需…

是德科技keysight 53230A频率计数器

181/2461/8938产品概述&#xff1a; Keysight(原Agilent) 53230A 通用频率计数器/计时器可满足您所有的频率和时间间隔测量需求。除了典型的频率和时间间隔测量&#xff0c;它还可执行连续/无间隙测量&#xff0c;以进行基本调制域分析。 53230A 配有可选的猝发测量软件。它可…
最新文章