当前位置: 首页 > news >正文

网页制作与网站建设实战大全pdf做网站的分辨率要多大

网页制作与网站建设实战大全pdf,做网站的分辨率要多大,仙游县网站建设,网营科技插件构成 chrome 插件通常由以下几部分组成: manifest.json:相当于插件的 meta 信息,包含插件的名称、版本号、图标、脚本文件名称等,这个文件是每个插件都必须提供的,其他几部分都是可选的。 background script&…

插件构成

chrome 插件通常由以下几部分组成:

  1. manifest.json:相当于插件的 meta 信息,包含插件的名称、版本号、图标、脚本文件名称等,这个文件是每个插件都必须提供的,其他几部分都是可选的。

  2. background script:可以调用全部的 chrome 插件 API,实现跨域请求、网页截屏、弹出 chrome 通知消息等功能。相当于在一个隐藏的浏览器页面内默默运行。

  3. 功能页面:包括点击插件图标弹出的页面(简称 popup)、插件的配置页面(简称 options)。

  4. content script:早期也被称为 injected script,是插件注入到页面的脚本,但是不会体现在页面 DOM 结构里。content script 可以操作 DOM,但是它和页面其他的脚本是隔离的,访问不到其他脚本定义的变量、函数等,相当于运行在单独的沙盒里。content script 可以调用有限的 chrome 插件 API,网络请求收到同源策略限制。

插件的架构可以参考官方文档。

重点说明以下几点:

  1. browser action 和 page action:这俩我们可以理解为插件的按钮。browser action 会固定在 chrome 的工具栏。而 page action 可以设置特定的网页才显示图标,在地址栏的右端,如下图:

1527402e151243a4b8aebe27ed73f3aa

大部分插件点击之后会显示 UI,也就是上文描述的插件功能页面部分,一般称为 popup 页面,如下图:

3d831b9e92d5464290066cabb79c487b

popup 无法通过程序打开,只能由用户点击打开。点击 popup 之外的区域会导致 popup 收起。

page action 和 browser action 分别由 manifest.json 的 page_action 和 browser_action 字段配置。

  1. 由于 content script 受到同源策略的限制,所以一般网络请求都交给 background script 处理。

  2. content script、插件功能页面、background script 之间的通信架构如下图:

aea982dc88de429a8960b347e30d5c0b

  1. chrome 可以打开多个浏览器窗口,而一个窗口会有多个 tab,所以插件的结构大致如下:

050f7069bb824d1eab99ef97ce7e96c1

如上图,功能页面是每个 window 一份,但是每个 tab 都会注入 content script。

处理跨域

实现思路是:content.js 使用chrome.runtime.sendMessage 发送消息,background.js  使用 chrome.runtime.onMessage.addListener 方法进行监听,当监听收到发送的消息时,我们在background.js 上进行请求调用

在mainfest.json permissions 配置

"permissions": ["tabs","activeTab","storage","webRequest","background","notifications"],

content.js

重点是  chrome.runtime.sendMessage 方法

background.js

重点是 chrome.runtime.onMessage.addListener 方法


chrome.runtime.onMessage.addListener(function (e, sender) {const { message, data } = econsole.log('1111',e)const tabId = sender.tab.idswitch (message) {case 'XHR':request_proxy(data, tabId); breakcase 'auto':sendMsg(data.wxid); break}
})







开发者客栈-帮助开发者面试的平台-顽强网络

Chrome浏览器插件开发:进阶 • xu3352's Tech Blog

http://www.dtcms.com/a/466716.html

相关文章:

  • 主动学习:用“聪明提问”提升模型效率的迭代艺术
  • 数据链路层协议之MSTP协议
  • Debezium日常分享系列之:Debezium 3.3.0.Final发布
  • 网站的换肤功能怎么做哪个网站可以做验证码兼职
  • wordpress建站要钱吗中小型网站建设价格
  • gitee中的一些开源项目整理20251010
  • [JS]面试八股文
  • Linux中的进程监控,top界面解析
  • 构建一个属于组件的组件库
  • 【Linux笔记】网络部分——socket 编程 TCP实现多台虚拟机使用指令访问云服务器
  • 4.5 IP多播 (答案见原书 P208)
  • 照片素材库网站免费免费客户管理软件排行
  • 网站建站建设怀化最新消息今天
  • 社区类网站开发实践辽宁城乡建设厅网站
  • 花生壳建设网站线上运营的5个步骤
  • C语言 ——— 文件操作的核心概念与函数使用
  • 做网站维护的人叫啥电商网站维护费用
  • 高频面试题解析:算法到数据库全攻略
  • c# 使用yolov5模型
  • 表白网站制作代码公司邮箱如何申请
  • 厦门最早做网站的公司二字顺口名字公司
  • 【GIT】错误集锦及解决方案
  • C语言⽂件操作讲解(1~2)
  • 前端代码CR小知识点汇总
  • 企业建站免费模板wordpress访问统计
  • 乐清建站公司做网站哪里最便宜
  • 什么是 Spring AI?Spring AI 入门教程
  • 在线课程网站开发的研究意义客户管理系统免费版
  • 台州宇洋台州网站建设手机在线视频
  • uniapp开发 APP嵌入另一个APP打包的wgt文件,实现点击携带参数跳转到wgtAPP的某一个页面