上一主题 下一主题
ScriptCat,新一代的脚本管理器脚本站,与全世界分享你的用户脚本油猴脚本开发指南教程目录
返回列表 发新帖

[油猴脚本开发指南]油猴脚本调用element plus

[复制链接]
  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2021-9-26 09:22:27 | 显示全部楼层 | 阅读模式

    前言

    我们还有现成的组件库可以使用,那么这节课我们尝试使用vue+element的组合,还是先以网页版直接注入script标签这个方式调用。

    图片.png

    我们查看官方文档发现引入一个element css文件,一个vue文件,一个element-plus的js文件,那么我们先引入vue吧

    let script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.src = "https://cdn.jsdelivr.net/npm/vue@next";
    document.documentElement.appendChild(script);

    然后上去再引入一套css

    let link= document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.href= "https://unpkg.com/element-plus/dist/index.css";
    document.documentElement.appendChild(link);

    再上去引入一套element-plus的js!

    let elscript= document.createElement('script');
    elscript.setAttribute('type', 'text/javascript');
    elscript.src = "https://unpkg.com/element-plus";
    document.documentElement.appendChild(elscript);

    接下来查看官方例子,在vue初始化的时候我们需要use一下

          const app = Vue.createApp(App);
          app.use(ElementPlus);
          app.mount("#app");

    然后就可以直接使用啦!

    并且把之前的代码改成(el-button相当于一个自己创建的标签)

        <div id="app">
          <el-button>{{ message }}</el-button>
        </div>

    图片.png

    代码如下

    // ==UserScript==
    // @name         组合使用Vue+Element plus
    // @namespace    http://tampermonkey.net/
    // @version      0.1
    // @description  try to take over the world!
    // @author       You
    // @match        https://bbs.tampermonkey.net.cn/forum.php?mod=viewthread&tid=1030
    // @icon         https://www.google.com/s2/favicons?domain=tampermonkey.net.cn
    // @grant        none
    // @run-at document-start
    // ==/UserScript==
    
    let script = document.createElement('script');
    script.setAttribute('type', 'text/javascript');
    script.src = "https://cdn.jsdelivr.net/npm/vue@next";
    document.documentElement.appendChild(script);
    let link= document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.href= "https://unpkg.com/element-plus/dist/index.css";
    document.documentElement.appendChild(link);
    let elscript= document.createElement('script');
    elscript.setAttribute('type', 'text/javascript');
    elscript.src = "https://unpkg.com/element-plus";
    document.documentElement.appendChild(elscript);
    window.onload=()=>{
    let text=`<div id="app" style="position: absolute;top: 50vh;left: 50vw;background: #fb7d7d;width: 100px;height: 100px;">
               <el-button>{{ message }}</el-button>
        </div>`
    
    var el=document.createElement('div')
    el.innerHTML=text;
    document.body.append(el)
          const App = {
            data() {
              return {
                message: "Hello Element Plus",
              };
            },
          };
          const app = Vue.createApp(App);
         app.use(ElementPlus);
          app.mount("#app");
    }
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。

    该用户从未签到

    3

    主题

    10

    回帖

    15

    积分

    助理工程师

    积分
    15
    发表于 2021-9-26 13:53:11 | 显示全部楼层
    有意思,哪天我用我擅长的React玩下
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2021-9-26 14:13:35 | 显示全部楼层
    gafish 发表于 2021-9-26 13:53
    有意思,哪天我用我擅长的React玩下

    哥哥可以试一下
    理论React require进来很大概率也要魔改一下
    出个教程!
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2024-3-13 10:14
  • 签到天数: 211 天

    [LV.7]常住居民III

    284

    主题

    3810

    回帖

    3739

    积分

    管理员

    积分
    3739

    管理员荣誉开发者油中2周年生态建设者喜迎中秋油中3周年挑战者 lv2

    发表于 2021-9-26 14:29:42 | 显示全部楼层
    出个webpack的!
    上不慕古,下不肖俗。为疏为懒,不敢为狂。为拙为愚,不敢为恶。/ 微信公众号:一之哥哥
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2021-9-26 23:36:32 | 显示全部楼层

    在准备了,这些讲完+css讲完
    我想教webpack打包+webpack原理了
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    2

    回帖

    3

    积分

    助理工程师

    积分
    3
    发表于 2023-1-20 21:36:28 | 显示全部楼层
    大佬,可以问个问题吗?

    我把这个案例代码复制到我的tampermonkey里,将@match的url换成了https://store.steampowered.com/*,其它代码不变。打开页面后,控制台提示Vue和Element Plus因为CSP都无法加载。想问下这种情况还有办法直接注入script标签来引入vue/element吗?


    
    userscript.html?name…b48-7ea05954e566:17 Refused to load the script 'https://cdn.jsdelivr.net/npm/vue@next' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-inline' 'unsafe-eval' https://store.st.dl.eccdnx.com/ https://store.st.dl.eccdnx.com/ *.google-analytics.com https://www.gstatic.com https://recaptcha.net https://www.gstatic.cn/recaptcha/ https://www.youtube.com/ https://s.ytimg.com https://steamcommunity-a.akamaihd.net". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2023-1-20 23:27:52 | 显示全部楼层
    maxinimize 发表于 2023-1-20 21:36
    大佬,可以问个问题吗?

    我把这个案例代码复制到我的tampermonkey里,将@match的url换成了https://store.s ...

    用我的另外一种方式试试
    那个没有script插入
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2023-1-20 23:28:34 | 显示全部楼层
    maxinimize 发表于 2023-1-20 21:36
    大佬,可以问个问题吗?

    我把这个案例代码复制到我的tampermonkey里,将@match的url换成了https://store.s ...

    [油猴脚本开发指南]修改Vue3代码兼容油猴
    https://bbs.tampermonkey.net.cn/thread-1035-1-1.html
    [油猴脚本开发指南]魔改Element plus
    https://bbs.tampermonkey.net.cn/thread-1039-1-1.html
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    该用户从未签到

    0

    主题

    2

    回帖

    3

    积分

    助理工程师

    积分
    3
    发表于 2023-1-22 18:12:31 | 显示全部楼层
    李恒道 发表于 2023-1-20 23:28
    [油猴脚本开发指南]修改Vue3代码兼容油猴
    https://bbs.tampermonkey.net.cn/thread-1035-1-1.html
    [油猴 ...

    多谢大佬指点。我试了一下,发现Vue2和Element的cdn直接通过@require引入没有问题(element的css是用这篇帖子创建link标签的方式引入的,不然会有字体问题导致图标缺失)。再次感谢大佬这几篇帖子提供的思路。
    回复

    使用道具 举报

  • TA的每日心情
    开心
    2023-2-28 23:59
  • 签到天数: 191 天

    [LV.7]常住居民III

    620

    主题

    5084

    回帖

    5958

    积分

    管理员

    非物质文化遗产社会摇传承人

    积分
    5958

    荣誉开发者管理员油中2周年生态建设者喜迎中秋

    发表于 2023-1-22 18:22:16 | 显示全部楼层
    maxinimize 发表于 2023-1-22 18:12
    多谢大佬指点。我试了一下,发现Vue2和Element的cdn直接通过@require引入没有问题(element的css是用这篇 ...

    没事的
    哥哥加油
    没事可以来论坛玩
    混的人。
    ------------------------------------------
    進撃!永遠の帝国の破壊虎---李恒道

    入驻了爱发电https://afdian.net/a/lihengdao666
    个人宣言:この世界で私に胜てる人とコードはまだ生まれていません。死ぬのが怖くなければ来てください。
    回复

    使用道具 举报

    发表回复

    本版积分规则

    快速回复 返回顶部 返回列表