前端小火龙 2024-02-19 10:09 采纳率: 93.3%
浏览 10
已结题

谷歌浏览器插件，popup页面使用vue.js

我谷歌浏览器插件开发中，想要在popup页面中使用vue3
我在popup.html中这样引入

<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>popup</title>
</head>

<body>
    <div id="app">
        这是一共popup页面123
        <button v-for="item in 3">123</button>
    </div>

    <script src="./static/js/vue.global.prod.js"></script>
    <script src="./static/js/popup.js"></script>
</body>
</html>

然后在popup中这样实例化

const app = Vue.createApp({
    data() {
        return {
            message: 'Hello, Vue 3!'
        }
    }
});
app.mount('#app');

报错如下，我应该怎么解决呢？

img

  • 写回答

4条回答 默认 最新

  • CSDN专家-showbo 2024-02-19 10:28
    关注

    content_security_policy增加unsafe-eval，具体参考谷歌文档，看不了可以看下面的

    https://developer.chrome.com/docs/extensions/reference/manifest/content-security-policy?hl=zh-cn 

    清单 - 内容安全政策 

bookmark_border
可选的清单键，包含网络平台内容安全政策，用于指定对扩展程序可以使用的脚本、样式和其他资源的限制。在此清单键中，您可为扩展程序页面和沙盒化扩展程序页面定义单独的可选政策。

“扩展程序页面”政策适用于扩展程序中的网页和工作器上下文。这包括扩展程序弹出式窗口、后台 Worker，以及扩展程序所打开的包含 HTML 网页或 iframe 的标签页。沙盒政策适用于清单中指定为沙盒页面的所有网页。

默认政策
如果用户未在清单中定义内容安全政策，则将对扩展程序页面和沙盒化扩展程序页面使用默认属性。

这些默认值等同于在清单中指定以下政策：


{
  // ...
  "content_security_policy": {
    "extension_pages": "script-src 'self'; object-src 'self';",
    "sandbox": "sandbox allow-scripts allow-forms allow-popups allow-modals; script-src 'self' 'unsafe-inline' 'unsafe-eval'; child-src 'self';"
  }
  // ...
}
在这种情况下，该扩展程序只会从其自己的打包资源中加载本地脚本和对象。WebAssembly 将被停用，该扩展程序将不会运行内嵌 JavaScript，也无法将字符串评估为可执行代码。如果添加了沙盒页面，该页面将拥有更宽松的权限，用于从扩展程序外部评估脚本。

最基本的和自定义的内容安全政策
开发者可以为其扩展程序添加或移除规则，或者使用所要求的最低内容安全政策，以满足其项目的需求。

“扩展程序页面”政策
Chrome 针对扩展程序页面强制执行了最低的内容安全政策。这相当于在清单中指定以下政策：


{
  // ...
  "content_security_policy": {
    "extension_pages": "script-src 'self' 'wasm-unsafe-eval'; object-src 'self';"
  }
  // ...
}
extension_pages 政策的放宽限制不能超过此最小值。也就是说，您不能向指令添加其他脚本源，例如将 'unsafe-eval' 添加到 script-src。如果您在扩展程序政策中添加了禁止的来源，Chrome 就会在安装时抛出如下错误：


'content_security_policy.extension_pages': Insecure CSP value "'unsafe-eval'" in directive 'script-src'.
沙盒页面政策
对于沙盒网页的默认政策要比扩展程序页面宽松得多，因为沙盒页面无权访问扩展程序 API，也不能直接访问非沙盒化页面。可根据需要自定义沙盒内容安全政策。
    本回答被题主选为最佳回答 , 对您是否有帮助呢?
    评论
查看更多回答(3条)

报告相同问题？

问题事件

  • 系统已结题 2月27日
  • 已采纳回答 2月19日
  • 创建了问题 2月19日

悬赏问题

  • ¥30 模拟电路 logisim
  • ¥15 PVE8.2.7无法成功使用a5000的vGPU，什么原因
  • ¥15 is not in the mmseg::model registry。报错，模型注册表找不到自定义模块。
  • ¥15 安装quartus II18.1时弹出此error，怎么解决？
  • ¥15 keil官网下载psn序列号在哪
  • ¥15 想用adb命令做一个通话软件，播放录音
  • ¥30 Pytorch深度学习服务器跑不通问题解决？
  • ¥15 部分客户订单定位有误的问题
  • ¥15 如何在maya程序中利用python编写领子和褶裥的模型的方法
  • ¥15 Bug traq 数据包 大概什么价