首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

(Angular 7,Chrome扩展)为什么mat对话框在网页中可以正确呈现,而在chrome扩展中却不能?(使用复制回购)

问题分析

在使用Angular 7开发Chrome扩展时,遇到mat-dialog(Material Design对话框)在网页中可以正确呈现,但在Chrome扩展中却不能正常显示的问题。

基础概念

  1. Angular Material:Angular Material是Angular的一个UI组件库,提供了丰富的Material Design风格的组件,包括对话框(mat-dialog)。
  2. Chrome扩展:Chrome扩展是一种可以在Chrome浏览器中运行的小型软件程序,可以修改和增强浏览器的功能。

可能的原因

  1. 样式冲突:Chrome扩展的样式可能与Angular Material的样式发生冲突。
  2. 脚本加载顺序:Chrome扩展中的脚本加载顺序可能不正确,导致Angular Material组件无法正确初始化。
  3. 权限问题:Chrome扩展可能没有足够的权限来加载某些资源或执行某些操作。

解决方法

1. 确保样式正确加载

确保Angular Material的样式文件正确加载。可以在manifest.json中添加样式文件的路径:

代码语言:txt
复制
{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": ["content.js"],
      "css": ["styles.css"]
    }
  ],
  "web_accessible_resources": [
    "https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css"
  ]
}

2. 确保脚本加载顺序正确

确保Angular Material的脚本在Angular应用脚本之前加载。可以在manifest.json中调整脚本的加载顺序:

代码语言:txt
复制
{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "https://unpkg.com/@angular/material@7.0.0/bundles/material.umd.js",
        "content.js"
      ],
      "css": ["styles.css"]
    }
  ]
}

3. 确保权限正确

确保Chrome扩展有足够的权限来加载所需的资源。可以在manifest.json中添加必要的权限:

代码语言:txt
复制
{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "https://unpkg.com/*"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "https://unpkg.com/@angular/material@7.0.0/bundles/material.umd.js",
        "content.js"
      ],
      "css": ["styles.css"]
    }
  ]
}

4. 检查控制台错误

打开Chrome开发者工具的控制台,查看是否有任何错误信息。这些错误信息可以帮助定位问题。

示例代码

假设你的Angular应用和Chrome扩展的基本结构如下:

manifest.json

代码语言:txt
复制
{
  "manifest_version": 2,
  "name": "My Extension",
  "version": "1.0",
  "permissions": [
    "activeTab",
    "https://unpkg.com/*"
  ],
  "content_scripts": [
    {
      "matches": ["<all_urls>"],
      "js": [
        "https://unpkg.com/@angular/material@7.0.0/bundles/material.umd.js",
        "content.js"
      ],
      "css": ["styles.css"]
    }
  ]
}

content.js

代码语言:txt
复制
// 初始化Angular应用
angular.element(document).ready(function() {
  angular.bootstrap(document, ['myApp']);
});

styles.css

代码语言:txt
复制
@import "https://unpkg.com/@angular/material/prebuilt-themes/indigo-pink.css";

参考链接

通过以上步骤,你应该能够解决mat-dialog在Chrome扩展中无法正常显示的问题。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

前端开发:这10个Chrome扩展你不得不知

也许您会感到奇怪,Chrome本身的开发者工具不是已经足够了吗,为什么我还要用它? 其实这个插件比我们浏览器的开发者工具显示的信息更多也更先进。...Auury是由Rangle.io构建的DevTool扩展,用于调试、分析和优化Angular项目。...您的网站在不同的浏览器上的呈现是开发人员一直在考虑的问题。 我们通常选择在我们的机器上安装不同的浏览器,这样我们就可以在上面启动任何浏览器来测试我们的网站。 这个扩展可以为您做所有的事情。...使用CSSPeeper,您可以将鼠标悬停在网页的任何元素上,然后单击鼠标即可复制元素的样式。...如果您曾经尝试从chrome inspector工具的元素复制CSS样式代码,则可以轻松了解CSSPeeper带来的价值。 10. WhatFont ?

2.4K10

2023 年前端大事记

阶段的装饰器提案的支持,而在今年发布的 TypeScript 5.0 ,对全新的处于 stage3 阶段的装饰器提案提供支持。...[7-13] Fenced Frames 被支持 在很多业务场景,我们可能会使用 iframe 去嵌入一些智能推荐的广告。...另外我们还可以用它来实现一个体验非常好的网页视频会议功能等等。 了解更多:Chrome 116:网页画中画 API 来了!...另外,通过在网页添加特定 JSON ,可以触发浏览器对指定页面的数据预取或预渲染。 Chrome 团队正在尝试将这种预渲染技术广泛应用于 Web 开发。...; 新的 Popover 属性,提供可以用来实现弹出窗口和对话框的原生内置能力; CSS 的更新: Font size adjust,是一种用于在网页上调整字体大小的特性,通常使不同字体的视觉大小保持一致

37010
  • Python怎么使用爬虫获取网页内容

    在我们打开这个网页的时候,排在第一的新闻是:“天文学家首次见证黑洞诞生”。煎蛋又更新了新的新闻,你记住你当时的第一条新闻题目即可。我们待会儿会在我们下载的网页搜索这个标题来验证我们下载的正确性。...3、如何实现动态网页下载?urllib3 很强大,但是却不能一劳永逸地解决网页下载问题。...为什么我们明明下载到了网页但是却搜不到电视剧呢?造成这个现象的原因是豆瓣电视剧网页的电视剧列表的部分是动态加载的,所以我们用 urllib3 去直接下载,只能下载到一个壳网页,没有里面的列表内容。...如果我们可以使用代码控制浏览器来帮我们下载网页,应该就可以解决动态网页的抓取问题。接下来我们就介绍使用 Python 来控制浏览器的利器:selenium。...打开后会出现一个命令行窗口,在这个命令行,我们可以输入 conda install xxx 来安装 Python 的扩展库。

    13610

    ASP.NET Core知多少(6):VS Code联调Angular + .NetCore

    所以决定拾起前端,选择学习Angular来弥补自己的前端空白。计划使用.Net Core + Angular开发一个任务清单。 2....环境准备 .Net Core已经支持Angular模板,我们只需要使用dotnet new angular -n YourAppName即可创建angualr项目模板。...其中ClientApp就是Angular所写的前端部分,实现了前后端分离。 ? 打开后我们需要安装以下几个VS Code的扩展,以便我们顺利开发调试。 ?...回到调试界面,选择.NetCore+Chrome,F5运行,就可以同时在angular和.net core代码中断点并调试。如下图所示: ?...细心的你可能会发现,通过这种方式虽然可以完成联调,但还是有点小瑕疵。两个调试任务会分别启动一个网页窗口。那有没有办法解决呢?

    1.7K80

    【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

    当然,首先我们要搞清楚为什么我们需要扩展程序,它有什么作用呢? 就我而言,最近我开发了一款简单的扩展程序 —— URLHelper 。你可以chrome 应用商店下载到它: ?...所以,扩展程序我觉得每个前端都可以开发,用于解决我们工作生活使用浏览器遇到的各种问题,譬如有名的 : WEB 前端助手 提供的字符串编码、JSON 格式化 PageSpeed 提供的页面性能检测等等...以我上面的 URLHelper 为例子,在这个扩展,我使用的是持续运行的后台网页,当浏览器页面刷新第一次注入 Content Script 时,会获取到当前页面 url ,然后发送消息并带上 url...使用 chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {}) 则能正确选中当前打开的标签页。...仅供开发使用 当然,有些同学无法访问谷歌商店,或者扩展程序做出来仅仅是团队内部的一种工具,供私人使用。那么可以直接在 chrome 浏览器安装安装包。

    1.5K30

    Angular 工具篇之VSCode调试

    接下来,我们将介绍一下在 VSCode 如何利用 Chrome 浏览器调试 Angular 应用。...首先,我们需要在 Chrome 商店安装 Debugger for Chrome 扩展插件,成功安装后让我们重新加载一下编辑器。安装完插件只是第一步,下一步我们需要添加相应的配置文件。...应用程序的地址,通常情况下,在开发阶段我们会使用 Angular CLI 来辅助开发,使用 Angular CLI 我们可以运行以下命令来启动本地服务器: $ ng serve 因为该服务器的默认端口是...4200,所以我们需要更新一下 launch.json 文件默认的 url 配置: "url": "http://localhost:4200" 最后我们就可以进入调试面板,点击运行按钮开始调试 Angular...上面我们已经介绍如何使用 VSCode 和 Chrome 调试 Angular 应用程序。其实除了 Chrome 浏览器之外,在 VSCode 我们也可以使用 Firefox 或 Edge 浏览器。

    1.9K10

    【前端工具】Chrome 扩展程序的开发与发布 -- 手把手教你开发扩展程序

    当然,首先我们要搞清楚为什么我们需要扩展程序,它有什么作用呢? 就我而言,最近我开发了一款简单的扩展程序 —— URLHelper 。你可以chrome 应用商店下载到它: ?...所以,扩展程序我觉得每个前端都可以开发,用于解决我们工作生活使用浏览器遇到的各种问题,譬如有名的 : WEB 前端助手 提供的字符串编码、JSON 格式化 PageSpeed 提供的页面性能检测等等...以我上面的 URLHelper 为例子,在这个扩展,我使用的是持续运行的后台网页,当浏览器页面刷新第一次注入 Content Script 时,会获取到当前页面 url ,然后发送消息并带上 url...使用 chrome.tabs.query({ active: true, currentWindow: true }, function(tabs) {}) 则能正确选中当前打开的标签页。...仅供开发使用 当然,有些同学无法访问谷歌商店,或者扩展程序做出来仅仅是团队内部的一种工具,供私人使用。那么可以直接在 chrome 浏览器安装安装包。

    1.9K30

    Firefox内容安全策略的“Strict-Dynamic”限制

    这样一来,就可以借助某些已经加载的JavaScript代码行为,在某种情况下绕过内容安全策略的Strict-Dynamic。而在Firefox的漏洞,正是由于require.js的这种情况引起的。...在Firefox 57版本,移除了基于XUL/XPCOM的扩展,但没有移除WebExtensions。即使是在最新的60版本,浏览器内部仍然使用这种机制。.../manifest.json/web_accessible_resources ),就可以从任何网页访问所列出的资源。...-- XSS END -->在这段代码,我们看到,data:URL将作为JavaScript资源加载,并且会弹出一个警告对话框。各位读者可能会想,为什么会加载require.js?...即使在通用浏览器扩展,如果有可以用于绕过内容安全策略的Web可访问资源,也会发生同样的情况。

    2.1K52

    用好这 42 款 Chrome 插件,每年轻松省出一个年假(附下载)

    Ps:下面的很多插件都是工具向,在日常工作开发可以经常使用,用好了可以极大地提高工作效率,每年轻松省出一个年假,在别人熬夜加班的时候,你可以尽情地 Happy 。...4、Adblock Plus:免除广告困扰 只要是使用 Chrome 的人都应该安装的一款扩展应用,可以帮助你屏蔽几乎大部分网页广告,如果存在漏网之鱼,还可以手动添加到屏蔽列。 ?...17、crxMouse Chrome Gestures CrxMouse是一款Chrome鼠标手势插件,使用可以充分地发挥鼠标在Chrome浏览器的操作方式。 ?...25、FireShot 任意方式截取网页的截图插件 捕捉网页截图,编辑并将它们保存为PDF,JPEG,GIF,PNG或BMP;上传,打印,在Photoshop打开,复制到剪贴板或电子邮件。 ?...34、为什么你们就是不能加个空格呢 每次看到文章的英文、数字、中文写在一起,你知道我的内心是什么样吗? 你们能不能在它们之间加个空格呢?!不过自从装上了“为什么你们就是不能加个空格呢?”

    19.4K22

    你的浏览器,何必是浏览器

    扩展程序及安装教程   扩展程序(插件)的核心就是可以增加你浏览器的功能 扩展程序允许您为 Chrome 浏览器增加功能,而不需要深入研究本机代码。...您可以使用您在网页开发已经很熟悉的核心技术(HTML、CSS 与 JavaScript)为 Chrome 浏览器创建新的扩展程序。   ...(还有一个小技巧就是,如果遇到某些页面禁止复制文字的话,你可以用此插件选中文字,然后在上面的输入框复制) Google Results Previewer Google Results Previewer...而且操作方式也是非常的简单,只需要在浏览器网址部分的“github”后边,添加一个“1s”就可以了。在谷歌商店里也可以安装此扩展插件。...智慧树网课助手   知道网课为什么很水很水很水吗,知道为什么有些人轻轻松松的就能把网课成绩刷到100分吗?

    2.8K11

    用好这 42 款 Chrome 插件,每年轻松省出一个年假

    ps:下面的很多插件都是工具向,在日常的工作开发可以经常使用,用好了可以极大的提高工作效率,每年轻松省出一个年假,在别人熬夜加班的时候,你可以尽情的 happy 。...4、Adblock Plus:免除广告困扰 只要是使用 Chrome 的人都应该安装的一款扩展应用,可以帮助你屏蔽几乎大部分网页广告,如果存在漏网之鱼,还可以手动添加到屏蔽列。...安装后,会在Chrome浏览器菜单栏添加一个按钮,可以方便的在任何时候点击翻译你当前正在访问的页面。...25、FireShot 任意方式截取网页的截图插件 捕捉网页截图,编辑并将它们保存为PDF,JPEG,GIF,PNG或BMP;上传,打印,在Photoshop打开,复制到剪贴板或电子邮件...34、为什么你们就是不能加个空格呢 每次看到文章的英文、数字、中文写在一起,你知道我的内心是什么样吗? 你们能不能在它们之间加个空格呢?!不过自从装上了「为什么你们就是不能加个空格呢?」

    1K10

    用好这 42 款 Chrome 插件,每年轻松给你省出一个年假!

    ps:下面的很多插件都是工具向,在日常的工作开发可以经常使用,用好了可以极大的提高工作效率,每年轻松省出一个年假,在别人熬夜加班的时候,你可以尽情的 happy 。...4、Adblock Plus:免除广告困扰 只要是使用 Chrome 的人都应该安装的一款扩展应用,可以帮助你屏蔽几乎大部分网页广告,如果存在漏网之鱼,还可以手动添加到屏蔽列。...安装后,会在 Chrome 浏览器菜单栏添加一个按钮,可以方便的在任何时候点击翻译你当前正在访问的页面。...25、FireShot 任意方式截取网页的截图插件 捕捉网页截图,编辑并将它们保存为 PDF,JPEG,GIF,PNG 或 BMP;上传,打印,在 Photoshop 打开,复制到剪贴板或电子邮件...34、为什么你们就是不能加个空格呢 每次看到文章的英文、数字、中文写在一起,你知道我的内心是什么样吗? 你们能不能在它们之间加个空格呢?!

    92220

    CSS精简工具-CSS remove and combine

    修改起来也是很麻烦的,小编为大家带来了一款专门解决这种问题的chrome插件它就是[CSS remove and combine],这是一款可以通过创建仅包含正在使用的选择器的新CSS样式表来删除页面上未使用的...它可以从页面上的所有样式表删除未使用的选择器,并将结果组合到一个可以下载的样式表,这不仅可以整理和优化样式表,还可以将它们组合成一个文件,然后可以下载该文件。...扩展使用的方法是基于消除所有ID和类的选择器,这些选择器引用不在页面上的ID和类。还有一个快速查看对话框,该对话框将在页面上为用户提供有关已使用和未使用的选择器数量的信息。...CSS remove and combine插件安装使用 1.你可以chrome应用商店里找到CSS remove and combine插件,如果你的chrome应用商店无法打开,你可以在本站的下方找到...2.离线安装的方法参照一下方法:老版本chrome浏览器,首先在标签页输入【chrome://extensions/】进入chrome扩展程序,解压你在本站下载的插件,并拖入扩展程序页面,它会提示你是否安装该插件

    1.7K30

    史上最全的前端资源大汇总

    + nodejs 吕大豹 Angularjs AngularJS 最佳实践 Angular的一些扩展指令 Angular数据绑定原理 一些扩展Angular UI组件 Ember和AngularJS的性能测试...工具类 ---- [前端人的俱乐部](http://f2er.club/ 真可以解放你的收藏夹) 如何优雅地使用Sublime Text 新编码神器Atom使用纪要 css sprite 雪碧图制作...-- Gulp官网 Gulp中文网 gulp资料收集 Gulp:任务自动管理工具 - ruanyifeng Gulp插件 Gulp探究折腾之路(I) Gulp折腾之路(II) Gulp不完全入门教程 为什么使用...前端性能优化:使用媒体查询加载指定大小的背景图片 网站性能系列博文 加载,不只是少一点点 前端性能的测试与优化 分享网页加载速度优化的一些技巧?...开发者工具(一 奇趣百科性能优化(Chrome DevTools 的 Timeline Profils 等工具使用介绍 chrome 开发者工具的 15 个小技巧 Chrome开发者工具不完全指南 Chrome

    13.5K61

    Chrome、Firefox、Edge等高版本浏览器实现在线编辑、审阅Office文档新方案

    而在Chrome 45、Firefox 53以下版本的浏览器,收费的有江西金格iWebOffice智能文档控件在NPAPI插件再调用ActiveX控件来请求桌面Office软件的自动化接口。...这种技术实现导致在网页每次启动Office控件时,都会弹出一个不胜其烦的确认对话框让最终用户选择,如下图所示: 启动问题.png officectrl问题.png 用户使用体验很差,...4、 双内核方案 此方案主要是依托Chrome等浏览器上的扩展程序IETab来实现,商业用途是需要付费使用的。...三、改进方案 通过上述总结的现有技术方案可以看出,想要在当前主流版本的Chrome、Firefox、Edge等浏览器网页内嵌桌面Office软件实现文档或表格在线编辑等功能,核心就在于如何在各浏览器实现一个统一的不依赖浏览器自身扩展技术的外接系统...答案自然是肯定的,可以借助PluginOK中间件之上的IE控件小程序,动态实现双内核的运行效果,类似现有方案的双内核方式,但解决了分发和在线升级的难题,同时可实现在Chrome网页中局部加载显示的效果

    4.6K30

    2021 年值得推荐的 14 款 Chrome 开发者插件

    采用鼠标悬浮特性,点击后就可以告诉你所指字体的属性,字体名称、字体大小、字体颜色等,非常方便,目前有 Chrome 和 Safari 扩展,Firefox 的用户可以使用书签栏工具。...你可以使用这个方便的小 Chrome 扩展程序。 使用它,你可以将鼠标悬停在网页上并识别特定颜色。如果你单击颜色,它将复制到剪贴板,以便你可以轻松访问它。...颜色代码有 RGB 值和十六进制值两种,甚至可以使用这个工具访问你的历史记录,如果你不记得你正在欣赏的网页,这个工具还是非常方便的。...没有确认对话框,没有弹出窗口或其他任何减慢你的清算过程的东西。只需单击一下。...此扩展的优点在于它可以与你可能在工作中使用的大多数项目管理工具集成,例如 Trello、Jira、GitHub、Asana 以及其他一些工具。

    2.9K30

    堪称神器的Chrome插件

    4、Adblock Plus:免除广告困扰 只要是使用 Chrome 的人都应该安装的一款扩展应用,可以帮助你屏蔽几乎大部分网页广告,如果存在漏网之鱼,还可以手动添加到屏蔽列。...6、关灯看视频 有时候网速太差,全屏以后分辨率很低,可以试试这个,可以让周围页面变暗从而达到最好的视觉效果。 7、二维码(QR码)生成器 在线的二维码生成器。可以把当前的网页直接生成二维码,进行编辑。...安装后,会在Chrome浏览器菜单栏添加一个按钮,可以方便的在任何时候点击翻译你当前正在访问的页面。...25、FireShot 任意方式截取网页的截图插件 捕捉网页截图,编辑并将它们保存为PDF,JPEG,GIF,PNG或BMP;上传,打印,在Photoshop打开,复制到剪贴板或电子邮件 26、Lucidchart...34、为什么你们就是不能加个空格呢 每次看到文章的英文、数字、中文写在一起,你知道我的内心是什么样吗? 你们能不能在它们之间加个空格呢?!不过自从装上了「为什么你们就是不能加个空格呢?」

    2K00

    安卓Chrome使用技巧合辑

    在"姊妹篇",将以GIF的形式显现Chrome的一些特色特性,由于图片较多,请大家使用WIFI或者在电脑上观看~ 一:利用外部应用扩展Chrome的功能:   虽然Android上的Chrome...无法使用插件来扩展Chrome的功能,但我们仍然可以通过使用一些外部应用来扩充Chrome的功能:   1....在无网络连接情况下打开任何一个网页,将弹出一个"小恐龙"界面,点击小恐龙即可开始玩儿Chrome自带的游戏(700分后有惊喜)。   7....想快速复制当前页面的网址,你只需要点击Chrome菜单中上方的"信息"图标(位于刷新按钮左边),在弹出的网页信息窗口中长按网址区域即可快速将当前页面的网址复制到剪贴板。   9....使用方法:直接复制下述内容每项的伪链接(以chrome://开头),粘贴到Chrome浏览器的地址栏并回车,即可打开Chrome的实验室特性页面并快速定位到相应项目。   1.

    9.5K30

    Chrome扩展程开发初探

    内容脚本: content_scripts:定义内容脚本,这些脚本将注入到匹配的网页运行。内容脚本可以修改网页内容或监听网页事件。...可访问资源: web_accessible_resources:定义扩展可以网页访问的资源,例如内容脚本或图标。这使得网页能够访问扩展内的特定文件。...通过配置 manifest.json 文件,可以定义和控制 Chrome 扩展的各种功能和行为,包括用户界面、后台处理、网页内容修改和权限管理。这使得开发者能够创建功能丰富且安全的浏览器扩展。...Chrome 扩展的安全性设计确实不允许在 HTML 页面中直接使用 JavaScript 代码来加载或执行扩展的功能。Chrome 扩展通过内容安全性策略来限制可以在页面上执行的脚本。...扩展,content.js 是内容脚本,用于在匹配的网页上执行 JavaScript 代码。

    9710
    领券