使用Element-Plus 加载style

本文介绍了一款基于Vue3、TypeScript、ElementPlus等技术的Chrome扩展开发框架,详细说明了如何安装、配置content_security_policy以及遇到的样式加载问题。
摘要由CSDN通过智能技术生成

vue-chrome-extension

简介

chrome扩展开发插件基于vue3、ts、Element Plus、Webpack5、axios、less开发
支持content快速调用chrome对象及axios 详看 pages/content/app.vue
开箱即用chrome插件

特性

  • 基础框架:使用 Vue3/Element Plus
  • TypeScript: 应用程序级 JavaScript 的语言

安装使用

  • 获取项目代码
git clone https://github.com/choumai555/vue-chrome-extension-mv3.git
  • 安装依赖

cnpm install

  • 运行
npm run watch
  • 使用Element-Plus 加载style
    https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/manifest.json/content_security_policy#manifest_v3_syntax
content_security_policy": {
        "script-src": "self unsafe-eval https://*",
        "object-src": "self unsafe-eval https://*",
        "extension_pages": "default-src 'self'; worker-src 'self'; img-src 'self'; style-src 'self' 'unsafe-inline'; connect-src https://* data: blob: filesystem:;"
    }

to load resource: net::ERR_FILE_NOT_FOUND
13Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-47DEQpj8HBSa+/TImW+5JCeuQeRkm5NMpJWZG3hSuFU=’), or a nonce (‘nonce-…’) is required to enable inline execution.

styleTagTransform.js:11 Refused to apply inline style because it violates the following Content Security Policy directive: “style-src ‘self’”. Either the ‘unsafe-inline’ keyword, a hash (‘sha256-Qtq5DNEQZxBcdzq71ojit5/KvJA8gK5kYrGHUuHXZ58=’), or a nonce (‘nonce-…’) is required to enable inline execution.

  • 8
    点赞
  • 8
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Element Plus可以通过npm进行安装,使用以下命令进行安装:npm install element-plus --save。安装完成后,可以在Vue组件中直接使用Element Plus的组件,例如在template标签中可以这样引入: <el-button>Default</el-button>,<el-button type="primary">Primary</el-button>。如果要直接在页面中引入Element Plus的静态文件资源包,可以下载最新的Element Plus静态文件资源包,并在页面中引入样式文件和脚本文件。例如,可以使用以下代码引入Element Plus的样式文件:<link rel="stylesheet" href="element-ui/lib/theme-chalk/index.css">,然后使用<script>标签引入Element Plus的脚本文件。这样就可以在项目中成功引入Element Plus了。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [20.vue3加载Element-plus](https://blog.csdn.net/qq_39502419/article/details/127030628)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [element-plus.rar](https://download.csdn.net/download/weixin_44856396/15383157)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值