Chrome插件无法引用外部Vue等js

最新推荐文章于 2024-09-11 14:05:14 发布
最新推荐文章于 2024-09-11 14:05:14 发布
阅读量1.7k 收藏 1
点赞数 2
CC 4.0 BY-SA版权
文章标签： chrome vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/qq_39589692/article/details/124132777
本文探讨了Chrome插件v3环境下因CSP规则导致无法加载外部Vue.js等库的问题，介绍了采用内联HTML和本地存储的解决办法，并期待后续优化。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

Chrome插件无法引用外部Vue等js：

使用v3版本的chrome插件开发时，由于CSP规则，是无法用cdn导入外部js库的，v2版本可以用的修改manifest中“content_security_policy”也是禁用的，因此可以参考官方文档中给出的解释：

官方文档

采用sandbox 沙盒 去存储需要用到内联js的html文件，然后吧js下到本地
目前我是采用这种方法去解决的，不知道后续有没有更好的解决方案。

Octo丶
关注
vue3+antd+sass+crxjs搭建项目编写chrome插件，支持热更新
局外人LZ的博客
02-21 970
开发chrome插件总体的项目搭建与前端vue项目搭建差不多，只是把vue单页面应用换成了多页面应用，在开发chrome插件时也可使用pinia功能，也可以使用ts卡法，可以参考之前的vue项目搭建教程按需集成。
chrome插件开发时使用import
Powerful_Green的博客
01-27 2948
本文提供了一种在chrome插件开发时，解决import时报cannot use import statement outside a module的办法
利用chrome插件，向页面中注入js脚本
热门推荐
九段刀客的博客
07-31 2万+
缘由 我的电脑插入耳机后外音不会自动关闭，然后在realtek高清晰音频管理器里面设置还是没有用，然后我就想到大概是最近win10经常更新，然后这个管理器版本不对导致的，于是就去realtek官网打算下载个最新的，然后。。。点go按钮没反应，习惯性的f12看一下，发现控制台报错 jQuery的问题，然后我到Network里看了一下，发现cdn的方式引入jquery加载失败https://code.jquery.com/jquery-1.12.4.min.js 那么真相只有一个，jQuery引入失败，我就
使用vue开发Chrome插件——vue无法正常使用（CSP环境导致）
Neonsekii的博客
09-03 1341
使用vue开发Chrome插件——vue无法正常使用（CSP环境导致） 问题描述： 这几天在尝试着用vue开发Chrome小程序，但是在开发的第一步就遇到了问题，在尝试用vue进行数据渲染的时候发现数据无法被渲染并且处于vue标签内的所有标签都会被禁止渲染。 前端代码： <body> <div>test outSide</div> <div id="app"> <p>{{ messag
Chrome中安装vue.js devtool插件无法使用的解决方案（vue.js is not detected）
qq_41955460的博客
02-18 6011
问题：在Crx4Chrome网站中下载了vue插件之后，出现vue.js is not detected 的错误。如下为亲测可用解决方案： 1. 在Chrome浏览器中输入 chrome://version/ ，会出现Chrome的版本信息。如下： 2. 在本地文件中找到Chrome的插件扩展程序安装目录，即为 个人资料路径。并打开Extensions文件夹，里面即为安装的插件的ID。如下： 3. 如果你的浏览器安装了很多插件，则需要在Chrome浏览器中输入chrome://exte..
在 Chrome 插件的 content.js中，无法直接访问页面中的 Vue 实例
wangweiscsdn的博客
03-30 2025
content.js在与网页分离的环境中运行，无法直接访问网页的JavaScript对象，包括Vue实例
chrome.storage.local.set 未生效
qq_36164225的博客
06-30 667
好像在 localstorage 那里看不到。使用以下代码运行成功。
Chrome插件触发VUE+UI库开发的页面组件
前端开发
10-28 768
在Chrome扩展中编程触发Vue Js应用的组件事件
一文教会你如何用Vue开发Chrome插件
bingbaobi3372的博客
12-16 9385
一文教会你用Vue开发Chrome
# 谷歌 chrome 浏览器中的 vuejs devtools 插件工具的安装方法
段子手168的博客
04-30 9905
github 下载地址：https://github.com/vuejs/vue-devtools如下载：vue.js-devtools-4.1.3.zippage=9。
用VueJS写一个Chrome浏览器插件的实现方法
10-17
将VueJS集成到Chrome插件中，可以让开发更高效，同时利用Vue的响应式数据绑定和组件系统。 6. Content Security Policy (CSP)： CSP是一种额外的安全层，用于帮助检测并减缓某些类型的攻击，如跨站脚本（XSS）和...
使用Vite+Vue3开发谷歌浏览器插件【V3版本】
最新发布
初级码农~
09-11 3217
使用vite+vue3开发谷歌浏览器插件，本文针对已对浏览器插件有了解的对象，对浏览器插件的介绍不做赘述，本文不完全是开发教程，更多的为本人日常学习记录，用来记录项目中相对重要以及需要注意的点，以实操和实现功能为主，如有疑问可联系博主解答相关问题。
Chrome控制台引入js库jQuery为例
彭世瑜的博客
02-26 3013
Chrome控制台引入jQuery var script = document.createElement("script"); script.src = "https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"; document.getElementsByTagName('head')[0].appendChild(script); // 验证...
chrome cdn插件
个人进步之路
01-08 481
不得不说,有时,你需要谷哥的服务,可是,你是访问不了的. 因而就有替换地址的crx插件. 本人已上传,等审核过关,就可以放链接了. 这是蓝奏云的地址
在一个js文件中引用另一js文件（chrome插件亦适用）
奔跑的煮玉米
07-29 4015
环境描述： a.js和b.js在同一个文件夹下，现在想在b.js文件里引用a.js 操作方法： 在b.js文件的顶端插入document.write("");
chrome中直接使用import
赵天铭的博客
06-22 5148
现在我们在开发项目时都是基于构建工具（像webpack）上进行开发，所以在使用import时得心应手。 但今天在chrome中直接使用import时，发现不知道如何使用？ chrome中直接使用import 三个条件： 浏览器版本需要支持，浏览器的支持情况： 使用<script type="module"> 必须在服务器环境下才运行（可以通过全局下载npm包http-...
chrome浏览器插件开发--如何在content_scripts的js中使用插件的本地图片
前端笔记——放弃很容易,但坚持一定很酷
08-21 1297
在浏览器插件（如Chrome扩展、Firefox插件等）中，`content_scripts` 是一种强大的功能，它允许插件开发者向正在浏览的网页中注入JavaScript、CSS等文件。2、在pick.js中使用 chrome.runtime.getURL() 获取到图片的url路径。比如我这里`content_scripts`配置的是pick.js，但是发现在pick.js无法直接访问到插件项目里的本地图片资源。这样就可以在页面创建的dom中设置本地图片的背景图了。
chrome插件开发（manifest_version版本V3 + Ant Design Vue）
Primary_wind的专栏
11-26 1万+
谷歌浏览器插件是一种小型的定制浏览器体验的程序，通过插件可以自定义浏览器的一些行为来适合个人的需求，例如上面的查看服务器状态插件。在应用商店中下载下来的插件基本上都是以.crx 为文件后缀，该文件其实就是一个压缩包，包括插件所需要的 HTML，Javascript，CSS 、图片资源等等文件。开发 Chrome 插件只需要会 HTML，Javascript，CSS 就可以动手开发了。
从零实现的Chrome扩展
WindRunnerMax
07-16 1725
Chrome扩展是一种可以在Chrome浏览器中添加新功能和修改浏览器行为的软件程序，例如我们常用的AdGuard等等，这些拓展都是可以通过来修改、增强浏览器的能力，用来提供一些浏览器本体没有的功能，从而实现一些有趣的事情。
Chrome浏览器加载Vue插件的详细步骤
- 开发者可能在开发Vue.js应用时，需要特定Chrome插件进行调试或测试。 - 该操作允许开发者在Chrome浏览器中直接加载并测试自定义Vue插件，提高开发效率。 总结而言，"chrome.zip"压缩包涉及的操作是关于在Chrome...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值