# Screeps-ConsoleCRS **Repository Path**: mingzey/screeps-console-crs ## Basic Information - **Project Name**: Screeps-ConsoleCRS - **Description**: ConsoleCRS是一个便于在控制台输出外部JS代码的插件，全称Console Cross Regino Scripting 控制台跨域脚本。 - **Primary Language**: JavaScript - **License**: MulanPSL-1.0 - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 2 - **Forks**: 0 - **Created**: 2020-10-17 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Screeps-ConsoleCRS ### 基础导航 - [介绍](#介绍) - [近期更新](#近期更新) - [安装教程](#安装教程) - [文档术语](#文档术语) - [内部域API - ConsoleCRS](#内部域api) - [外部域API - CRSCore](#外部域API) - [ConsoleCRS.Setting](#consolecrs-Setting) - [使用技巧](#使用技巧) - [更多DEMO](#更多Demo) - [已知问题](#已知问题) - [法律以及安全警告](#法律以及安全警告) ### 介绍 ConsoleCRS是一个便于在控制台输出外部JS代码的插件，全称Console Cross Regino Scripting 控制台跨域脚本。 您可以用它轻而易举的修改Screeps客户端，例如导航栏颜色、Creep的样式，你的头像等等任何您能在Screeps客户端上看到的东西。 您也可以用CRS向Screeps客户端的DOM上添加新的元素或标签，来定制你的Screeps客户端。 还有更多功能等待你的发掘，本仓库目前只提供一个基本交互的插件，它让这个过程变得更加容易。 --- ### 近期更新 ` Version 1.2` - `A`新增VUE支持,前往ConsoleCRS文件中，修改Setting对象下CRSCore_Support_VUE字段为true - `A`新增ElementUI支持，,前往ConsoleCRS文件中，修改Setting对象下CRSCore_Support_ElementUI字段为true - `U`数据交互优化，现在向外部域传递数据请使用ConsoleCRS.data，外部域读取数据使用CRSCore.data，并且该对象不会被清空 - `A`新增使用VUE+ElementUI输出对象树的DEMO `Version 1.1` - `U`修复了在反序列化时，单双引号以及反斜杠造成的转义后语法错误问题。 - `A`新增在外部域中的对象CRSCore，该对象用于挂载ConsoleCRS提供的快捷方法来操作Screeps的GUI，这样您就可以在内部域代码中直接使用。 - `A`新增方法ConsoleCRS.reMount()，可以重新挂载在外部域下的CRSCore对象，并刷新您的ConsoleCRS配置。 - `A`您现在可以通过复写ConsoleCRS.RunQueue.data对象来传递Screeps内部域产生的数据。 - `A`现在您可以手动或通过修改ConsoleCRS.setting[settingName] = true/false 来配置ConsoleCRS的执行组件，以此来减少不必要的资源浪费。 - `A`您可以打开或关闭ConsoleCRS.pushFinish的执行成功在控制台的提示。 --- ### 安装教程 1. 下载ConsoleCRS.js并将其放置在您的Screeps游戏代码目录 2. 在游戏中开头部分，使用以下代码来引入ConsoleCRS并保存 ```javascript require("ConsoleCRS"); ``` 3. 如果不出意外，您应该发现您的Console的Nav标签变成了橙色的ConsoleCRS字样，这便代表ConsoleCRS已经生效 --- ### 文档术语 为了您更好的阅读本文档，您需要了解下面作者主张定义的一些特殊术语。 #### `内部域` 指通过您的编写在Screeps的云端保存的JS代码的上下文，例如main.js中定义的对象都在`内部域`中。 #### `外部域` 指在网页或Steam客户端中，webview视图中运行的JS代码的上下文。 为了便于区分不同域的对象 - 内部域使用的主要对象是`ConsoleCRS` - 外部域使用的主要对象是`CRSCore` 因此，ConsoleCRS的准确描述就是，一个能在`外部域`中执行写在`内部域`中代码的插件。由于`外部域`能够访问到webview（浏览器）的对象，因此ConsoleCRS结合了`内部域`的云端保存永久存在的特性以及`外部域`广阔的访问权限，使您能够在Screeps中实现更多天马行空的功能。 --- ## 内部域API ## ConsoleCRS.pushCode(fun) 描述：添加到运行队列 * 使用pushCode向ConsoleCRS添加runCode运行队列，通过pushCode添加的代码会按照顺序依次执行 * 注意：需要在最后一次push代码后添加ConsoleCRS.pushFinish() 使用方法： ```javascript ConsoleCRS.pushCode(function(){ //TODO }) ``` --- ## ConsoleCRS.pushFinish(fun) 描述：用于执行pushCode后的运行队列，和pushCode配套使用 * 注意：如果您不使用ConsoleCRS.pushFinish()，您的代码将不会且不可能被执行。 * 注意：pushFinish允许跨tick触发，但有可能导致某个pushCode的代码在n个tick内被push n 次，相应的这个方法也会执行多次，编写时请注意跨Tick逻辑 使用方法： ```javascript ConsoleCRS.pushCode(function(){ //TODO First }); //Some other code of Screeps ConsoleCRS.pushCode(function(){ //TODO Second }) ConsoleCRS.pushFinish(); ``` --- ## ConsoleCRS.cleanOutput() 描述：清空控制台输出 * 该方法简述了如何通过CRS来控制Screeps客户端的界面按钮，如下 * ".console-controls .md-button:eq(1)"就是清除控制台输出按钮的 选择器路径 * 您应该遵循这个方法体，外层使用setTimeout，内层选中您想要的按钮元素，最后使用trigger('click')触发 * 如果您想获取其他按钮的 选择器路径，您可以前往WEB版的Screeps并启用开发者模式，通过检查元素操作获得 使用DEMO： ```javascript //每10tick清空控制台 if (Game.time % 10 == 0) { ConsoleCRS.cleanOutput(); } ConsoleCRS.pushFinish();//该方法也需要使用pushFinish()，否则将不会有效果 ``` --- ## ConsoleCRS.reMount() 描述：重置挂载到外部域上的`CRSCore`对象，一般用于打开游戏时可能ConsoleCRS并未执行并挂载注入`CRSCore`，此时在控制台使用该命令即可激活。并且在您手动配置Setting后使用该API可以刷新您的ConsoleCRS配置，使其生效。 * 建议不要再`内部域`上下文使用该方法，可能会造成不必要的性能损失。 --- ## ConsoleCRS Setting 该对象在ConsoleCRS.Setting下，您可以配置该对象的字段来开启或关闭某些功能。 例如，开启CRSCore的网络API支持。 需要打开设置CRSCore_Support_Net为true(当然现在还不能支持网络请求，因为我没写) ```javascript ConsoleCRS.Setting = { CRSCore_Support_Net: true //其他更多的字段配置 } ``` * 注意：不建议在代码中修改setting。正确的做法是到ConsoleCRS.js文件中找到预设的原代码直接修改该对象。 #### 目前支持的字段 ##### 常规设置 `PrintRunTip` 是否开启命令执行提示，开启后，执行命令将在console输出执行提示 ##### CRSCore_Support `CRSCore_Support_ScreepsNet` !无效字段：还没实现! 开启后将存在一个CRSCore.Net对象来支持网络连接和访问，提供便捷的GET/POST方法来访问网络。 `CRSCore_Support_ScreepsDOM` 开启后将存在一个CRSCore.ScreepsDOM对象，利用其中的方法迅速拿到相应的DOM元素。 `CRSCore_Support_VUE` VUE支持 `CRSCore_Support_ElementUI` Element-UI支持 [等待编辑](#) ## 使用技巧 [内部域与外部域的数据交互](#内部域与外部域的数据交互) --- ### 内部域与外部域的数据交互 由于内部域和外部域的执行顺序存在不同，即在非多线程的情况下，总是内部域的代码先执行完毕，再执行外部域的代码，因此写在内部域的外部代码是不会立即执行，在进行数据交换时，也需要特别的方式。 下面将展示几个有关**内部域向外部域传递数据**的例子。 ==错误的数据交互== ```javascript //下面是错误的例子 let a = 123; ConsoleCRS.pushCode(function(){ console.log(a);//这里并非预期的输出123，因为此时这个变量a属于外部域，访问的是外部域.a，而不是内部域.a }); //错误的例子2 ConsoleCRS.pushCode(function(){ a = 123; }); console.log(a);//这里同理，即便外部域执行的代码声明的变量a是全局变量，但该变量任然无法让内部域的代码访问。 ``` ==正确的数据交互== ```javascript //使用该特殊对象进行数据传递 ConsoleCRS.RunQueue.data ={ a:123 } ConsoleCRS.pushCode(function(){ console.log(CRSCore.data.a);//此时我们的外部域上下文中便可以访问到内部域中的数据了，您可以通过该方式将内部域的数据传出到外部域 }); ``` * 注意：复写的ConsoleCRS.RunQueue.data，会在每次执行ConsoleCRS.pushFinish()后被重置 --- ### 其他技巧 * 使用CRS运行的代码将在每个tick最后执行，其代码中的作用域与调用的位置在并无联系，这意味着他们的变量以及作用域与原生的Screeps代码不在同一个域中，而使用CRS运行的代码都在同一个域中，并且他们可以访问到window和document，请注意使用 * CRS运行的代码结果不会直接显示到Screeps的控制台中，你可以前往浏览器的开发者工具查看返回值或运行结果，或者你也可用写出一个div并将执行结果返回到该容器中直接在Screeps客户端查看 * 写在代码文档中并使用CRS提交(push)的代码每个tick都会执行，如需只执行一次请自行创建识别状态的变量，例如判断全window下是否存在该变量 * 运行的代码不耗费CPU，只在本地运行，只有本插件在序列化和饭序列化时会耗费少量CPU * 使用CRS可以访问到浏览器的cookie和window，您可以在上面储存一些数据帮助您编写代码逻辑 * 在开发中不免出现调用错误，这样可能会导致DOM树出现非预期的混乱，建议此时刷新页面或重新进入游戏来查看效果。 ## 更多Demo ```javascript //在Screeps客户端中央生成一个显示当前时间的黄色DIV ConsoleCRS.pushCode(function(){ //判断是否存在该元素 if(!window.myElement){ //不存在创建 window.myElement=document.createElement("div"); document.body.appendChild(myElement); }else{ let myElement = window.myElement; myElement.style.width = "100px"; myElement.style.height = "100px"; myElement.style.background = "#ffc107"; myElement.style.position = "fixed"; myElement.style.top = "50%"; myElement.style.left = "50%"; //获取时间 let mytime=new Date().toLocaleTimeString(); myElement.innerHTML = mytime; } }); ConsoleCRS.pushFinish(); ``` ```javascript //使用ScreeosDom修改客户端配色 ConsoleCRS.pushCode(function(){ let mainColor = "#795548"; let secondColor = "#3e2723" let CDOM = CRSCore.ScreepsDom; //顶部栏元素处理 CDOM.TopContent.self.style.background = mainColor; CDOM.TopContent.Profile.self.children[0].setAttribute('style', 'background: '+secondColor+' !important'); //左侧按钮处理 CDOM.LeftControls.self.children[0].style.background = mainColor; CDOM.LeftControls.self.children[1].style.background = mainColor; CDOM.LeftControls.self.children[2].style.background = mainColor; //缩放按钮处理 CDOM.ZoomControls.self.children[0].style.background = mainColor; CDOM.ZoomControls.self.children[1].style.background = mainColor; //右侧栏处理 CDOM.AsideContent.self.style.background = secondColor; CDOM.AsideContent.BottomGroup[0].children[0].style.background = mainColor; CDOM.AsideContent.BottomGroup[1].children[0].style.background = mainColor; CDOM.AsideContent.BottomGroup[2].children[0].style.background = mainColor; CDOM.AsideContent.BottomGroup[3].children[0].style.background = mainColor; //编辑栏处理 CDOM.EditorPlane.NavTab.style.background = mainColor; }); ConsoleCRS.pushFinish(); ``` ``` //使用VUE+ELEMENT输出树状对象图 let mydata = [ { la: "标题名称" + Game.time, ch: [{ la: "二级标题", ch: [{ la: "1-1-1" } ] } ] }, ]; //由于ConsoleCRS挂载后自动载入了VUE和ElementUI，因此您可以直接输出 //输出一个可以被识别为VUEAPP的DIV到Console,使用Game.time来设置不同id console.log("Data:
") //内部域向外部域传递数据 ConsoleCRS.data.Gametime = Game.time; ConsoleCRS.data.mydata = mydata; //使用代码修改这个VUEAPP ConsoleCRS.pushCode(function () { new Vue({ el: "#vueapp" + CRSCore.data.Gametime, data: function () { return { data: CRSCore.data.mydata, defaultProps: { children: "ch", label: "la" } } } }) }); ``` ## 已知问题 * 暂时无法将CRS执行代码立即反馈到游戏中，但您仍然可以通过WEB浏览器的开发者工具查看报错信息，后期我将提供一个方法来快捷实现功能 * 如果执行的代码中存在调用错误，会导致插入的JavaScript无法正确的被移除，代码会在每个Tick执行多次。 * 如有新的问题欢迎联系 1552904342@qq.com ## 法律以及安全警告 * 该插件提供了向浏览器植入JavaScript代码的快捷方式，该方式存在一定风险，可以窃取用户隐私数据，请勿随意运行他人提供的CRS代码，否则可能会造成无法预料的财产损失。